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

前端之家收集整理的这篇文章主要介绍了简单谈谈我理解的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顺序:

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

(如有错误,麻烦留言指正,谢谢~~)

猜你在找的React相关文章