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

lowett 发布于2019-08-26 11:36 / 3284人阅读

摘要：用处你在组建中所有的移除所有组建中的监听生命周期父子组件渲染顺序父组件代码引入子组件子组件代码浏览器中的执行结果如下图结论所以在的组件挂载及过程中，最底层的子组件是最先完成挂载及更新的。

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

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

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

constructor( props, context){}

componentWillMount (){}

componentDidMount (){}

componentWillReceiveProps( nextProps ){}

shouldComponentUpdate( nextProps, nextState){}

componentWillUpdate (nextProps,nextState){}

render()

componentDidUpdate(prevProps,prevState){}

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 (
    something 
  )
｝

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) {
        super(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顺序：

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

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

海外云主机私有云谈谈对php的理解线程的生命周期 bug的生命周期 activity的生命周期

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107229.html

从Mixin到hooks，谈谈对React16.7.0-alpha中即将引入的hooks的理解

摘要：已经被废除，具体缺陷可以参考二为了解决的缺陷，第二种解决方案是高阶组件简称。我们定义了父组件，存在自身的，并且将自身的通过的方式传递给了子组件。返回一个标识该的变量，以及更新该的方法。为了实现分离业务逻辑代码，实现组件内部相关业务逻辑的复用，在React的迭代中针对类组件中的代码复用依次发布了Mixin、HOC、Render props等几个方案。此外，针对函数组件，在Reac...

ZweiZhao 2019-08-02 11:52 评论0 收藏0
从Mixin到hooks，谈谈对React16.7.0-alpha中即将引入的hooks的理解

摘要：已经被废除，具体缺陷可以参考二为了解决的缺陷，第二种解决方案是高阶组件简称。我们定义了父组件，存在自身的，并且将自身的通过的方式传递给了子组件。返回一个标识该的变量，以及更新该的方法。为了实现分离业务逻辑代码，实现组件内部相关业务逻辑的复用，在React的迭代中针对类组件中的代码复用依次发布了Mixin、HOC、Render props等几个方案。此外，针对函数组件，在Reac...

funnyZhang 2019-08-29 17:09 评论0 收藏0
从Mixin到hooks，谈谈对React16.7.0-alpha中即将引入的hooks的理解

摘要：已经被废除，具体缺陷可以参考二为了解决的缺陷，第二种解决方案是高阶组件简称。我们定义了父组件，存在自身的，并且将自身的通过的方式传递给了子组件。返回一个标识该的变量，以及更新该的方法。为了实现分离业务逻辑代码，实现组件内部相关业务逻辑的复用，在React的迭代中针对类组件中的代码复用依次发布了Mixin、HOC、Render props等几个方案。此外，针对函数组件，在Reac...

wizChen 2019-08-23 12:39 评论0 收藏0
前端面试整理

摘要：新布局基本数据类型，几种种也是返回类型非负区别创建对象的方式闭包的理解原型链原理手写判断是一个数组深拷贝原生操作创建元素删除元素你觉得有哪些好处还用过什么工具库事件委托事件理解规范怎么写插件怎么给数组原型添加方法怎么合并两个对象常 h5 html5 新api storage geolocation history webworker indexDB websocket can...

yvonne 2019-08-23 14:31 评论0 收藏0