React学习笔记(五):生命周期

生命周期图解:
在这里插入图片描述
根据图解,我认为React生命周期可以分为四个阶段:

  • Initialization:初始化阶段
  • Mounting:挂载阶段
  • Updation:更新阶段
  • Unmounting:卸载阶段

组件初始化阶段(Initialization)

也就是组件中类的构造方法( constructor() ),constructor()用来做一些组件的初始化工作,如定义this.state的初始内容。constructor()中的super()方法是必须的,super(props)用来调用基类的构造方法( constructor() ), 也将父组件的props注入给子组件,供子组件读取(组件中props只读不可变,state可变)。

挂载阶段(Mounting)

此阶段分为三个时期

  • componentWillMount
    在组件挂载到DOM前调用,只会被调用一次。
  • render
    render()方法是类组件中唯一需要的方法,当组件的props和state重新传递和赋值时,无论值是否有变化都会使组件重新render ,return 一个React元素(描述组件,即UI)。
  • componentDidMount
    组件挂载到DOM后调用,且只会被调用一次。
    componentDidMount()挂载组件(插入树中)后立即调用。需要DOM节点的初始化应在此处进行。如果需要从远程端点加载数据,这是实例化网络请求的好地方。

更新阶段(Updation)

  • componentWillReceiveProps
    在组件接收到一个新的 prop (更新后)时被调用。此方法只调用于props引起的组件更新过程中。(在该函数(componentWillReceiveProps)中调用 this.setState() 将不会引起第二次渲染.)
  • shouldComponentUpdate
    在组件接收到新的props或者state时被调用。通过比较nextProps,nextState及当前组件的this.props,this.state,返回true时当前组件将继续执行更新过程,返回false则当前组件更新停止,以此可用来减少组件的不必要渲染,优化组件性能。
  • componentWillUpdate
    组件接收到新的props或者state但还没有render时被调用,在这边可执行一些组件更新发生前的工作,一般较少用。
  • componentDidUpdate
    在组件完成更新后立即调用。

卸载阶段(Unmounting)

  • componentWillUnmount

在组件从 DOM 中移除之前立刻被调用。

关于生命周期有什么不懂的可以看一下这里,个人感觉讲的还不错

发布了30 篇原创文章 · 获赞 1 · 访问量 2573

猜你喜欢

转载自blog.csdn.net/qq_42527726/article/details/102696589