React 从入门到进阶之路（九）

之前的文章我们介绍了 React propTypes  defaultProps。接下来我们将介绍 React 生命周期函数。

之前我们已经根据 create-react-app 模块创建了一个 React 项目，并定义 App.js 为根组件，即父组件，Home.js 为子组件。我们看一下两个组件的代码：

 App.js

import React, {Component} from 'react';
import Home from './components/Home';

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            title: "我是父组件 App 的 title",
            flag: true,
        }
    }

    setFlag = () => {
        this.setState({
            flag: !this.state.flag
        })
    }

    setTitle = () => {
        this.setState({
            title: "我是父组件 App 更改后的 title"
        })
    }

    render() {
        return (
            <div className="App">
                {
                    this.state.flag ? <Home title={this.state.title}/> : ""
                }

                <hr/>
                {/*通过 flag 来控制子组件 Home 的挂载与销毁*/}
                <button onClick={this.setFlag}>控制Home组件挂载销毁</button>

                <hr/>
                {/*通过 flag 来控制子组件 Home 的挂载与销毁*/}
                <button onClick={this.setTitle}>修改App组件的title值</button>

            </div>
        );
    }
}

export default App;

Home.js

import React, {Component} from 'react';

class Home extends Component {
    constructor(props) {
        console.log('01构造函数');
        super(props);
        this.state = {
            name: '我是子组件 Home 的 name',
            sex: 1
        };
    }

    //组件将要挂载的时候触发的生命周期函数
    componentWillMount() {
        console.log('02组件将要挂载');
    }

    //组件挂载完成的时候触发的生命周期函数
    componentDidMount() {
        //dom操作放在这个里面，请求数据也放在这个里面
        console.log('04组件挂载完成');
    }

    //是否要更新数据  如果返回true才会执行更新数据的操作
    shouldComponentUpdate(nextProps, nextState) {
        console.log('01是否要更新数据');
        // 父组件传递过来的更改后的值
        console.log(nextProps);
        // 子组件更改后 this.state 的值
        console.log(nextState);
        // 如果为 true 则可以更新数据，如果为 false 则不能更新数据
        return true;
    }

    //将要更新数据的时候触发
    componentWillUpdate() {
        console.log('02组件将要更新');
    }

    //组件更新完成
    componentDidUpdate() {
        console.log('04组件数据更新完成');
    }

    //在父组件里面改变props传值的时候触发的
    componentWillReceiveProps() {
        console.log('父子组件传值，父组件里面改变了props的值触发的方法')
    }

    setName = () => {
        this.setState({
            name: '我是子组件 Home 更改后的 name 值'
        })
    }

    //组件销毁的时候触发的生命周期函数，用在组件销毁的时候执行操作
    componentWillUnmount() {
        console.log('组件销毁了');
    }

    render() {
        console.log('03数据渲染render');
        return (
            <div>
                {/*父组件 App 传递过来的 title 值*/}
                <p>{this.props.title}</p>

                <br/><br/>
                {/*更改子组件 Home 的 name 值*/}
                <button onClick={this.setName}>更新name的数据</button>
            </div>
        );
    }
}

export default Home;

我们在父组件 App 中通过 <Home /> 标签插入子组件 Home，将 this.state 中的 title 值传给 Home 组件，并通过一个 flag 属性来控制该 Home 组件的挂载和销毁，并在 App 组件中定义一个 setTitle 的方法可以改变 this.state 中 title 的值。

我们在子组件 Home 中定义了很多组件的生命周期函数，下面我们来一点点分析。

我们先来看当页面加载时浏览器端的显示：

从控制台的输出结果我们可以看出组件在挂在时经历了四个阶段：

　　1、constructor：组件在挂载前最先经历该阶段，初始化数据。

　　2、componentWillMount，组件将要挂载时触发的生命周期函数。

　　3、render：数据渲染 render

　　4、componentDidMount：组件挂载完成时触发的生命周期函数。我们可以将 DOM 操作和请求数据放在这里面。

 

当我们点击 更新name的数据 的 button 按钮时，将 this.state 中的 name 值进行更改，浏览器的显示如下：

从控制台的输出结果我们可以看出组件在挂在时经历了四个阶段：

　　1、shouldComponentUpdate：是否需要更新数据，在该生命周期函数中如果 return true，则表示可以更新数据，如果 return false，则表示不允许更新数据，当更新数据时是不成功的。同时该生命周期函数中有两个传参 nextProps，nextState，其中 nextProps 表示父组件传递过来的值更改后的值，这个我们在下面的例子中解释。nextState 表示子组件更改后子组件中 this.state 的数据，从控制台的打印结果可以看出 this.state 中 name 值已经变成了更改后的值。

　　2、componentWillUpdate，将要更新数据的时候触发的生命周期函数。

　　3、render：数据渲染 render

　　4、componentDidUpdate：组件更新完成时触发的生命周期函数。

 

当我们点击 修改App组件的title值 的 button 按钮时，该 button 是父组件 App 的的一个按钮，将 App 组件中 this.state 的 title 值进行更改，浏览器的显示如下：

 

从控制台的输出结果我们可以看出组件在挂在时经历了五个阶段：

　　1、shouldWillReceiveProps：在父组件里面改变 props 传值的时候触发。

　　2、shouldComponentUpdate：是否需要更新数据，在该生命周期函数中如果 return true，则表示可以更新数据，如果 return false，则表示不允许更新数据，当更新数据时是不成功的。同时该生命周期函数中有两个传参 nextProps，nextState，其中 nextProps 表示父组件传递过来的值更改后的值，从控制台的打印结果可以看出 App 组件 this.state 中 title 值已经变成了更改后的值。nextState 表示子组件更改后子组件中 this.state 的数据，。

　　3、componentWillUpdate，将要更新数据的时候触发的生命周期函数。

　　4、render：数据渲染 render

　　5、componentDidUpdate：组件更新完成时触发的生命周期函数。

 

当我们点击 控制Home组件挂载销毁 的 button 按钮时，该 button 是父组件 App 的的一个按钮，当 App 组件的 this.state 中 flag 为 true 时 Home 组件挂载，当 flag 为 false 时 Home 组件销毁，浏览器的显示如下：

从控制台的输出结果我们可以看出组件在挂在时经历了一个阶段：

　　1、shouldWillUnmount：组件销毁的时候触发的生命周期函数。

 

当我们再次点击 控制Home组件挂载销毁 的 button 按钮时，组件又重新挂载，就会再在执行组件挂载时的生命周期函数，最后效果如下：