react16之前的生命周期

xiangchaobin 发布于2019-08-29 18:41 / 1133人阅读

摘要：之前后的生命周期初始化阶段设置默认属性，设置属性校验属性检查器，检查父组件传递给当前组件的类型设置组件的初始化状态父组件挂载之前父组件挂载子组件挂载中父组件挂载完成组件被更新完成后触发。

lefecycle-React

react16之前后的生命周期

A.初始化阶段：
1.设置默认属性：

static defaultProps = {
    name: "sls",
    age:23，
     number: 0
};
//or      Counter.defaltProps={name:"sls"}

2)设置属性校验

`import PropTypes from "prop-types";`
属性检查器，检查父组件传递给当前组件的类型
  static propTypes = {
    number: PropTypes.number.isRequired
  }

2.设置组件的初始化状态

constructor() {
    super();
    this.state = {number: 0}
}

3、父组件挂载之前 componentWillMount
4 、render(父组件挂载)
5、子组件挂载中render
6、父组件挂载完成 componentDidMount
组件被更新完成后触发。页面中产生了新的DOM的元素，可以进行DOM操作

7、父组件是否需要更新 shouldComponentUpdate

//上一个属性对象 上一个状态对象
shouldComponentUpdate(prevProps,prevState){
    if(prevState.number<5){//如果新状态的number属性小于5的话
      return true;
    }else{
      return false;
    }
  }

8、父组件将要更新 componentWillUpdate
4、render(父组件挂载)
9、子组件将要接收到新属性SubCounter componentWillReceiveProps
10、子组件是否需要更新 shouldComponentUpdate

shouldComponentUpdate(props,state){
    if(props.number<3){
      return true;
    }else{
      return false;
    }
  }

11、子组件将要更新 componentWillUpdate
12、子组件挂载中render
13、子组件更新完成 componentDidUpdate
8、父组件更新完成 componentDidUpdate

子组件最后一次更新：
6、父组件是否需要更新 shouldComponentUpdate
7、父组件将要更新 componentWillUpdate
4、render(父组件挂载)
9、子组件将要接收到新属性SubCounter componentWillReceiveProps
10、子组件是否需要更新 shouldComponentUpdate
8、父组件更新完成 componentDidUpdate

一般我们通过shouldComponentUpdate()函数来优化性能：
一个React项目需要更新一个小组件时，很可能需要父组件更新自己的状态。而一个父组件的重新更新会造成它旗下所有的子组件重新执行render()方法，形成新的虚拟DOM，再用diff算法对新旧虚拟DOM进行结构和属性的比较，决定组件是否需要重新渲染
无疑这样的操作会造成很多的性能浪费，所以我们开发者可以根据项目的业务逻辑，在shouldComponentUpdate()中加入条件判断，从而优化性能
例如React中的就提供了一个PureComponent的类，当我们的组件继承于它时，组件更新时就会默认先比较新旧属性和状态，从而决定组件是否更新。值得注意的是，PureComponent进行的是浅比较，所以组件状态或属性改变时，都需要返回一个新的对象或数组

import React from "react"
import ReactDOM from "react-dom";

class SubCounter extends React.Component {
    componentWillReceiveProps() {
        console.log("9、子组件将要接收到新属性SubCounter componentWillReceiveProps");
    }

    shouldComponentUpdate(newProps, newState) {
        console.log("10、子组件是否需要更新 shouldComponentUpdate");
        if (newProps.number < 5) return true;
        return false
    }

    componentWillUpdate() {
        console.log("11、子组件将要更新 componentWillUpdate");
    }

    componentDidUpdate() {
        console.log("13、子组件更新完成 componentDidUpdate");
    }

    componentWillUnmount() {
        console.log("14、子组件将卸载 componentWillUnmount");
    }

    render() {
        console.log("12、子组件挂载中render");
        return (
            {this.props.number}
        )
    }
}

class Counter extends React.Component {
    static defaultProps = {
        //1、加载默认属性
        name: "sls",
        age:23
    };

    constructor() {
        super();
        //2、加载默认状态
        this.state = {number: 0}
    }

    componentWillMount() {
        console.log("3、父组件挂载之前 componentWillMount");
    }

    componentDidMount() {
        console.log("5、父组件挂载完成 componentDidMount");
    }

    shouldComponentUpdate(newProps, newState) {
        console.log("6、父组件是否需要更新 shouldComponentUpdate");
        if (newState.number<15) return true;
        return false
    }

    componentWillUpdate() {
        console.log("7、父组件将要更新 componentWillUpdate");
    }

    componentDidUpdate() {
        console.log("8、父组件更新完成 componentDidUpdate");
    }

    handleClick = () => {
        this.setState({
            number: this.state.number + 1
        })
    };

    render() {
        console.log("4、render(父组件挂载)");
        return (
            
                {this.state.number}
                
                {this.state.number<10?:null}
            
        )
    }
}
ReactDOM.render(, document.getElementById("root"));

云服务器 idc机房托管线程的生命周期 bug的生命周期 activity的生命周期 ios应用的生命周期

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

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

React16时代，该用什么姿势写 React ?

...绍 React16 之后版本中新增或修改的地方，所以对于 React16 之前版本的功能，本篇文章当作您已充分了解了，不再赘述更新概览从 React v16.0 ~ React v16.6 的更新概览（只涉及部分常用api）： React v16.0 render支持返回数组和字符串支...

Reducto 2019-08-23 15:33 评论0 收藏0
捋一捋React的生命周期

...ting （卸载阶段：组件卸载和销毁）老版生命周期（16.3之前的生命周期） Initialization （初始化阶段：涉及4个钩子函数）这些方法会在组件初始化的时候被调用，只跟实例的创建有关。如果用createReactClass进行创建，则还有get...

MobService 2019-08-23 15:20 评论0 收藏0
不了解一下React16.3之后的新生命周期？

...变化。本文主要介绍React16.3.0之后的生命周期。 React16.3.0之前生命周期: 16版本之前的react组件的生命周期相信大家已经很熟悉。16版本的react对组件的生命周期函数进行了一些修改,下面进行详细说明。 React16.3.0之前生命周期创建...

468122151 2019-08-23 15:41 评论0 收藏0
ReactV16.3，即将更改的生命周期

...org/blog/2018...）。主要讲述了React之后的更新方向，以及对之前生命周期所出现的问题的总结，之后的React将逐步弃用一些生命周期和增加一些更实用更符合实际情况的生命周期。其中也为从传统的生命周期迁移到新版本的React提...

wendux 2019-08-22 16:28 评论0 收藏0
React组件生命周期详解

...} 具体文章可见Class-的静态方法 componentWillMount() 组件挂载之前在组件挂载之前调用且全局只调用一次。如果在这个钩子里可以setState，render后可以看到更新后的state，不会触发重复渲染。该生命周期可以发起异步请求，并setState...

learn_shifeng 2019-08-22 17:31 评论0 收藏0
浅谈React Fiber

...eact Diff三大策略： 1.tree diff; 2.component diff;3.element diff;PS: 之前H5开发遇到的State 中变量更新但视图未更新的Bug就是element diff检测导致。解决方案：1.两种业务场景下的DOM节点尽量避免雷同； 2.两种业务场景下的DOM节点样式避免雷...

izhuhaodev 2019-08-26 10:43 评论0 收藏0