React 生命周期

发布时间:2019-06-16 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了React 生命周期脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

React 生命周期

生命周期图解

初始阶段

  1. 设置默认属性 (defaultProps), 设置属性类型 (PRopTyPEs)
  2. 初始化状态 (state = {})
  3. componentWillMount() -> 生命周期函数,在组件即将渲染前触发,可以做初始化数据显示。(注意:这个方法已经被标为不安全方法,官方不推荐使用)
  4. render() -> 触发了组件渲染
  5. componentDidmount() -> 此时的组件已经生成了DOM结构,可以进行有关操作。可以使用此方法替换componentWillMount

运行时

  1. componentWillReceiveProps() -> 当 props 发生变化的时候,也就是说父组件改变的时候会调用这个方法。但是注意的是,这个方法在初始化render的时候不会执行的
  2. shouldComponentUpdate() -> 组件接收到新属性时,或者组件状态改变时候出发组件更新,在组件初始化渲染的时候不会触发,这个函数可以做为优化组件性能的选择。在react 项目中更新一个组件可能需要其父组件更新,但是一个父组件下可能还会有别的子组件,一旦父组件更新了状态,那么所有子组件都要执行 render 方法,这样就太耗费性能了。所以可以使用 shouldComponentUpdate() 方法判断是否应该更新。其实你还可以通过继承 PureComponent 类,如果继承了这个类,那么在组件更新时候就会先去和之前的属性判断,从而判断是否应该更新
  3. componentWillUpdate() -> 组件即将被触发更新
  4. componentDidUpdate() -> 组件更新完成后生成新DOM

销毁阶段

  1. componentWillUnmount() -> 这是在组件被销毁时执行的方法。

脚本宝典总结

以上是脚本宝典为你收集整理的React 生命周期全部内容,希望文章能够帮你解决React 生命周期所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。