React 组件与服务器通信

组件挂载阶段通信

componentDidMount是执行组件与服务器通信的最佳地方，主要原因有两个：

1.在componentDidMount中执行服务器通信可以保证获取到数据时，组件已经处于挂载状态，

这是即使要直接操作DOM也是安全的，而componentWillMount无法保证这一点。

2.当组件在服务器端渲染时，componentWillMount会被调用两次，一次是在服务器端，另一次在浏览器端，而componentDidMount能保证在任何情况下只会被调用一次，从而不会发送多余的数据请求。

 

组件更新阶段通信

组件在更新阶段需要再次与服务器通信，获取服务器上的最新数据。例如，组件需要以props中某个属性作为与服务器通信的请求参数，当这个属性值发生更新时，组件自然需要与服务器通信。根据对组件生命周期的了解，componentWillReceiveProps非常适合这个工作。

需要注意的是componentWillReceiveProps并不能保证props一定发生了修改，所以需要对新老props进行对比。

 

componentWillReceiveProps(nextProps)

这个方法只在props引起的组件更新过程中，才会被调用。State引起的更新并不会触发该方法的执行。方法的参数nextProps是父组件传递给当前组件的新的props。父组件的render方法的调用并不能保证传递给子组件的props发生变化。也就是说nextProps的值可能和子组件当前props的值相等，因此往往需要比较nextProps和this.props来决定是否执行props发生变化后的逻辑，比如根据新的props调用this.setState触发组件的重新渲染。