react学习笔记（2）---组件的生命周期

最新推荐文章于 2019-03-19 15:35:13 发布

thystar

最新推荐文章于 2019-03-19 15:35:13 发布

阅读量751

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/thystar/article/details/48022453

版权

web前端专栏收录该内容

20 篇文章 0 订阅

订阅专栏

1 组件：本质上是状态机，输入确定，输出一定确定。状态发生转换时会触发不同的钩子函数，从而让开发者有机会做出相应。

组件的生命周期：

初始化

getDefaultProps //获取实例的默认属性，第一次调用
getInitialState //获取实例的默认属性
componentWillMount // 组件即将装载
render // 组件在rander函数中生成虚拟的DOM节点，最后由react把虚拟的DOM节点渲染成真正的DOM节点并放在页面中进行交互
componentDidMount // 调用该函数时，组件已经被选染到了页面上

运行

componentWillReceiveProps // 组件将要接受到属性的时候调用
shouldComponentUpdate // 组件接收到新属性或者新状态的时候触发---组件是否要更新。
componentWillUpdate // 在rander触发之前调用，组件即将更新
render //
componentDidUpdate // 在render结束之后，真正的DOM渲染完后调用

销毁

componentWillUnmount // 在销毁之前调用

2 初始化阶段：

getDefaultProps //获取实例的默认属性，只调用一次，实例之间共享引用
getInitialState //获取实例的默认属性，初始化每个实例特有的状态：
componentWillMount // 组件即将装载， render之前最后一次修改状态的机会
render // 组件在rander函数中生成虚拟的DOM节点，最后由react把虚拟的DOM节点渲染成真正的DOM节点并放在页面中进行交互；只能访问this.props和this.state，只有一个顶层组件，不允许修改状态和DOM的输出

componentDidMount // 调用该函数时，组件已经被选染到了页面上； render调用成功并渲染完成真实的DOM之后触发，可以修改DOM。

实例1 查看触发顺序：

<!DOCTYPE html>
<html>
<head lang="zh-cn">
    <meta charset="UTF-8">
    <title></title>
    <script src="build/react.js"></script>
    <script src="build/JSXTransformer.js"></script>
</head>
<body>
<!--查看触发顺序-->
    <script type="text/jsx">
        var style = {
            color : "red",
            border: "1px #000 solid"
        };
        var HelloWorld = React.createClass({
            getDefaultProps : function(){
                console.log("1,getDefaultProps ")
            },
            getInitialState : function(){
                console.log("2,getInitialState ");
                return null;
            },
            componentWillMount: function(){
                console.log("3,componentWillMount ")
            },
            render:function(){
                return <p ref="childp">Hello {(function(obj){
                    if(obj.props.name){
                        return obj.props.name
                    }else{
                        return "World"
                    }
                })(this)}</p>
            },
            componentDidMount:function(){
                console.log("5,componenDidMount ")
            },
        });
        React.render(<div style={style}><HelloWorld></HelloWorld></div>, document.body);

    </script>
</body>
</html>

实例2. 各个函数的正确用法

<!DOCTYPE html>
<html>
<head lang="zh-cn">
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-2.1.4.min.js"></script>
    <script src="build/react.js"></script>
    <script src="build/JSXTransformer.js"></script>
</head>
<body>
    <script type="text/jsx">
        $(document).ready(
                function(){
                    var count = 0;
                    var style = {
                        color : "red",
                        border: "1px #000 solid"
                    };
                    var HelloWorld = React.createClass({
                        getDefaultProps: function () {
                            console.log("1,getDefaultProps ");
                            return {name: "Tom"};
                        },
                        getInitialState: function () {
                            console.log("2,getInitialState ");
                            return {
                                myCount: count++,
                                ready: false
                            };
                        },
                        componentWillMount: function () {
                            console.log("3,componentWillMount ");
                            this.setState({ready: true});
                        },
                        render:function () {
                            return <p ref="childp">Hello {this.props.name ? this.props.name : "World"}
                            <br/>
                            {" " + this.state.ready}{this.state.myCount}
                            </p>;
                        },
                        componentDidMount:function () {
                            console.log("5,componenDidMount ");
                            $(React.findDOMNode(this)).append("surprise");
                        },
                    });
                        React.render(<div style={style}><HelloWorld></HelloWorld><br/>
                            <HelloWorld></HelloWorld>
                            </div>, document.body);
                }
        )

    </script>
</body>
</html>

3 运行中函数及正确用法：

componentWillReceiveProps // 组件将要接受到属性的时候调用；父组件修改属性触发，可以需改新属性，修改状态
shouldComponentUpdate // 组件接收到新属性或者新状态的时候触发---组件是否要更新。返回false阻止render调用
componentWillUpdate // 在rander触发之前调用，组件即将更新；不能修改属性和状态
render //

componentDidUpdate // 在render结束之后，真正的DOM渲染完后调用；可以修改DOM

实例1 查看触发顺序：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="build/react.js"></script>
    <script src="build/JSXTransformer.js"></script>
</head>
<body>
<script type="text/jsx">
    var style = {
        color : "red",
        border: "1px #000 solid"
    };
    var HelloWorld = React.createClass({
        componentWillReceiveProps: function(){
            console.log("1, componentWillReceiveProps");
        },
        shouldComponentUpdate: function(){
            console.log("2, shouldComponentUpdate");
            return true;
        },
        componentWillUpdate: function(){
            console.log("3, componentWillUpdate");
        },
        render: function () {
            console.log("4, render");
            return <p ref="childp">
                Hello,{this.props.name ? this.props.name:"World"}
            </p>
        },
        componentDidUpdate: function(){
            console.log("5, componentDidUpdate");
        },
    });
    var HelloUnivers = 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>
        },

    })
    React.render(<div style={style}>
        <HelloUnivers></HelloUnivers>
    </div>, document.body);
</script>
</body>
</html>

实例2：各个函数的用法：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-2.1.4.min.js"></script>
    <script src="build/react.js"></script>
    <script src="build/JSXTransformer.js"></script>
</head>
<body>
    <script type="text/jsx">
        $(document).ready(
                function () {
                    var style = {
                        color : "red",
                        border: "1px #000 solid"
                    };

                    var HelloWorld = React.createClass({
                        componentWillReceiveProps: function(newProps){
                            console.log("1, componentWillReceiveProps");
                            console.log(newProps);
                        },
                        shouldComponentUpdate: function(){
                            console.log("2, shouldComponentUpdate");
                            return true;
                        },
                        componentWillUpdate: function(){
                            console.log("3, componentWillUpdate");
                        },
                        render: function () {
                            console.log("4, render");
                            return <p ref="childp">
                                Hello,{this.props.name ? this.props.name:"World"}
                            </p>
                        },
                        componentDidUpdate: function(){
                            console.log("5, componentDidUpdate");
                            $(React.findDOMNode(this)).append("superise");
                        },
                    });
                    var HelloUnivers = 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>
                        },

                    })
                    React.render(<div style={style}>
                        <HelloUnivers></HelloUnivers>
                    </div>, document.body);
                }
        )
    </script>
</body>
</html>

4. 销毁阶段使用的函数：

componentWillUnmount // 在销毁之前调用；在组件之前进行清理操作，比如计时器和监听器。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-2.1.4.min.js"></script>
    <script src="build/react.js"></script>
    <script src="build/JSXTransformer.js"></script>
</head>
<body>
    <script type="text/jsx">
        $(document).ready(
                function () {
                    var style = {
                        color : "red",
                        border: "1px #000 solid"
                    };

                    var HelloWorld = React.createClass({
                        render: function () {
                            console.log("4, render");
                            return <p ref="childp">
                                Hello,{this.props.name ? this.props.name:"World"}
                            </p>
                        },
                        componentWillUnmount:function(){
                            console.log("B000000000000M");
                        }
                    });
                    var HelloUnivers = React.createClass({
                        getInitialState: function(){
                            return {name:''};
                        },
                        handleChange:function(event){
                            this.setState({name: event.target.value});
                        },
                        render:function(){
                            if(this.state.name=="123"){
                                return <div>123</div>
                            }
                            return <div>
                                <HelloWorld name={this.state.name}></HelloWorld>
                                <br/>
                                <input type="text" onChange={this.handleChange}/>
                            </div>
                        },

                    })
                    React.render(<div style={style}>
                        <HelloUnivers></HelloUnivers>
                    </div>, document.body);
                }
        )
    </script>
</body>
</html>

thystar

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
react学习笔记（2）---组件的生命周期

1 组件：本质上是状态机，输入确定，输出一定确定。状态发生转换时会触发不同的钩子函数，从而让开发者有机会做出相应。组件的生命周期：初始化 getDefaultProps //获取实例的默认属性，第一次调用getInitialState //获取实例的默认属性componentWillMount // 组件即将装载render // 组件在rander函数中生成虚拟的DOM节点，最
复制链接

扫一扫