React官网学习实践 - state & 生命周期

末蓝、 2021-06-24 16:10 324阅读 0赞

参照文章：[react生命周期的基本用法][react]

#### 1、constructor ####

可以获取到父组件传下来的参数。  
只要组件存在constructor,就必要要写super,否则this指向会错误。

#### 2、componentWillMount 组件将要挂载 ####

#### 3、componentDidMount 组件渲染完成 ####

#### 4.componentWillReceiveProps (nextProps) ####

componentWillReceiveProps在接受父组件改变后的props需要重新渲染组件时用到的比较多  
它接受一个参数：nextProps  
通过对比nextProps和this.props，将nextProps setState为当前组件的state，从而重新渲染组件。

#### 5.shouldComponentUpdate(nextProps,nextState) ####

唯一用于控制组件重新渲染的生命周期，由于在react中，setState以后，state发生变化，组件会进入重新渲染的流程，（暂时这么理解，其实setState以后有些情况并不会重新渲染，比如数组引用不变）在这里return false可以阻止组件的更新

因为react父组件的重新渲染会导致其所有子组件的重新渲染，这个时候其实我们是不需要所有子组件都跟着重新渲染的，因此需要在子组件的该生命周期中做判断

#### 6.componentWillUpdate (nextProps,nextState) ####

shouldComponentUpdate返回true以后，组件进入重新渲染的流程，进入componentWillUpdate,这里同样可以拿到nextProps和nextState

#### 7.render函数 ####

render函数会插入jsx生成的dom结构，react会生成一份虚拟dom树，在每一次组件更新时，在此react会通过其diff算法比较更新前后的新旧DOM树，比较以后，找到最小的有差异的DOM节点，并重新渲染

#### 8、componentDidUpdate(prevProps,prevState) ####

组件更新完毕后，react只会在第一次初始化成功会进入componentDidmount,之后每次重新渲染后都会进入这个生命周期，这里可以拿到prevProps和prevState，即更新前的props和state。

#### 9、componentWillUnmount () ####

基本使用,从以下的一个实验中看出，基本的三个函数执行顺序就是coustructor, componentwillmount, componentDidMount。  
其余的一些钩子函数之后再做深入了解。

![2789632-9fae2ecadece7831.png][]

code：

import React, { Component } from 'react';
    import './App.css';
    
    class App extends Component {
        constructor(props) {
            super(props);
            console.log('this is in constructor method.');
            this.state = {
                date: new Date()
            };
        }
        componentWillMount () {
            console.log('this is in componentWillMount method.');
    
        }
        componentDidMount () {
            console.log('this is in componentDidMount method.');
        }
        componentWillReceiveProps (nextProps) {
            console.log('this is in componentWillReceiveProps method.');
        }
        shouldComponentUpdate (nextProps,nextState) {
            console.log('this is in shouldComponentUpdate method.');
        }
        componentWillUpdate (nextProps,nextState) {
            console.log('this is in componentWillUpdate method.');
        }
        componentDidUpdate (prevProps,prevState) {
            console.log('this is in componentDidUpdate method.');
        }
    
        render() {
        return (
            <div>
                <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
            </div>
        );
      }
        componentWillUnmount () {
            console.log('this is in componentWillUnmount method.');
        }
    }
    
    export default App;

[react]: https://www.jianshu.com/p/c9bc994933d5
[2789632-9fae2ecadece7831.png]: /images/20210615/ef8bc88cc47e42fab8919f46c31107c6.png