用好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

当组件的属性可能发生变化时，这个方法会被调用。这里说可能，是由于父组件render方法每次被调用时，子组件的这个方法都会被调用（子组件第一次初始化时除外），但并不必定每次子组件的属性都会发生变化。若是组件的State须要根据Props的变化而变化，那么这个方法就是最适合这个这个逻辑的地方。例如当Props变化时，组件的State须要重置，就能够在这个方法中调用this.setState()来重置状态。须要注意，在这个方法中调用this.setState()并不会从新触发componentWillReceiveProps的调用，也不会致使render方法被触发两次。通常状况下，接收到新Props会触发一次render，调用this.setState也会触发一次render，但在componentWillReceiveProps中调用this.setState，React会把本来须要的两次render，合并成一次。

shouldComponentUpdate

这个方法常做为优化React性能使用。当shouldComponentUpdate返回false时，组件本次的render方法不会被触发。能够经过在这个方法中比较先后两次state或者props，根据实际业务场景决定是否须要触发render方法。

React提供了一个React.PureComponent组件，这个组件重写了shouldComponentUpdate，会对先后两次的state和props进行浅比较，如何不一致，才会返回true，触发后续的render方法。这里的浅比较指，只会对state和props的第一级属性进行比较（使用!==），这知足通常的使用场景。若是你的组件继承了React.PureComponent，但在setState时，传入的state是直接修改的原有state对象，就会由于依然知足浅比较的条件，而不会从新触发render方法，致使最终DOM和state不一致。例如state={books: ['A','B']}，在setState时，使用this.setState({name: this.state.books.push('C')})直接修改books对象，这样虽然books内容发生了修改，但由于对象引用并无变化，因此依然知足浅比较条件，不会触发render方法。

通常状况下，让shouldComponentUpdate返回默认的true是不会有太大问题的。虽然这样可能致使一些没必要要的render方法被调用，但render方法直接操做的是虚拟DOM，只要虚拟DOM没有发生变化，并不会致使实体DOM的修改。而JS慢是慢在实体DOM的修改上。只要你的render方法不是很复杂，多调用几回render方法并不会带来多大的性能开销。

render

父组件每次render方法被调用，或者组件本身每次调用setState方法，都会触发组件的render方法（前提是shouldComponentUpdate使用默认行为，老是返回true）。那么组件每次render，是否是都会致使实体DOM的从新建立呢？答案是，不是！

React之因此比直接操做DOM的JS库快，缘由是React在实体DOM之上，抽象出一层虚拟DOM，render方法执行后，获得的是虚拟DOM，React 会把组将当前的虚拟DOM结构和前一次的虚拟DOM结构作比较，只有存在差别性，React才会把差别的内容同步到实体DOM上。若是两次render后的虚拟DOM结构保持一致，并不会触发实体DOM的修改。

React速度快的缘由，还有一个是它出色的Diff算法。标准的比较两棵树的Diff算法的时间复杂是 O(n3) 。而React基于很是符合实际场景的两个假设，就将Diff算法的时间复杂度降到了接近O(n)。这两个假设是：

1. 若是两个组件或元素类型不一样，那么他们就是彻底不一样的树，不须要再比较他们的子节点。例如，<Article>和<Comment>将产生是两个彻底的树状结构；<div>children</div>和<p>children</p>也是两个彻底不一样的树。这种状况下，组件会被彻底重建，旧的DOM节点被销毁，组件经历componentWillUnmount()，而后从新建立一棵新树， 组件经历 componentWillMount() 和 componentDidMount()。
2. 能够为组件或元素设置key属性，key用来标识这个组件或元素。key不须要全局惟一，只须要在兄弟组件或兄弟元素间保证惟一性就能够。key经常使用到集合（List）元素中。例如：

<ul>
<li key='a'>Book A</li>
<li key='b'>Book B</li>
</ul>

当在第一个位置插入一条记录Book C 时，

<ul>
<li key='c'>Book C</li>
<li key='a'>Book A</li>
<li key='b'>Book B</li>
</ul>

因为有key的标识，React知道此时新增了一条记录，会建立一个新的<li>元素，并把它插入到列表中的第一个位置。若是没有设置key，React并不知道是新增了一条记录，仍是原来的两条记录彻底替换成新的三条记录，或者其余更加复杂的修改场景。React须要自上而下的比较每一条记录，这样每次比较节点都不一样，因此须要修改两次节点，而后再新增一个节点，效率明显要差不少。

这里同时揭露了另外一个问题，不要使用元素在集合中的索引值做为key，由于一旦集合中元素顺序发生改变，就可能致使大量的key失效，进而引发大量的修改操做。

如何发送网络请求

当咱们须要从服务器获取数据时，咱们应该在组件的哪个生命周期方法中发送网络请求呢？React官网上提到，能够在componentDidMount中发送网络请求，这也是通常状况下的最佳实践。有些人也会把发送网络请求放在componentWillMount中，而且认为这个方法先于componentDidMount调用，因此能够更快地获取数据。我的认为，这种使用方法通常也是没有问题的，但在一些场景下会出现问题，好比须要在服务器端渲染时，componentWillMount会被调用两次，一次是在Server端，一次是在Client端。可参考这篇文章。

---

欢迎关注个人公众号：老干部的大前端，领取21本大前端精选书籍！