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

来源：互联网发布：centos 开放3306端口编辑：程序博客网时间：2024/05/08 03:50

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>

0 0