react的生命周期

react的生命周期是什么？

生命周期是一个组件从生到死的一个过程，react为生命周期提供了一些关键节点，即会被触发的事件，来让组件方便处理更种场景

react的生命周期分为哪几个阶段？每个阶段的作用？

分为3个阶段，分别是：

1.  Mounting（挂载阶段）——创建构造函数并初始化，让我们在页面加载完成前后做一些事情

2. Updating（运行阶段）——状态更新引起的变化，更新页面UI显示或数据更改

3. Unmounting（卸载阶段）——销毁一个组件，销毁前暴露出一个事件，让我们可以在组件销毁前做一些逻辑的处理，

比如组件销毁后，也要将组件的定时器销毁，减少内存占用

react各阶段事件节点有哪些？

挂载阶段

1. componentWillMount()-组件将要加载，但还没有加载出来，js逻辑已经可以执行, 异步方法可以放在这里执行

2. componentDidMount()-组件加载完成

运行阶段

1. componentWillUpdate()-组件将要更新

2. componentDidUpdate()-组件更新完成

卸载阶段

1. componentWillUnmount()-组件将要被销毁

还有2个比较特殊的

1. componentWillReceiveProps()-接收父组件传递过来的参数props时触发

2. shouldComponentUpdate()-判断组件是否需要更新, 它需要一个返回值，默认为true，若为false则组件不更新

react整个生命周期加载的过程

创建构造函数constructor并初始化，然后执行componentWillMount()将要加载，接着render()出来, 最后componentDidMount()加载完成

react更新的过程

首先执行shouldComponentUpdate(), 看返回值是不是true，如果是true则继续执行componentWillUpdate()将要更新，然后

render()，最后更新完毕componentDidUpdate()；若返回值为false，则组件不会更新。 如果是组件传值引起的数据改变，

需要在shouldComponentUpdate()执行前先执行componentWillReceiveProps()来接收父组件传递过来的值

演示shouldComponentUpdate() 可查看控制台打印结果

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

class App extends React.Component {
    // constructor用来初始化组件属性，this.state定义数据，super()为了接收到父类的this指针
    // 创建构造函数
    constructor(props) {
        super(props);
        this.state = {
            data: 'Old State'
        }
        console.log('初始化数据', constructor);
    }
    // 组件将要加载,整个组件还没有加载出来，js逻辑已经可以执行, 异步方法可以放在这里执行
    componentWillMount() {
        console.log('componentWillMount');
    }
    // 组件加载完成
    componentDidMount() {
        console.log('componentDidMount');
    }
    // 接收父组件传递过来的参数props时触发
    componentWillReceiveProps() {
        console.log('componentWillReceiveProps');
    }
    // 判断组件是否需要更新,它需要一个返回值，默认为true
    shouldComponentUpdate() {
        console.log('shouldComponentUpdate');
        return true; // 需要一个布尔返回值, 比如true或false来判断组件是否要根据值的变化而更新,
    }
    // 组件将要更新, 如果shouldComponentUpdate的返回值为true，那这个函数就要为组件更新做准备了
    // 如果shouldComponentUpdate返回值为false，则组件不会更新，componentWillUpdate,componentDidUpdate都不会执行
    componentWillUpdate() {
        console.log('componentWillUpdate');
    }
    // 组件更新完成
    componentDidUpdate() {
        console.log('componentDidUpdate');
    }
    // 处理点击事件
    handleClick() {
        console.log('更新数据');
        this.setState({
            data: 'New State'
        })
    }
    // 把组件渲染到页面上
    render() {
        console.log('render');
        return (
            <div>
                <h1>Props:{this.state.data}</h1>
                <button onClick={() => this.handleClick()}>更新数据</button>
            </div>
        )
    }
}

ReactDOM.render(
    <div>
        <App />
    </div>,
    document.getElementById('app')
);

演示componentWillReceiveProps() 可查看控制台打印结果

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

class Father extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: 'Old Props'
        }
        console.log('初始化数据', constructor);
    }
    onPropsChange() {
        console.log('更新Props:');
        this.setState({
            data: 'New Props'
        })
    }
    render() {
        return (
            <div>
                <Son data={this.state.data} />
                <button onClick={() => this.onPropsChange()}>改变props</button>
            </div>
        )
    }
}

class Son extends React.Component {
    // constructor用来初始化组件属性，this.state定义数据，super()为了接收到父类的this指针
    // 创建构造函数
    constructor(props) {
        super(props);
        console.log('初始化数据', constructor);
    }
    // 组件将要加载,整个组件还没有加载出来，js逻辑已经可以执行, 异步方法可以放在这里执行
    componentWillMount() {
        console.log('componentWillMount');
    }
    // 组件加载完成
    componentDidMount() {
        console.log('componentDidMount');
    }
    // 接收父组件传递过来的参数props时触发
    componentWillReceiveProps() {
        console.log('componentWillReceiveProps');
    }
    // 判断组件是否需要更新,它需要一个返回值，默认为true
    shouldComponentUpdate() {
        console.log('shouldComponentUpdate');
        return true; // 需要一个布尔返回值, 比如true或false来判断组件是否要根据值的变化而更新,
    }
    // 组件将要更新, 如果shouldComponentUpdate的返回值为true，那这个函数就要为组件更新做准备了
    // 如果shouldComponentUpdate返回值为false，则组件不会更新，componentWillUpdate,componentDidUpdate都不会执行
    componentWillUpdate() {
        console.log('componentWillUpdate');
    }
    // 组件更新完成
    componentDidUpdate() {
        console.log('componentDidUpdate');
    }
    // 把组件渲染到页面上
    render() {
        console.log('render');
        return (
            <div>
                <h1>Props:{this.props.data}</h1>
            </div>
        )
    }
}

ReactDOM.render(
    <div>
        <Father />
    </div>,
    document.getElementById('app')
);

演示componentWillUnmount()可控制台查看打印结果

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

class Father extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: 'Old Props',
            hasChild: true
        }
        console.log('初始化数据', constructor);
    }
    onPropsChange() {
        console.log('更新Props:');
        this.setState({
            data: 'New Props'
        })
    }
    onDestoryChild() {
        console.log('干掉子组件');
        this.setState({
            hasChild: false
        })
    }
    render() {
        return (
            <div>
                {
                    this.state.hasChild ? <Son data={this.state.data} /> : null
                }
                <button onClick={() => this.onPropsChange()}>改变props</button>
                <button onClick={() => this.onDestoryChild()}>干掉子组件</button>
            </div>
        )
    }
}

class Son extends React.Component {
    // constructor用来初始化组件属性，this.state定义数据，super()为了接收到父类的this指针
    // 创建构造函数
    constructor(props) {
        super(props);
        console.log('初始化数据', constructor);
    }
    // 组件将要加载,整个组件还没有加载出来，js逻辑已经可以执行, 异步方法可以放在这里执行
    componentWillMount() {
        console.log('componentWillMount');
    }
    // 组件加载完成
    componentDidMount() {
        console.log('componentDidMount');
    }
    // 接收父组件传递过来的参数props时触发
    componentWillReceiveProps() {
        console.log('componentWillReceiveProps');
    }
    // 判断组件是否需要更新,它需要一个返回值，默认为true
    shouldComponentUpdate() {
        console.log('shouldComponentUpdate');
        return true; // 需要一个布尔返回值, 比如true或false来判断组件是否要根据值的变化而更新,
    }
    // 组件将要更新, 如果shouldComponentUpdate的返回值为true，那这个函数就要为组件更新做准备了
    // 如果shouldComponentUpdate返回值为false，则组件不会更新，componentWillUpdate,componentDidUpdate都不会执行
    componentWillUpdate() {
        console.log('componentWillUpdate');
    }
    // 组件更新完成
    componentDidUpdate() {
        console.log('componentDidUpdate');
    }
    // 组建将要被销毁
    componentWillUnmount() {
        console.log('componentWillUnmount');
    }
    // 把组件渲染到页面上
    render() {
        console.log('render');
        return (
            <div>
                <h1>Props:{this.props.data}</h1>
            </div>
        )
    }
}

ReactDOM.render(
    <div>
        <Father />
    </div>,
    document.getElementById('app')
);