react16之前的生命周期

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

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

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"));

云服务器 GPU云服务器线程的生命周期 bug的生命周期 activity的生命周期 ios应用的生命周期

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

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

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

摘要：的返回值将作为的参数，如果返回，则不更新，不能返回或以外的值，否则会警告。在更新之前调用，此时已更新返回值作为的第个参数一般用于获取之前的数据语法是从的返回值，默认是的使用场景一般是获取组建更新之前的滚动条位置。 React16 后的各功能点是多个版本陆陆续续迭代增加的，本篇文章的讲解是建立在 16.6.0 版本上本篇文章主旨在介绍 React16 之后版本中新增或修改的地方，所以对于...

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

摘要：卸载阶段组件卸载和销毁老版生命周期之前的生命周期初始化阶段涉及个钩子函数这些方法会在组件初始化的时候被调用，只跟实例的创建有关。前言：React 的版本从 v15 到 v16.3 ，再到v16.4，现在最新的版本是 v16.8了。其中最大的变化可能是React Hooks的加入，而最令人困惑的却是它的生命周期，新旧生命周期函数混杂在一起，难免会让许多新来者有很多困惑。所以这一篇我们来...

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

摘要：本文主要介绍之后的生命周期。该方法有两个参数和返回值为对象不需要返回整体，把需要改变的返回即可。必须有一个返回值，返回的数据类型可以有。此生命周期主要用于优化性能。最后，说明一点这三个生命周期在未来版本中会被废弃。 React16.3.0开始，生命周期进行了一些变化。本文主要介绍React16.3.0之后的生命周期。 React16.3.0之前生命周期: 16版本之前的react组件的...

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

摘要：我们目前的计划是为不安全生命周期引入别名，和。从现在开始，只有新的生命周期名称将起作用。从版本开始，更新以响应更改的推荐方法是使用新的静态生命周期。注释：本文是根据React的官方博客翻译而成（文章地址：https://reactjs.org/blog/2018...）。主要讲述了React之后的更新方向，以及对之前生命周期所出现的问题的总结，之后的React将逐步弃用一些生命周期和...

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

摘要：组件生命周期构造方法是对类的默认方法，通过命令生成对象实例时自动调用该方法。该生命周期可以发起异步请求，并。后废弃该生命周期，可以在中完成设置渲染组件是一个组件必须定义的生命周期，用来渲染。该生命周期内可以进行。 React组件生命周期 constructor( ) 构造方法 constructor是ES6对类的默认方法，通过 new 命令生成对象实例时自动调用该方法。并且，该方法是...

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

摘要：因为版本将真正废弃这三生命周期到目前为止，的渲染机制遵循同步渲染首次渲染，更新时更新时卸载时期间每个周期函数各司其职，输入输出都是可预测，一路下来很顺畅。通过进一步观察可以发现，预废弃的三个生命周期函数都发生在虚拟的构建期间，也就是之前。 showImg(https://segmentfault.com/img/bVbweoj?w=559&h=300); 背景前段时间准备前端招聘事项...

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