react生命周期

- 日理万妓 2022-03-07 10:10 449阅读 0赞

react生命周期，一直只关心自己常用的那几个，虽然基本能解决99%的问题，但是当被问到的时候，说的不清不楚还是让我很惭愧，所以今天我就专门来梳理一下react的生命周期

1、componentWillMount()

*  执行场景：render()执行之前
 *  详细： setState()不会触发re-render重复渲染，只执行一次

2、render()

*  执行场景： componentWillMount() 之后/ componentWillReceive(nextProps, nextState)之后
 *  详情： 只能通过this.props,this.state访问数据不能修改、 可以反回null，false 或则任何React组件、  
    不能改变组件状态、 不能修改Dom的输出
 *  注意：render  
    方法反回的不是真实的Dom元素，而是一个虚拟的表现，类似于一个Dom-Tree的结构对象，react之所以效率高就是这个原因

3、componentDidMount()

*  执行场景：render()以后立即执行
 *  详情：可以对Dom进行操作 通常在这里加载服务器数据 可以setState触发重新渲染 只执行一次

4、componentWillReceiveProps(nextProps)

*  执行场景：在已经挂载的组件接收到新的props时触发，可以理解为除了第一次生命周期（componentWillMount ->  
    render -> componentDidMount）之后的生命周期触发
 *  详情： 只有当从外部传入的props发生变化时才会触发，setState是不会触发的
 *  注意：  
    由于组件可能会在props传入即使没有发生改变也会触发重新渲染，所以如果你想自己处理改变最好对当前props值和下一次值进行比较，避免触发不必要的渲染

5、shouldComponentUpdate(nextProps,nextState)

*  执行场景：在接收新的props或者state时触发
 *  详情：这个函数的作用是为了让我们自己能够控制组件是否重新渲染从而优化组件，默认返回true表示需要重新渲染
 *  注意：首次渲染时不会触发， 函数如果返回false是不会触发重新渲染的（componentWillUpdata -> render -> componentDidUpdate）是不会被触发的

6、componentWillUpdate(nextProps, nextState)

*  执行场景： props或state发生改变时，shouldComponentUpdata 返回true时触发
 *  注意：不可以在这里调用setState 如果需要响应props可以到componentWillReceiveProps()中做响应

7、componentDidUpdate(prevProps, prevState)

*  执行场景： 在componentWillUpdate -> render 以后
 *  注意： 该方法可以操作Dom，但是组件初始时不会调用

8、componentWillUnmount()

*  执行场景：在组件卸载或销毁之前调用
 *  详情： 这个方法主要用于一些清理工作，比如无效的timers, interval, 或则取消网络请求  
    清理任何componentWillMount()中创建的Dom元素。