纵有疾风起
人生不言弃

React的生命周期

图示
中文教程
类组件有生命周期,函数式组件没有声明周期(所以函数式组件的性能更高)

完整图示

React的生命周期插图
image.png

常用图示

React的生命周期插图(1)
image.png

React组件的生命周期可以分为3种状态。

  • 挂载时

  • 更新时

  • 卸载时

挂载时

当组件实例被创建并插入 DOM 中时,其生命周期调用顺序如下

  • constructor()
  • static getDerivedStateFromProps() 了解即可
  • render()
  • componentDidMount()
constructor
  1. 通过给 this.state 赋值对象来初始化内部 state。(不要使用this.setState()来初始化数据)
this.state={key:val};
  1. 为事件处理函数绑定实例
this.handleClick=this.handleClick.bind(this);
render

render函数负责将模板渲染到页面,一般来说说,当propsstate发生改变时,都会重新出发render,需要注意的是,不要在render函数中 修改propsstate,否则会导致死循环!!

componentDidMount

componentDidMount 会在组件挂载后(插入 DOM 树中)立即调用。依赖于 DOM 节点的初始化应该放在这里。一般用来在这里发送异步请求。

更新时

当组件的 props 或 state 发生变化时会触发更新,会按顺序调用以下的生命周期事件。

  • static getDerivedStateFromProps() 了解即可
  • shouldComponentUpdate()
  • render()
  • getSnapshotBeforeUpdate() 了解即可
  • componentDidUpdate()
shouldComponentUpdate

当props和state发生改变时触发,返回true 则表示允许执行 render ,返回 false这表示 不允许运行render
接收两个参数,nextState和nextProps,表示修改后的 state和props值。一般用在提高性能使用。如:
当state中的某个值为偶数才触发render,为奇数则不触发。

renders

同上述说明

componentDidUpdate

componentDidUpdate() 会在更新后会被立即调用。首次渲染不会执行此方法
当组件更新后,可以在此处对 DOM 进行操作。 如 判断是否触底了,再进行其他操作。
会接收3个参数

  • prevProps 修改前的props对象
  • prevState 修改前的state对象
  • snapshot 了解

卸载时

componentWillUnmount

在组件卸载及销毁之前直接调用,在此方法中执行必要的清理操作,例如,清除 timer,取消网络请求等。
也不要在该事件中 执行 setState操作,无效。

不用常用的生命周期事件
React路由
闭包,原型链,继承,AJAX请求步骤等javaScript基础

文章转载于:https://www.jianshu.com/p/5e04686fb0b8

原著是一个有趣的人,若有侵权,请通知删除

未经允许不得转载:起风网 » React的生命周期

分享到: 生成海报

评论 抢沙发

评论前必须登录!

立即登录   注册

切换注册

登录

忘记密码 ?

切换登录

注册

我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活