【天赢金创】Reflux学习指南

这个是 simple Todo with React and2 的第二部 - Reflux

第一部能够看 simple Todo with React and Flux1 也能够看 学习flux的一些浅显理解2

Reflux 相对 Flux 来讲，真的是简单不少，好理解不少。官方API2 和不少开发者的分享也都说得很明白了。因此我就简单讲讲个人理解

How Reflux Works

Reflux 给咱们封装了一些方法和属性，可让咱们的数据和操做能够在 Actions Stores Components 之间单向流动，再也不须要 Dispatcher

• 用 Reflux.createStore() 方法建立的 Store 能够添加一个 listenables 的属性，只要把咱们的 Actions 放在里面，当咱们执行 Actions 里的行动的时候，就会自动触发 Store 里的 on"Actions" 的方法，就这完成了 Actions -> Stores

• 而在 Controller View 中，有 Store.listen(fn) 方法，只要 Store 执行了 this.trigger()，就会触发这个在 Controller View 里的 fn 函数，咱们就能够在这个 fn 里改变 state 的值， Components 也会随之变化，这就完成了 Stores -> View Components

• 而在任意的 Components 内直接触发 Actions 的行动，就能够完成 View Components -> Actions

Refactoring React Components to ES6 Classes

所谓的坑，就是从这里开始

从 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，那咱们怎么来修改他呢

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

   Reflux.connect 方法主要做用是当 TodoStores 执行 this.toggle() 方法的时候，TodoApp 就会从新setState 来更新数据，因此咱们能够用 TodoStores 的 listen 方法来监听，再调用 TodoApp 自身的onStateChange 方法

2. TodoMain 里的 mixins: [ ReactRouter.State ]

   这个在 react-router 1.0.0 以后就再也不有了，UPGRADE_GUIDE2也写得很明白了，只要把 switch 里的getPath() 改为 this.props.location.pathname 就能够了

3. TodoItem 里的 mixins: [React.addons.LinkedStateMixin]

   这个是用来作 input 数据双向绑定的，不用 mixins 怎么作，React 的官方文档2也写得很清楚

能够对比看看 个人代码1 和 官方的代码

Use React-Router 1.0.0-rc1

npm install react-router@1.0.0-rc1

好像用上面的命令才能够下到 1.0.0 否则直接 npm install react-router 下的仍是 0.13 的

Reflux 官方的 TodoApp 用的 react-router 是 0.13 版的，但如今出到 1.0 了，UPGRADE_GUIDE2 也写得很明白了，因此仍是用 1.0 的吧

而在这个 TodoApp 中，受到影响的就是 Rendering、Links、RouteHandler 和 State mixin

Summary

但愿这篇东西能够帮到那些也想用 ES6 写 React，但老是被坑的朋友们，有问题也能够一块儿多加讨论，共同窗习

想看完整代码的能够到 simple-todo-with-react-and-reflux1

若有错误，欢迎指出