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

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,componentWillUnmount:function(){
                            console.log("B000000000000M");
                        }
                    });
                    var HelloUnivers = React.createClass({
                        getInitialState: function(){
                            return {name:''};
                        },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>
                        },document.body);
                }
        )
    </script>
</body>
</html>

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

相关推荐