3. React 组件生命周期介绍

最新推荐文章于 2024-08-04 13:48:08 发布

jerome_s

最新推荐文章于 2024-08-04 13:48:08 发布

阅读量557

点赞数

分类专栏：前端文章标签： React 生命周期

本文链接：https://blog.csdn.net/Jerome_s/article/details/52937698

版权

前端专栏收录该内容

27 篇文章 0 订阅

订阅专栏

React 中的每个组件都有三个阶段，这三个阶段构成了组件完整的生命周期。组件的生命周期为初始化→运行中→销毁，每个阶段都可以有开发者自定义的函数，执行不同的行为。下面介绍不同阶段的特点、不同阶段可以触发的函数以及触发条件。

组件本质上是状态机，输入确定，输出一定确定。状态发生转换时会触发不同的钩子函数，从而让开发者有机会做出响应。可以用事件的思路来理解状态。

初始化阶段介绍

这个阶段可以触发五个函数，下面是不同函数的触发条件：

getDefaultProps：只调用一次，实例之间共享引用

getInitialState：初始化每个实例特有的状态

componentWillMount：render之前最后一次修改状态的机会

render：只能访问this.props和this.state，只有一个顶层组件，不允许修改状态和DOM输出

componentDidMount：成功render并渲染完成真实DOM之后触发，可以修改DOM

<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8">
        <title>react dom dangerouslySetInnerHTML</title>
        <script src="../build/react.js"></script>
        <script src="../build/react-dom.js"></script>
        <script src="../build/browser.min.js"></script>
        <script src="../build/jquery.min.js"></script>
    </head>
    <body>
        <script type="text/babel">
            var count = 0;
            var HelloWorld = React.createClass({
                getDefaultProps: function () {
                    console.log("getDefaultProps, 1");
                    return {name: "Tom"};
                },
                getInitialState: function () {
                    console.log("getInitialState, 2");
                    return {myCount: ++count, ready: false};
                },
                componentWillMount: function () {
                    console.log("componentWillMount, 3");
                    this.setState({ready: true});
                },
                render: function () {
                    console.log("render, 4");
                    return <p ref="childp">Hello, {this.props.name ? this.props.name : "World"}<br/>{"" + this.state.ready} {this.state.myCount}</p>;
                },
                componentDidMount: function () {
                    console.log("componentDidMount, 5");
                    $(ReactDOM.findDOMNode(this)).append("surprise!");
                },
            });

            ReactDOM.render(<div><HelloWorld></HelloWorld><br/><HelloWorld></HelloWorld></div>, document.body);
        </script>
    </body>
</html>

查看代码

运行结果

getDefaultProps, 1

getInitialState, 2

componentWillMount, 3

render, 4

getInitialState, 2

componentWillMount, 3

render, 4

2次componentDidMount, 5

运行中阶段介绍

这个阶段可以触发四个函数：

componentWillReceiveProps：父组件修改属性触发，可以修改新属性、修改状态

shouldComponentUpdate：返回false会阻止render调用

componentWillUpdate：不能修改属性和状态

render：只能访问this.props和this.state，只有一个顶层组件，不允许修改状态和DOM输出

componentDidUpdate：可以修改DOM

<script type="text/babel">
    var HelloWorld = React.createClass({
        componentWillReceiveProps: function (newProps) {
            console.log("componentWillReceiveProps 1");
            console.log(newProps);
        },
        shouldComponentUpdate: function () {
            console.log("shouldComponentUpdate 2");
            return true;
        },
        componentWillUpdate: function () {
            console.log("componentWillUpdate 3");
        },
        render: function () {
            console.log("render 4");
            return <p>Hello, {this.props.name ? this.props.name : "World"}</p>;
        },
        componentDidUpdate: function() {
            $(ReactDOM.findDOMNode(this)).append("surprise!");
        },
    });
    var HelloUniverse = React.createClass({
        getInitialState: function () {
            return {name: ''};
        },
        handleChange: function (event) {
            this.setState({name: event.target.value});
        },
        render: function () {
            return <div>
                <HelloWorld name={this.state.name}></HelloWorld>
                <br/>
                <input type="text" onChange={this.handleChange} />
                </div>
        },
    });
    ReactDOM.render(<div><HelloUniverse></HelloUniverse></div>, document.body);
</script>

查看代码

运行，输入1，输出:

render 4

componentWillReceiveProps 1

Object {name: "1"}

shouldComponentUpdate 2

componentWillUpdate 3

render 4

销毁阶段介绍

这个阶段可以触发一个函数：

componentWillUnmount：在删除组件之前进行清理操作，比如计时器和事件监听器

<script type="text/babel">
    var HelloWorld = React.createClass({
        render: function () {
            console.log("render 4");
            return <p>Hello, {this.props.name ? this.props.name : "World"}</p>;
        },
        //在删除组件之前进行清理操作，比如计时器和事件监听器
        componentWillUnmount: function() {
            console.log("clear HelloWorld!");
        },
    });
    var HelloUniverse = React.createClass({
        getInitialState: function () {
            return {name: ''};
        },
        handleChange: function (event) {
            if (event.target.value == "123") {
                ReactDOM.unmountComponentAtNode(document.getElementsByTagName("body")[0]);
                return;
            }
            this.setState({name: event.target.value});
        },
        render: function () {
            return <div>
                <HelloWorld name={this.state.name}></HelloWorld>
                <br/>
                <input type="text" onChange={this.handleChange} />
                </div>
        },
    });
    ReactDOM.render(<div><HelloUniverse></HelloUniverse></div>, document.body);
</script>