Glad you back @Drake

React.Component or React.createClass

刚刚学习 React 的时候，有很多教程创建一个 React 组件的时候，都是使用 React.createClass，那是 ES6 还没有广泛使用的时候的语法，后来在 React v0.13 的时候，就可以使用 ES6 的 class 来创建 React 组件，也就是继承 React.Component。

var Hello = React.createClass();

class Hello extends React.Component {}

虽然如此，但现在还是有很多人喜欢用 React.createClass，因为这种方式创建的组件，可以使用 Mixins，而且里面的方法是自动绑定的( this 指向这个组件)

但务必使用 ES6 语法，不要问为什么，看完下面你就知道了。但首先我们还是要解决上面的两个问题

首先是 Autobinding 的问题，在 ES6 里同样有方法可以绑定我们的 this

• 我们在创建类之后，可以在构造器里对我们所有的函数做一个绑定

  class Counter extends React.Component {
    constructor () {
      super();
      this.tick = this.tick.bind(this);
    }
    tick () {
      // ...
    }
    // ...
  }

• 也可以在我们调用函数的时候，进行绑定

  class Counter extends React.Component {
    tick () {
      // ...
    }
    render () {
      return <button onClick={this.tick.bind(this)}>Click</button>
    }
  }

• 我们也可以使用 Arrow Functions 去实现

  class Counter extends React.Component {
    tick = () => {
      // ...
    }
  }

其次是 Mixins，Mixins 只是让你把一些额外的功能集成到你的组件里，相反的，我们可以把功能写在另一个组件里，然后再把之前的组件传进来，组合之后 export 出去，我们把这种组件称之为 "Higher-Order Component"，具体的 demo 在下面的链接里有

而 Minixs 里大多都是 React 的生命周期函数，想要了解 React LifeCycle 可以通过 pure render 这个关于 React 的知乎专栏

Further Reading

• React.Component vs React.createClass - Naman Goel & Zach Silveira
• Mixins Are Dead. Long Live Composition - Dan Abramov
• React Mixins when using ES6 and React - Egor Smirnov

Smart and Dumb Components

也就是 Container Components 和 Presentational Components。自从 v0.13 出来之后提出了 "Higher-Order Component"，慢慢的发现，我们的组件会分为两类

• Dumb Components
  • 不会依赖应用的 action 或者 store
  • 接收数据和回调通过 props
  • 几乎没有自己的 state
  • 可能会用到其他 Dumb Components
• Smart Components
  • 把一个或者多个 Smart or Dumb Components 包含起来
  • 用引用 action 或者 store，传到 Dumb Components 下面去
  • 几乎没有 DOM 节点，都是通过其他 Smart or Dumb Components 组合起来

所以后来在 React v0.14 更新的时候，不仅仅把 React 分成了 React 和 ReactDOM，而且还提出了 Stateless Functional Components，也就是类似上面的 Dumb Components，这种组件因为没有多余的部分，只负责渲染，所以我们直接可以使用新版本的语法

const Aquarium = (props) => {
  const fish = getFish(props.species);
  return <Tank>{fist}</Tank>;
};

// 或者我们可以直接加上 ES6 的解构语法
const Aquarium ＝ ({ species }) => (
  <Tank>{ getFish(species) }</Tank>
);

使用 ES6 的语法，就可以让构建我们的组件变成合理，简单。当然啦，要结合 Webpack 把我们的小应用跑起来

Further Reading

• Smart and Dumb Components - Dan Abramov
• React v0.14 - Facebook React Blog

Flux, Reflux and Redux

Flux 是配合 React 推出来的单向数据流架构，如果你想了解 Flux 具体是个什么东西，下面两篇 post 可能可以帮到你(卖了个广告)

• Getting To Know Flux, the React.js Architecture - Ken Wheeler
• Simple TODO with React and Flux - Jason Liao

但我认为更应该使用 Redux 去管理你的数据流。

学习 Redux 当然可以去看作者的教学视频 Getting Started with Redux。你会从中了解到很多 Redux 的概念，像 Single source of truth，State is read-only，Changes are made with pure functions。还可以学到一些函数式编程的思想

当然你也可以去 Egghead.io Redux Course Notes 这个 repo 看里面的总结，如果你对英语有恐惧也可以看 我的总结和笔记 (再卖个广告)

Universal React

现在社区基本用的是 React + Redux + React-Router + Express，我们可以在服务器端渲染我们的 React 组件，也可以在客户器端靠 React-Router 来处理我们的跳转，Jack Franklin 的 Universal React 是一个小 demo 教我们如何搭建我们的应用

但是我却在处理数据的时候，遇到了一些问题，用户处理一些与数据有关的操作的时候，我们不能把请求写在 reducers 里面，会导致 reducers 不纯，那是要写在 Middleware 里面吗？还有如果用异步到客户端，怎么在客户器端控制跳转等等，相信应用越大，遇到的问题就越多

最近也一直在找 Best Practice，如果了解掌握了再回来更新

Hope it helps :)