Grundlegende Einführung in React-Reflux-js-Tutorial-php.cn

Dieser Artikel stellt hauptsächlich die grundlegende Einführung von React-Reflux vor, die einen gewissen Referenzwert hat. Jetzt kann ich ihn mit allen teilen, die ihn benötigen

Da ich React + Reflux für die Entwicklung verwenden muss, habe ich in den letzten Tagen intensiv studiert, insbesondere Reflux. Viele der Materialien, die ich online gefunden habe, und die Dokumente auf Github sind etwas alt , JavaScript wird zu schnell aktualisiert und ist veraltet. Ein Teil der Syntax des Dokuments hat mit der Aktualisierung nicht Schritt gehalten, was für Anfänger tatsächlich zu großer Verwirrung führt. Dieser Artikel ist nur für Anfänger oder Freunde geeignet, die sich für React Masters interessieren, bitte machen Sie einen Umweg! ! !

Kommen wir ohne weitere Umschweife zum Punkt~

Um das Sprichwort zu zitieren: „Um eine Sprache zu lernen, verwenden Sie Hallo Welt, um Lernen Sie ein Framework, verwenden Sie todolist.“ Heute verwenden wir todolist nur zur Veranschaulichung.

　Zum Vergleich: todolist-raw verwendet Reflux nicht, um das Hinzufügen und Löschen von todolist zu implementieren todolist. Reflux wird in Grundassoziation und einfache Assoziationskomponente unterteilt.

Werfen wir einen Blick auf die Renderings der Komponenten:

Der Computer muss die Umgebung vorbereiten. Ich verwende create-react-app und yarn. Das Projektverzeichnis ist vereinfacht wie folgt:

　1 todolist-raw Nur ein paar Dateien, die Die darin enthaltenen Codes sind ziemlich ähnlich. Es ist einfach. Ich glaube, dass alle anderen Taoisten es auf einen Blick verstehen werden.

package.json ist wie folgt konfiguriert:

{
  "name": "todolist-raw",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "react-scripts": "1.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

Nach dem Login kopieren

Achten Sie auf die Version hier. Ich weiß nicht, welche Probleme auftreten werden, wenn die Version nicht übereinstimmt. Ich verwende beispielsweise Garn Nach der Installation von Rflux wird angezeigt „react-scripts“ Es handelt sich nicht um einen internen Befehl. yarn start kann nicht gestartet werden. Wiederholte Versuche schlugen fehl, und dann habe ich aufgehört, garn -h zu verwenden Garn -autoclean. Abgesehen davon handelt es sich bei dem Problem, auf das ich gestoßen bin, nicht um ein Problem der Versionsasymmetrie. Ich schlage vor, dass Sie Garn aussortieren, wenn unerklärliche Fehler auftreten. jucken? Kratzen Sie einfach daran, wenn es juckt! ! !

index.html lautet wie folgt: Es gibt keine Änderung gegenüber der automatisch generierten, außer dass einige Kommentare gelöscht wurden!

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <title>TodoList-raw</title>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>

    <div id="root"></div>

  </body>
</html>

Nach dem Login kopieren

index.js lautet wie folgt:

1 import React from &#39;react&#39;;
2 import ReactDOM from &#39;react-dom&#39;;
3 import TodoList from &#39;./TodoList&#39;;
4 
5 ReactDOM.render(<TodoList />, document.getElementById(&#39;root&#39;));

Nach dem Login kopieren

Code anzeigen

TodoList.js lautet wie folgt :

import React, { Component, Fragment } from &#39;react&#39;;
import Items from &#39;./Items&#39;;

class TodoList extends Component {

  constructor(props) {
    super(props);
    this.state = {
      items: [1, 2, 3],
      isC: false
    };

    this.handlerClick = this.handlerClick.bind(this);
  }
  // 添加一个 item 项
  handlerClick() {
    const val = this.refs.inputEl.value;
    this.refs.inputEl.value = &#39;&#39;;
    const items = [...this.state.items, val]; // 最好不要直接操作 state
    this.setState({items}); // es6 语法，等价于 {items: items}
    }

  // 删除某一个 item 项，点击就删除
  handlerDelete(index) {
    const items = [...this.state.items];
    items.splice(index, 1);
    this.setState({items}); 
  }

  render() {
    return (
      <Fragment>
        <h3>Hello React!</h3>
        <input
          ref="inputEl"
          style={{marginRight: "10px"}}
        />
        <button onClick={this.handlerClick}>添加</button>
        <Items
          msg={this.state.items}
          func={this.handlerDelete.bind(this)} />
      </Fragment>
    );
  }
}

export default TodoList;

Nach dem Login kopieren

Erklären Sie ein paar Punkte:

　a. this.handlerClick = this.handlerClick.bind(this) wird verwendet, um dies zu binden. Das gesamte js ist eine Komponente, die keine Klammern verwendet. Da sich dieses Tag in der js-Datei befindet, werden herkömmliche HTML-Bindungsereignisse direkt aufgerufen! Das Tag-Bindungsereignis in jsx ist also an eine Referenz gebunden. Und es muss an diese js-Datei (Komponente) gebunden sein. Das Ereignis des Tags in jsx ist also .Das ist nur mein Ich verstehe, ich weiß nicht, ob es richtig ist oder nicht. Wenn es falsch ist, korrigieren Sie mich bitte!

　　b. 代码很少阅读起来应该没难度，而且上面也有一些注释了。不过还是要啰嗦一下。React 是用数据（data）基于状态（state）来驱动视图（view），也就是搞来搞去都是在搞数据，用数据改变状态来达到渲染视图的目的，大多是在虚拟内存处理，通过什么 diff 比较算法，层层计较然后达到提高性能，加快视图渲染的目的。额，我只能用“非常快”来形容 React 的性能，当然，性能的事还是跟实际代码复杂度相关，我只想说 React 确实出众！扯远了...，既然是基于状态（state），所以要有 state，在 constructor 中定义了，而且处理业务时改变 state，比如 handlerClick，deleteClick 中都是先用变量保存下来，通过 this.setState() 方法在设置回去！

　　c. 父子关系的组件，父组件可通过属性来给子组件传参，就像这样：<Items msg={this.state.items} />，子组件可通过 this.props.msg 拿到 items。

Items.js 代码如下：

import React, { Component } from &#39;react&#39;;

class Items extends Component {

  constructor(props) {
    super(props);
    this.func = this.props.func;
  }

  render() {
    return (
      <ul>
        {this.props.msg.map((item, index) => <li
            key={index}
            onClick={this.func.bind(this, index)}
          >{item}</li>
        )}
      </ul>
    );
  }
}

export default Items;

Nach dem Login kopieren

注意，父组件传递方法给子组件时，this 指向的是子组件，所以通过属性传递时，需要用函数绑定 bind() 绑定父组件的 this。

最后，通过 cmd 命令行，yarn start 运行任务即可实现一个简单的 TodoList 功能。

　　2. react-reflux: 通过 Reflux 来实现简单的 TodoList （基本法关联 Component）。

　　2.1 简单地说明下为什么要 Reflux 架构，如图（自己画的组件树结构！），不存在父子关系的组件（如 B 和 E）通讯势必会很困难而且麻烦，需要一个中间件（Store）来存储数据，类似于订阅者和发布者（中间人模式）一样，大家都往 Store 中存取数据就好，不需要层层走关系了，避免了层层传递数据的灾难！

　　2.2 关于 Actions、Store 和 Component 的关系，可以这么理解：Store 作为一个中间人有订阅和发布的功能，Actions 就是 Component 触发的动作，Actions 被 Store 监听着，组件有新动作了， Store 就会做出相应的处理（回调函数）更改 Store 中的数据通过 this.trigger(this.items) 发布消息[就相当于更新 items]， Component 监听着 Store，用一些手段（mixin 或回调函数）关联起 Component 中的状态信息（state.items）和 Store 中的信息（items），这就是所谓的单向数据流，单向表示一个方向流动，不能反向。

　　2.3 目录结构和前面的 todolist-raw 没多大区别，就是多了 TodoActions.js 和 TodoStore.js 两个文件。如图：

　　2.4 一言不合就贴代码。首先 index.js 代码没变化，就不贴了，TodoActions.js 代码如下：

import Reflux from &#39;reflux&#39;;

const TodoActions = Reflux.createActions([
    &#39;getAll&#39;,
    &#39;addItem&#39;,
    &#39;deleteItem&#39;
]);
export default TodoActions;

Nach dem Login kopieren

TodoStore.js 代码如下：

import Reflux from &#39;reflux&#39;;
import Actions from &#39;./TodoActions&#39;;
const TodoStore = Reflux.createStore({
    // items: [1, 2, 3],
    // listenables: Actions,
    init() {
        console.log(&#39;TodoStore init method~&#39;);
        this.items = [1, 2, 3]; // 给个初始值
        this.listenables = Actions; // 监听 TodoActions.js
        // this.listenTo(addItem, &#39;addItem&#39;);
    },
    onGetAll() {
        console.log(&#39;onGetAll&#39;);
        this.trigger(this.items);
    },
    onAddItem(model) {
        console.log(&#39;onAddItem---&#39;, model);
        this.items.unshift(model);
        this.trigger(this.items);
    },
    onDeleteItem(index) {
        console.log(&#39;onDeleteItem---&#39;, index);
        this.items.splice(index, 1);
        this.trigger(this.items);
    }
})
export default TodoStore;

Nach dem Login kopieren

说明：多个监听用 listenables，单个监听 this.listenTo(addItem, 'addItem'); 多个监听的时候定义处理函数是 on + ActionName 驼峰式命名。定义初始值和监听可以写在 init 方法外面，就像上面那样（已注释）。

　　2.5 Actions 和 Store 都写好了，就差最后一步，整合到组件 Component 中，才算有点意义了！TodoList.js 代码如下：

import React, { Component, Fragment } from &#39;react&#39;;
import Actions from &#39;./TodoActions&#39;;
import TodoStore from &#39;./TodoStore&#39;;
import Items from &#39;./Items&#39;;

class TodoList extends Component {

    constructor(props) {
        super(props);
        this.state = {
            items: [],
            isC: false
        };

        this.handlerClick = this.handlerClick.bind(this);
    }
    // 组件挂载
    componentDidMount() {
        this.unsubscribe = TodoStore.listen(this.onStatusChange, this);
        Actions.getAll();
    }
    // 组件移除
    componentWillUnmount() {
        console.log(&#39;componentWillUnmount&#39;);
        this.unsubscribe(); // 解除监听
    }
    // callback
    onStatusChange(items) {
        this.setState({items});
    }
    // 添加一个 item 项
    handlerClick() {
        const val = this.refs.inputEl.value;
        this.refs.inputEl.value = &#39;&#39;;
        Actions.addItem(val);
    }

    render() {
        return (
            <Fragment>
                <h3>Hello React-Reflux!</h3>
                <input
                    ref="inputEl"
                    style={{marginRight: "10px"}}
                />
                <button onClick={this.handlerClick}>添加</button>
                <Items msg={this.state.items} />
            </Fragment>
        );
    }
}

export default TodoList;

Nach dem Login kopieren

说明：这是基本的添加关联，需要在组件挂载时监听 Store，需要定义一个回调函数 onStatusChange()，组件卸载时解除监听 this.unsubscribe()，Store 源码如下：

不传 bindContext 更新不了状态，回调函数 onStatusChange 中报异常，传入 this 就好了。如图：

Items.js 代码如下：

import React, { Component } from &#39;react&#39;;
import Actions from &#39;./TodoActions&#39;;

class Items extends Component {
    render() {
        return (
            <ul>
                {this.props.msg.map((item, index) => <li
                        key={index}
                        onClick={this.handlerDelete.bind(this, index)}
                    >{item}</li>
                )}
            </ul>
        );
    }
    handlerDelete(index) {
        Actions.deleteItem(index);
    }
}

export default Items;

Nach dem Login kopieren

　　3. react-reflux: 通过 Reflux 来实现简单的 TodoList （简便法关联 Component）。

　　3.1 先安装 react-mixin 和 axios： npm install react-mixin，npm install axios。结合异步操作实现简便 Store 关联 Component。

安装两个依赖之后，修改 TodoStore.js 和 TodoList.js 代码如下：

我贴：TodoStore.js：

import Reflux from &#39;reflux&#39;;
import Actions from &#39;./TodoActions&#39;;
import Axios from &#39;axios&#39;;

const TodoStore = Reflux.createStore({

    // items: [3, 2, 1],
    // listenables: Actions,

    init() {
        console.log(&#39;TodoStore init method~&#39;);
        this.items = [3, 2, 1]; // 初始值，此处不是 state, mark-1 -2 -3 都可以直接操作
        this.listenables = Actions;
    },
    onGetAll() {
        console.log(&#39;onGetAll&#39;);
        Axios.get(&#39;https://api.github.com/&#39;)
        .then(res => {
            const keys = Object.keys(res.data);
            console.log(&#39;axios-response-keys: &#39;, keys);
            this.items = keys; // mark-1
            this.trigger(this.items);
        })
        .catch(err => console.log(&#39;axios-error: &#39;, err));
    },
    onAddItem(model) {
        console.log(&#39;onAddItem---&#39;, model);
        this.items.unshift(model); // mark-2
        console.log(&#39;TodoStore-items: &#39;, this.items);
        this.trigger(this.items);
    },
    onDeleteItem(index) {
        console.log(&#39;onDeleteItem---&#39;, index);
        this.items.splice(index, 1); // mark-3
        this.trigger(this.items);
    }
})

export default TodoStore;

Nach dem Login kopieren

我再贴：TodoList.js：

import React, { Component, Fragment } from &#39;react&#39;;
import ReactMixin from &#39;react-mixin&#39;;
import Reflux from &#39;reflux&#39;;
import Actions from &#39;./TodoActions&#39;;
import TodoStore from &#39;./TodoStore&#39;;
import Items from &#39;./Items&#39;;

class TodoList extends Component {

    constructor(props) {
        super(props);
        this.state = {
            items: [],
            isC: false
        };

        this.handlerClick = this.handlerClick.bind(this);
    }
    // 组件挂载
    componentDidMount() {
        Actions.getAll();
    }
    // 添加一个 item 项
    handlerClick() {
        const val = this.refs.inputEl.value;
        this.refs.inputEl.value = &#39;&#39;;
        if (!val) {
            alert(&#39;Please enter the data which type of number or string&#39;);
            return false;
        }
        Actions.addItem(val);
    }

    render() {
        return (
            <Fragment>
                <h3>Hello React-Reflux!</h3>
                <input
                    ref="inputEl"
                    style={{marginRight: "10px"}}
                />
                <button onClick={this.handlerClick}>添加</button>
                <Items msg={this.state.items} />
            </Fragment>
        );
    }
}
// 用 Reflux.connect 将 Store 和 Component 组合在一起
ReactMixin.onClass(TodoList, Reflux.connect(TodoStore, &#39;items&#39;));

export default TodoList;

Nach dem Login kopieren

修改之后 yarn start 启动项目，截图如下：