React-Reflux的基礎介紹-js教程-PHP中文網

首頁

web前端

js教程

React-Reflux的基礎介紹

不言

Jul 07, 2018 am 09:45 AM

這篇文章主要介紹了React-Reflux的基礎介紹，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下

因為工作需要使用React Reflux 開發，最近幾天都在努力學習著，特別是Reflux，在網上查找的許多資料和github 上的文檔年代都有點久遠，JavaScript 按照目前的節奏，更新得太快，舊文檔的一些文法跟不上更新，對廣大初學者來說，確實存在著許多困惑。本文是僅適於初學者或對 React 有興趣的朋友，大神請繞道！！！

　　廢話不多說，進入正題~

　　引用俗話：“學語言用hello world，學框架用todolist”，今天咱們就用todolist 來做說明。

　　作為一個對比todolist-raw 是沒有用Reflux 實現todolist 的增加和刪除的，react-reflux 使用Reflux 實現todolist 的增加和刪除，react- reflux 再分基本關聯和簡單法關聯Component。

　　先看下元件的效果圖：

　　電腦需要準備好環境，我用的是create-react-app

和

yarn ，請自行百度安裝好這兩個工具，專案目錄精簡如下圖：　　

#　　1. todolist-raw 就幾個文件，裡面的程式碼都比較簡單，相信各道友一看就懂了。 package.json 的設定如下：

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

這裡注意一下版本，版本不對應我也不知道會出現什麼樣的問題，例如我用的是

yarn 安裝了Rflux 之後，提示 "react-scripts"

不是內部指令，

yarn start 啟動不了，反覆試驗都不行，後來打扣了 yarn -h

然後接著

yarn -autoclean 就好了。講了那麼多，其實我遇到的這個問題也不算版本不對稱的問題吧，建議出現一些莫名其妙的 bug 就整理下 yarn。癢？癢就撓嗆！！！

index.html 如下：

與自動產生的沒什麼改變，就是刪了一些註解！

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

index.js 如下：

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

#View CodeTodoList.js 如下：

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 id="Hello-nbsp-React">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;

說明幾點：

###　　###a.### this.handlerClick = ###this.handlerClick.bind(###this## #); 是用來綁定this 的，React 用的是jsx 語法糖，整個js 就是一個元件，在標籤上綁定事件是不能帶括號的，如果像傳統的HTML 事件綁定那樣綁定事件不行，因為這個標籤就是在js 檔案中的，像傳統的HTML 綁定事件就會直接呼叫了！所以 jsx 中的標籤綁定事件綁定的是引用。而且需要綁定在這個 js 檔案（元件）上。所以jsx 中的標籤的事件就是###.###這只是我的理解，不知道對不對，如果不正確，請指正！ #########################

　　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;

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

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;

说明：多个监听用 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 id="Hello-nbsp-React-Reflux">Hello React-Reflux!</h3>
                <input
                    ref="inputEl"
                    style={{marginRight: "10px"}}
                />
                <button onClick={this.handlerClick}>添加</button>
                <Items msg={this.state.items} />
            </Fragment>
        );
    }
}

export default TodoList;

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

　　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;

我再贴：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 id="Hello-nbsp-React-Reflux">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;

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