问题
了解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里面调用?
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。