问题
了解React组件的生命周期
知识点
React流程状态图
- 使用
ajax
获取后台数据渲染时,一般将调用ajax
方法放在componentDidMount
中,这样可以先渲染虚拟dom
再展示数据,当再次调用ajax
数据改变时,dom
内数据会再次渲染,而不用再次加载整个dom
。如果在该dom要根据条件只通过ajax
获取一次数据,则可以将调用ajax
的方法放在componentWillMount
。 - 当工程中未加载
jQuery
,异步请求也可以使用fetch
等 - 在
componentWillUpdate
中,尽量避免使用setState()
或setProps()
方法。若无条件判断情况下使用setState()
或setProps()
,会导致死循环。 - 通过
shouldComponentUpdate
可以对是否进行渲染的条件判断,能够作为性能调优的手段,避免无意义渲染。 -
componentWillReceiveProps
可以通过nextProps
获取新传入的参数值,例如:nextProps.operationType
获取operationType - 建议使用
setState()
的周期为:componentWillMount
、componentDidMount
、componentWillReceiveProps
、componentDidUpdate
- 注意对应周期中
this.state
的值
参考文章
React组件生命周期过程说明
React组件生命周期
React数据获取为什么一定要在componentDidMount里面调用?