了解React组件生命周期

前端之家收集整理的这篇文章主要介绍了了解React组件生命周期前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

问题

了解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()的周期为:componentWillMountcomponentDidMountcomponentWillReceivePropscomponentDidUpdate
  • 注意对应周期中this.state的值

参考文章

React组件生命周期过程说明
React组件生命周期
React数据获取为什么一定要在componentDidMount里面调用?

猜你在找的React相关文章