React 是 Facebook 里一群牛 X 的码农折腾出的牛X的框架。 实现了一个虚拟 DOM，用 DOM 的方式将需要的组件秒加，用不着的秒删。本文主要给大家介绍了关于想用好React的你必须要知道的一些事情，下面话不多说，来一起看看详细的介绍：
一、容器性组件（container component）和展示性组件（presentational component）
使用React编写组件时，我们需要有意识地将组件划分为容器性组件（container component）和展示性组件（presentational component），这样有助于我们在编写组件时，更加明确这个组件应该负责哪些事情。
容器性组件，负责业务流程逻辑的处理，如发送网络请求，处理请求数据，将处理过的数据传递给子组件的Props使用。同时，容器性组件提供源数据的方法，以Props方式传递给子组件，当子组件的状态变更引起源数据的变化时，子组件通过调用容器性组件提供的方法同步这些变化。
展示性组件，负责组件的外表，也就是组件如何渲染，具有很强的内聚性。展示性组件不关心渲染时使用的组件属性（Props）是如何获取到的，它只要知道有了这些Props后，组件应该如何渲染就足够了。属性如何获取，是容器性组件负责的事情。当展示性组件状态的变化需要同步到源数据时，需要调用容器性组件中的方法，这个方法一般也是通过Props传递给展示性组件。
例如，一个Todo项目，有一个Todo组件和一个TodoList组件，Todo组件是一个容器性组件，负责从服务器端获取待办事项列表，获取到待办事项列表后传递给TodoList显示。当在TodoList中新建一项待办事项后，需要通过TodoList 的 Props，调用Todo组件中保存待办项目的方法，将新建的待办项目同步到服务器端。
容器性组件和展示性组件可以相互嵌套，一个容器性组件可以包含多个展示性组件和其他的容器性组件；一个展示性组将也可以包含容器性组件和其他的展示性组件。这样的分工，可以使与组件渲染无直接关系的逻辑由容器性组件集中负责，展示性组件只关注组件的渲染逻辑，从而使展示性组件更容易被复用。对于非常简单的页面，一般只要一个容器性组件就足够了；但对于负责页面，则需要多个容器性组件，否则所有的业务逻辑都在一个容器性组件中处理的话，会导致这个组件非常复杂，同时这个组件获取到的源数据，可能需要经过很多层的组件Props的传递，才能到达最终使用的展示性组件。
二、Props、State和组件的普通属性
Props、State的概念都很清晰，组件的普通属性是指在组件中直接挂载到this下的属性。其实，Props和State也是组件的两个普通属性，因为我们可以通过this.props 和 this.state 直接获取到。那么Props、State 和 组件的其他普通属性，分别应该在什么场景下使用呢？
Props和State都是用于组件渲染的，也就是说，一个组件最终长成什么样，取决于这个组件的Props和State。Props和State的变化都会触发组件的render方法。但这两者也是有区别的。Props是只读的数据，它是由父组件传递过来的；而State是组件内部自己维护的状态，是可变的。State可以根据Props的变化而变化。如果组件中还需要其他属性，而这个属性又与组件的渲染无关（也就是render方法中不会用到），那么就可以把这个属性直接挂在到this下，而不是作为组件的一个状态。
例如，组件中需要一个定时器，每隔几秒改变一下组件的状态，就可以定义一个this.timer属性，以备在componentWillUnmount时，清除定时器。
三、setState 异步性
React官网提到，this.state和this.props的更新可能是异步的，React可能会出于性能考虑，将多个setState的调用，合并到一次State的更新中。所以，不要依赖this.props 和 this.state的值计算下一个状态。引用官网的一个代码示例：
// Wrong this.setState({ counter: this.state.counter + this.props.increment, });
如果一定要这么做，可以使用另一个以函数作为参数的setState方法，这个函数的第一个参数是前一个State，第二个参数是当前接收到的最新Props。如下所示：
// Correct this.setState(function(prevState, props) { return { counter: prevState.counter + props.increment }; });
在调用setState之后，也不能立即使用this.state获取最新状态，因为这时的state很可能还没有被更新，要想保证获取到的state是最新的state，可以在componentDidUpdate中获取this.state。也可以使用带用回调函数参数版本的setStatesetState(stateChange, [callback]) ，回调函数中的this.state会保证是最新的state。
四、componentWillReceiveProps