【天贏金創】Reflux學習指南

時間 2019-11-17

標籤天贏金創 reflux 學習指南简体版

原文原文鏈接

這個是 simple Todo with React and2 的第二部 - Reflux javascript

第一部能夠看 simple Todo with React and Flux1 也能夠看學習flux的一些淺顯理解2 html

Reflux 相對 Flux 來講，真的是簡單不少，好理解不少。官方API2 和不少開發者的分享也都說得很明白了。因此我就簡單講講個人理解 java

How Reflux Works

Reflux 給咱們封裝了一些方法和屬性，可讓咱們的數據和操做能夠在 Actions Stores Components 之間單向流動，再也不須要 Dispatcher react

用 Reflux.createStore() 方法建立的 Store 能夠添加一個 listenables 的屬性，只要把咱們的 Actions 放在裏面，當咱們執行 Actions 裏的行動的時候，就會自動觸發 Store 裏的 on"Actions" 的方法，就這完成了 Actions -> Stores git
而在 Controller View 中，有 Store.listen(fn) 方法，只要 Store 執行了 this.trigger()，就會觸發這個在 Controller View 裏的 fn 函數，咱們就能夠在這個 fn 裏改變 state 的值， Components 也會隨之變化，這就完成了 Stores -> View Components github
而在任意的 Components 內直接觸發 Actions 的行動，就能夠完成 View Components -> Actions npm

Refactoring React Components to ES6 Classes

所謂的坑，就是從這裏開始 react-router

從 React 0.13 開始，咱們就均可以用 ES6 的語法來寫 React 的組件了，具體看這裏1，但不少的教程都仍是運用 React.createClass() 的方式，固然啦，React.createClass() 也有他的好處，例如 Autobindingmixins 等等，但我以爲用 ES6 寫會更優雅，但把原來的改寫就有不少坑，因此如今就來一個一個填吧函數

1. We don't need componentWillMount any more

componentWillMount 這個方法已經再也不須要了，咱們把渲染組件以前要作的事情放在constructor 裏，例如若是咱們設置咱們的 state，咱們能夠這樣學習

謝謝＠react1 的指出， componentDidMount 和 componentWillMount 的區別能夠在這裏看到

class ExampleComponent extends React.Component {
  constructor (props) { super(props); this.state = { // set your state };
  }
}

2. Autobinding and No Autobinding

改用了 ES6 的語法以後，函數的 this 再也不是綁定在了自身的實例身上，這裏能夠有兩個方法去解決這個問題

1. use arrow function =>

當你在組件裏寫的方法是用 arrow function，那麼 this 就會自動綁在實例身上，後面調用方法的時候，就能夠直接調用了

class ExampleComponent extends React.Component {
  constructor (props) { super(props);
  }
  _handleClick: () => { console.log(this);
  }
  render () { return <div onClick={this._handleClick}>Hello, Reactr!</div>; }
}

2. use bind(this)

還有一種就是利用 bind(this)

// use `bind(this)` when called class ExampleComponent extends React.Component {
  constructor (props) { super(props);
  }
  _handleClick () { console.log(this); // this is an ExampleComponent }
  render () { return <div onClick={this._handleClick.bind(this)}>Hello, Reactr!</div>; }
} // use `bind(this)` in constructor class ExampleComponent extends React.Component {
  constructor (props) { super(props); this._handleClick = this._handleClick.bind(this);
  }
  _handleClick () { console.log(this); // this is an ExampleComponent }
  render () { return <div onClick={this._handleClick}Hello, Reactr!</div>; }
}

3. No Mixins

ES6 不支持 mixins 了，but Mixins Are Dead. Long Live Composition2

Reflux 官方的 TodoApp 有 mixins，那咱們怎麼來修改他呢

TodoApp 裏的 mixins: [Reflux.connect(TodoStores,"list")]

Reflux.connect 方法主要做用是當 TodoStores 執行 this.toggle() 方法的時候，TodoApp 就會從新setState 來更新數據，因此咱們能夠用 TodoStores 的 listen 方法來監聽，再調用 TodoApp 自身的onStateChange 方法
TodoMain 裏的 mixins: [ ReactRouter.State ]

這個在 react-router 1.0.0 以後就再也不有了，UPGRADE_GUIDE2也寫得很明白了，只要把 switch 裏的getPath() 改爲 this.props.location.pathname 就能夠了
TodoItem 裏的 mixins: [React.addons.LinkedStateMixin]

這個是用來作 input 數據雙向綁定的，不用 mixins 怎麼作，React 的官方文檔2也寫得很清楚