Basic introduction to React-Reflux-JS Tutorial-php.cn

This article mainly introduces the basic introduction of React-Reflux, which has certain reference value. Now I share it with everyone. Friends in need can refer to it

Because I need to use React Reflux for development at work, I have been studying hard in the past few days, especially Reflux. Many of the materials I found online and the documents on github are a bit old. According to the current rhythm, JavaScript is updated too fast, and the old documents Some of the syntax has not kept up with the updates, and there is indeed a lot of confusion for beginners. This article is only suitable for beginners or friends who are interested in React. Masters, please take a detour! ! !

Without further ado, let’s get to the point~

Quoting the saying: “To learn a language, use hello world, to learn a framework, use todolist.” Today we Just use todolist to illustrate.

　As a comparison, todolist-raw does not use Reflux to add and delete todolists. react-reflux uses Reflux to add and delete todolists. react- Reflux is divided into basic association and simple association Component.

Let’s take a look at the renderings of the components:

The computer needs to prepare the environment. I use create-react-app and yarn. Please install these two tools on Baidu yourself. The project directory is simplified as follows:

　1. todolist-raw Only a few files, the codes inside are quite similar It’s simple, I believe all fellow Taoists will understand it at a glance. The configuration of

package.json is as follows:

{
  "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"
  }
}

Copy after login

Pay attention to the version here. I don’t know what kind of problems will occur if the version does not correspond. For example, I use yarn After installing Rflux, the prompt "react-scripts" It’s not an internal command, yarn start can’t be started, even after repeated trials, I finally stopped it yarn -h and then continued yarn -autoclean and it was fine. Having said so much, in fact, the problem I encountered is not a problem of version asymmetry. I suggest you sort out yarn if some inexplicable bugs appear. itch? Just scratch it if it itches! ! !

index.html is as follows: There is no change from the automatically generated one, except that some comments have been deleted!

<!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>

Copy after login

index.js is as follows:

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;));

Copy after login

View Code

TodoList.js is as follows:

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;

Copy after login

Explain a few points:

　a. this.handlerClick = this.handlerClick.bind(this); is used to bind this. React uses jsx syntax sugar. The entire js is a component. Binding events on labels cannot use parentheses. If you bind events like traditional HTML event binding, it will not work. Because this tag is in the js file, traditional HTML binding events will be called directly! So the tag binding event in jsx is bound to a reference. And it needs to be bound to this js file (component). So the event of the label in jsx is.This is just my understanding , I don’t know if it’s correct or not. If it’s incorrect, please correct me!

　　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;

Copy after login

注意，父组件传递方法给子组件时，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;

Copy after login

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;

Copy after login

说明：多个监听用 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;

Copy after login

说明：这是基本的添加关联，需要在组件挂载时监听 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;

Copy after login

　　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;

Copy after login

我再贴：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;

Copy after login

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