React生命周期

Dongjie_Liu 发布于2019-08-20 18:09 / 1342人阅读

摘要：前言组件的生命周期可以分为挂载，渲染和卸载这几个阶段。因此，可以把生命周期分成两类当组件在挂载或卸载时。因此，当方法返回的时候，组件不再向下执行生命周期方法。父节点改变当父节点改变，传入子组件的发生改变，组件会依次调用子组件会重新渲染。

前言

React组件的生命周期可以分为挂载，渲染和卸载这几个阶段。
当渲染后的组件需要更新时，我们会重新去渲染组件，直至卸载。
因此，可以把React生命周期分成两类：
1.当组件在挂载或卸载时。
2.当组件接收新的数据时，即组件更新时。

一.挂载或卸载过程

1.组件初始化

static defaultProps保证this.props有初始值
this.state初始值
componentWillMount会在render之前调用，componentDidMount会在render之后调用，分别代表了渲染前后的时刻，
都只执行一次。
render之后，我们在componentDidMount中执行setState,组件会再次render,不过在初始化过程就渲染了两次组件
，这并不是一件好事，但实际情况是，有些场景不得不需要setState,比如计算组件的位置或宽高等，就不得不让组件
先渲染，更新必要的信息后，再次渲染。

2.组件的卸载：
componentWillMount,我们常常会执行一些清理方法，如事件回收或是清除定时器。

    componentWillMount() {
        this.setState({
            a: this.state.a + 1    // 先执行willMount，a + 1，再执行render,componentDidMount
        });
        console.log("will" + this.state.a);
    }
    componentDidMount() {
        console.log("did" + this.state.a);
    }
    render() {
        console.log("render" + this.state.a);
        return (
            
                
                { this.state.a }
                { this.props.maxLoops }
                
            
        );
    }

二.数据更新过程

1.数据更新过程：
更新过程指的是父组件向下传递props或组件自身执行setState方法时发生的一系列更新动作。
如果组件自身state更新了，那么会依次执行shouldComponentUpdate,componentWillUpdate,render和componentDidUpdate。
shouldComponentUpdate是一个特别的方法，它接受需要更新的props和state,让开发者增加必要的条件判断，
让其在需要时更新，不需要时不更新。因此，当方法返回false的时候，组件不再向下执行生命周期方法。
2.父节点props改变
当父节点this.state改变，传入子组件的this.props发生改变，组件会依次调用componentWillReceiveProps,
shouldComponentUpdate,componentWillUpdate,render,componentDidUpdate.
子组件会重新渲染。
3.如果组件是由父组件更新props而更新的，那么在shouldComponentUpdate之前会执行componentWillReceiveProps方法，此方法可以作为React在props传入后，渲染之前setState机会，在此方法中setState是不会二次渲染的。

componentWillReceiveProps(nextProps) {
        console.log("willreceive");
        console.log(nextProps);
        if (nextProps.id === 4) {
            this.setState({
                bb: 1000
            })
        }
    }
    shouldComponentUpdate(nextProps, nextState) {
        console.log("should update");
        if (nextState.bb === 16) {
            return false;
        }
        return true;
    }
    componentWillUpdate(nextProps, nextState) {
        console.log("will update");
    }
    componentDidUpdate(prevProps, prevState) {
        console.log("did update");
    }

云服务器 GPU云服务器生命周期软件生命周期生命周期理论页面生命周期

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

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

React专题：生命周期

摘要：而生命周期钩子，就是从生到死过程中的关键节点。异步渲染下的生命周期花了两年时间祭出渲染机制。目前为这几个生命周期钩子提供了别名，分别是将只提供别名，彻底废弃这三个大活宝。生命周期钩子的最佳实践是在这里初始化。本文是『horseshoe·React专题』系列文章之一，后续会有更多专题推出来我的 GitHub repo 阅读完整的专题文章来我的个人博客获得无与伦比的阅读体验生命周期...

Hanks10100 2019-08-23 11:25 评论0 收藏0
捋一捋React的生命周期

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

MobService 2019-08-23 15:20 评论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.js 小书 Lesson20 - 更新阶段的组件生命周期

摘要：所以对于组件更新阶段的组件生命周期，我们简单提及并且提供一些资料给大家。这里为了知识的完整，补充关于更新阶段的组件生命周期你可以通过这个方法控制组件是否重新渲染。大家对这更新阶段的生命周期比较感兴趣的话可以查看官网文档。 React.js 小书 Lesson20 - 更新阶段的组件生命周期本文作者：胡子大哈本文原文：http://huziketang.com/books/react...

Yumenokanata 2019-08-21 17:34 评论0 收藏0
React组件生命周期

摘要：组件生命周期此文章适合之前的版本，，添加了一些新的生命周期函数，同时准备废弃一些会造成困扰的生命周期函数。每个生命周期阶段调用的钩子函数会略有不同。 React组件生命周期此文章适合 React@17 之前的版本，React@16.3.0，添加了一些新的生命周期函数，同时准备废弃一些会造成困扰的生命周期函数。所有如果在React@17 发布之前，这篇文章还是适用的。新的生命周期请看官...

mgckid 2019-08-20 10:42 评论0 收藏0