React生命周期函数

Posted 2021-03-10 songbingqi

1，constructor():构造函数

　　执行时间：组件被加载前最先调用，并且调用一次

　　作用：定义状态机变量

　　注意：第一个语句必须是super()

2，componentWillMount()

　　执行时间：组件初始化渲染（render()被调用前） 并且仅调用一次

　　作用：如果在这个函数中调用setState改变某些状态机，react会等待setState完成后再渲染组件

　　注意：子组件也有componentWillMount函数，在父组件的该函数调用后再被调用

3，render()

　　执行时间：componentWillMount之后，componentDidMount之前，

　　作用：渲染挂在组件

　　触发条件：（1）初始化加载页面（2）状态机改变setstate（3）接收到新的props(父组件更新)

　　注意：组件所必不可少的核心函数，不能在该函数中修改状态机state

4，componentDidMount()

　　执行时间：render之后被调用，并且仅调用一次

　　作用：渲染挂载点，可以使用refs

　　注意：子组件也有该函数，在父组件的该函数调用前被调用

5，componentWillReceiveProps

　　执行时间：组件渲染后，当组件接收到新的props时被调用

　　作用：挂载渲染组件

　　注意：react初次渲染时，该函数并不会被触发，因此有时该函数需要和componentWillMount或componentDidMount组合使用;使用该函数一定要加nextProps参数，首次使用了解的可以先打印结果（console.log(nextProps)）

6，shouldComponentUpdata(nextprops,nextState)

　　执行时间：组件挂在完成后（就是render执行完毕）

　　作用：如果有些变化不需要render组件，可从该函数中拦截

　　注意：该方法在初始化渲染的时候不会调用，在使用forceUpdata方法时也不会

7，componentWillUpdata()

　　执行时间：在接受的新的props或者state,重新渲染之前立刻调用，在初始化 渲染的时候该方法不会被带调用

　　作用：为即将发生的重新渲染做一些准备

　　注意：不能再该函数中通过this.setstate再次改变状态机，如果需要，则在componentWillReceiveProps函数中改变

8，componentDidUpdata()

　　执行时间：重新渲染后调用，在初始化渲染的时候方法不会被调用

　　作用：使用该方法可以在租价更新后操作DOM元素

9，componentWillunmount()

　　执行时间：组件被卸载前调用，

　　作用：在该方法中执行任何必要的清理，比如无效的定时器，或者清除在 componentDidMount 中创建的 DOM 元素。

 

摘自：https://blog.csdn.net/zrcj0706/article/details/78608740