了解React组件生命周期

问题

了解React组件的生命周期

知识点

React流程状态图

注意：流程状态图为使用React.createClass方法的生命周期

• 使用ajax获取后台数据渲染时，通常将调用ajax方法放在componentDidMount中，这样能够先渲染虚拟dom再展现数据，当再次调用ajax数据改变时，dom内数据会再次渲染，而不用再次加载整个dom。若是在该dom要根据条件只经过ajax获取一次数据，则能够将调用ajax的方法放在componentWillMount。
• 当工程中未加载jQuery，异步请求也可使用fetch等
• 在componentWillUpdate中，尽可能避免使用setState()或setProps()方法。若无条件判断状况下使用setState()或setProps()，会致使死循环，一样componentDidUpdate中使用setState()若无条件限制也会致使死循环。
• 经过shouldComponentUpdate能够对是否进行渲染的条件判断，可以做为性能调优的手段，避免无心义渲染。
• componentWillReceiveProps能够经过nextProps获取新传入的参数值，例如：nextProps.operationType获取operationType
• 建议使用setState()的周期为：componentWillMount、componentDidMount、componentWillReceiveProps、componentDidUpdate
• 注意对应周期中this.state的值

经过构建列表树后总结补充：

• setState不会当即生效，要通过render过程才能真正改变state值
• 在return时调用方法setState，会引发shouldComponentUpdate周期，而此时componentDidMount周期已完成。

参考文章

React组件生命周期过程说明
React组件生命周期
React数据获取为何必定要在componentDidMount里面调用？