react入门（4）

十四、props和state的混搭使用

案例19：(在 react入门2和3 里讲过的东西，这里简单讲解一下，不再细说)

<!DOCTYPE html>
<html>
<head>
    <title>react入门</title>
    <meta charset="utf-8">
    <script src="https://npmcdn.com/react@15.3.1/dist/react.min.js"></script>
    <script src="https://npmcdn.com/react-dom@15.3.1/dist/react-dom.min.js"></script>
    <script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>
</head>
<body>
    <div id="example"></div>
    <script type="text/babel">
        var Parent = React.createClass({
            getInitialState:function(){
                return {
                      val:'123'
                };
            },
            changes:function(event){
                this.setState({val:event.target.value})
            },
            render:function(){
                return (
                    <div>
                        <input type="text" value={this.state.val} onChange={this.changes} />
                        <Child txt={this.state.val} />
                    </div>
                )
            }
        });

        var Child = React.createClass({
            render:function(){
                return (
                    <div>{this.props.txt}</div>
                )
            }
        });

        ReactDOM.render(
            <Parent />,
            document.getElementById('example')
        )
    </script>
</body>
</html>

效果如下

分析如下

1. Parent组件，设置初始值

2. Parent组件，this.state.val获取value的初始值，input值发生改变就触发onChange事件，调用changes方法

3. Parent组件，通过setState重新给val赋值

这里event.target指的就是input，event.target.value就是input的值

我们在 react入门3 里讲过 refs，这里也可以通过给input设置一个ref属性，通过this.refs.xxx来获取input

4. 在父组件Parent里，Child标签上有一个txt属性，这个属性的属性值就是this.state.val，也就相当于世input的value值，它是一个变化的值，这里也就是要将父组件Parent的信息（val值）传递给子组件Child

5.在子组件Child里，通过this.props.txt来获取父组件传递过来的信息。这里就是获取父组件Parent里，Child标签上，txt属性的值

总结一下上面这个例子：

1. 我们在子组件Child里，通过this.props.txt获取父组件Parent传过来的信息，即父组件里txt属性的值。

2. txt属性对应的值，是通过this.state.val来读取的getInitialState里面设置的val的值，即123，这是初始状态。

3. input上绑定了onChange事件，当input值发生改变的时候，触发changes方法

4. changes方法里面，通过setState给val重新赋值

5. 因此最终呈现在页面上的效果就是，当你修改了父组件里input的值，子组件Child里的内容也会跟着一起改变

案例20：

<!DOCTYPE html>
<html>
<head>
    <title>react入门</title>
    <meta charset="utf-8">
    <script src="https://npmcdn.com/react@15.3.1/dist/react.min.js"></script>
    <script src="https://npmcdn.com/react-dom@15.3.1/dist/react-dom.min.js"></script>
    <script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>
</head>
<body>
    <div id="example"></div>
    <script type="text/babel">
        var Parent = React.createClass({
            getInitialState:function(){
                return {
                      txt:'您好'
                };
            },
            render:function(){
                return (
                    <div>
                        <Child txt={this.state.txt} />
                    </div>
                )
            }
        });

        var Child = React.createClass({
            getInitialState:function(){
                return {
                      txt:this.props.txt
                };
            },
            render:function(){
                return (
                    <div>{this.state.txt}</div>
                )
            }
        });

        ReactDOM.render(
            <Parent />,
            document.getElementById('example')
        )
    </script>
</body>
</html>

效果如下

父组件 Parent 的解析如下所示

子组件 Child 的解析如下所示

在这里值得一提的是，在子组件里，从父组件传递的信息（this.props.txt）可以用来设置初始值

十五、state与props的对比

看一下他们之间的区别吧

属性Props：

• 属性被传递的方式，一般在组件被调用的时候传入
• 可以获取父组件的初始值、修改值，也可以获取父组件的属性、方法（this.props.xxx）
• 可以设置初始值（getInitialState）
• 从父组件里传递过来的信息，可以用来设置子组件的初始值
• 父元素赋予的，不可以在子组件里被修改

状态state:

• 需要在组件内部去声明
• 可以设置初始值（getInitialState）
• 父组件的state，不可以用来设置子组件的初始值
• 可以在组件内部修改 （setState）

十六、生命周期

官网定义戳这里

React生命周期总体分为三个状态：

• 挂载 mounted （初始化时候）

当我们看到页面元素从jsx变成dom节点的时候,react组件已经被载入（mounted）到页面中。

• 更新 update（组件在运行中如果发生状态和属性的变化发生的）

当react组件中的数据发生变化的时候，需要重新渲染页面（重新更新页面元素的时候，例如获取本次数据与上次数据不一样，需要重新更新页面数据），此时需要将react组件重新渲染一次。

• 移除 unmount（组件卸载和销毁状态）

当组件需要被从页面中废弃和销毁的时候，就需要将react组件从页面中删除掉。

 

React提供生命周期方法，你可以在这些方法中放入自己的代码。React提供will方法，会在某些行为发生之前调用，和did方法，会在某些行为发生之后调用。

十七、挂载 mounted

• getDefaultProps()

设置组件内部属性（一般用于设置组件内部的常量），比如，请求一个ajax，请求的url就可以设置成内部属性，因为url是不变的。返回对象

• getInitialState()

设置组件内部的状态，返回对象（初始的state数据）。

• componentWillMount()

组件即将加载时，在这时可以获取ajax数据，并解析。

• render()

默认创建jsx --> dom，默认返回JSX

• componentDidMount()

组件加载完毕时，挂载的状态。可以获取渲染后的dom节点，调用第三方插件（例如jq）

上面的五个函数是每个react组件初始化阶段走过五步，开发中，不需要用时可以不写（getInitialState已经在上面使用过了，其他几个书写方式类似）。

易错点：render只负责渲染，每次数据刷新都调用render函数

案例21：

<!DOCTYPE html>
<html>
<head>
    <title>react入门</title>
    <meta charset="utf-8">
    <script src="https://npmcdn.com/react@15.3.1/dist/react.min.js"></script>
    <script src="https://npmcdn.com/react-dom@15.3.1/dist/react-dom.min.js"></script>
    <script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>
</head>
<body>
    <div id="example"></div>
    <script type="text/babel">
        var Test = React.createClass({
            getDefaultProps:function(){
                console.log("1 get props")
                return {}
            },
            getInitialState:function(){
                console.log("2 get state")
                return {}
            },
            componentWillMount:function(){
                console.log("3 wiil mount")
            },
            render:function(){
                console.log("4 render")
                return (
                    <div>
                        你好
                    </div>
                )
            },
            componentDidMount:function(){
                console.log("5 did mount")
            }
        });

        ReactDOM.render(
            <Test />,
            document.getElementById('example')
        )
    </script>
</body>
</html>

效果如下

这个例子是按照执行顺序去写的，这几个函数你也可以不按照这个顺序去写。

十八、更新 update

• componentWillReceiveProps(nextProps)

当挂载的组件收到新的props时，调用次函数。

该方法用于比较this.props和nextProps，当两者不同的时候，使用this.setState()来改变state

• shouldComponentUpdate(nextProps,nextState)

当组件接收到新的props、state时，要做出是否更新dom的决定，这时函数被调用，返回boolean。

可以写入一些逻辑，控制数据的更新。实现该函数，优化this.props和nextProps，以及this.state和nextState，如果不需要React更新DOM，则返回false。

• componentWillUpdate(nextProps,nextState)

在组件重新渲染之前执行，在渲染之前最后的props和state都发生了改变，这个函数使用很少，一般用在日志和记录的打印。

你可以在这里调用this.setState()

• componentDidUpdate()

当组件重新渲染完毕后调用

组件运行中生命周期函数被触发的条件：

• 当父组件修改子组件的属性props时
• 当组件自身修改状态state时

十九、移除 Unmount

componentWillUnmount()

在组件移除和销毁之前被调用。清理工作应该放在这里。这个函数很少用到，因为浏览器本身具有垃圾回收机制