简单谈谈我理解的React组件生命周期

原文首发在我的个人博客：欢迎点此访问我的个人博客

学了一段时间的react了，现在对自己学习的react的生命周期做一个简单总结（如有错误请留言指正，谢谢）

react一共有如下几个生命周期函数

1. constructor( props,context){}
2. componentWillMount (){}
3. componentDidMount (){}
4. componentWillReceiveProps( nextProps ){}
5. shouldComponentUpdate( nextProps,nextState){}
6. componentWillUpdate (nextProps,nextState){}
7. render()
8. componentDidUpdate(prevProps,prevState){}
9. componentWillUnmount (){}

下面我们分别看看这几个函数的用法

1. constructor( props,context){}

constructor可接收两个参数，获取到父组件传下来的的props,context

只要组件存在constructor,就必要要写super,否则this指向会错误

constructor(props,context) {
  super(props,context)
}

2.componentWillMount (){}组件将要挂载

此时组件还未渲染完成，dom还未渲染

3.componentDidMount (){}

组件渲染完成，此时dom节点已经生成，可以在这里调用ajax请求

4.componentWillReceiveProps (nextProps){}

在接受父组件改变后的props需要重新渲染组件时需要用到这个函数

5.shouldComponentUpdate(nextProps,nextState)｛｝

setState以后，state发生变化，组件会进入重新渲染的流程，return false可以阻止组件的更新

6.componentWillUpdate (nextProps,nextState)｛｝

当组件进入重新渲染的流程才会进入componentWillUpdate函数

7.render函数

render是一个React组件所必不可少的核心函数，render函数会插入jsx生成的dom结构，react会生成一份虚拟dom树，在每一次组件更新时，在此react会通过其diff算法比较更新前后的新旧DOM树，比较以后，找到最小的有差异的DOM节点，并重新渲染

用法：

render () {
  return (
    <div>something</div> 
  )
｝

8.componentDidUpdate(prevProps,prevState){}

组件更新完毕后，react只会在第一次初始化成功会进入componentDidmount,之后每次重新渲染后都会进入这个生命周期，这里可以拿到prevProps和prevState，即更新前的props和state。

9.componentWillUnmount ()

用处：

1.clear你在组建中所有的setTimeout,setInterval
2.移除所有组建中的监听 removeEventListener

react生命周期父子组件渲染顺序

父组件代码：

import React,{Component} from "react"
import ChildComponent from './component/ChildComponent'//引入子组件

class App extends Component{
    constructor(props,context) {
        super(props,context)
        console.log("parent-constructor")
    }
    componentWillMount () {
        console.log("parent-componentWillMount")
    }
    componentDidMount () {
        console.log("parent-componentDidMount")
    }
    componentWillReceiveProps (nextProps) {
        console.log("parent-componentWillReceiveProps")
    }
    shouldComponentUpdate (nextProps,nextState) {
        console.log("parent-shouldComponentUpdate")
    }
    componentWillUpdate (nextProps,nextState) {
        console.log("parent-componentWillUpdate")
    }
    componentDidUpdate (prevProps,prevState) {
        console.log("parent-componentDidUpdate")
    }
    render() {
        return ""
    }
    componentWillUnmount () {
        console.log("parent-componentWillUnmount")
    }
}
export default App

子组件代码：

import React,{Component} from "react"

class ChildComponent extends Component{
    constructor(props,context)
        console.log("child-constructor")
    }
    componentWillMount () {
        console.log("child-componentWillMount")
    }
    componentDidMount () {
        console.log("child-componentDidMount")
    }
    componentWillReceiveProps (nextProps) {
        console.log("child-componentWillReceiveProps")
    }
    shouldComponentUpdate (nextProps,nextState) {
        console.log("child-shouldComponentUpdate")
    }
    componentWillUpdate (nextProps,nextState) {
        console.log("child-componentWillUpdate")
    }
    componentDidUpdate (prevProps,prevState) {
        console.log("child-componentDidUpdate")
    }
    render(){
        return ""
    }
    componentWillUnmount () {
        console.log("child-componentWillUnmount")
    }
}
export default ChildComponent

浏览器中的执行结果如下图：

结论：

所以在react的组件挂载及render过程中，最底层的子组件是最先完成挂载及更新的。

constructor()构造函数、componentWillMount执行顺序：

顶层父组件--子组件--子组件--...--底层子组件

render、componentDidMount顺序：

底层子组件--子组件--子组件--...--顶层父组件

（如有错误，麻烦留言指正，谢谢~~）

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!