• 数据流
    • Props
    • State

    数据流

    本节将介绍如何在 React 中应用简单的数据流。

    在 React 中，数据的载体主要有两种方式：

    • props
    • state

    来看一下如何使用者两种不同的方式来处理数据。

    Props

    props 即属性 (property)，是在组件初始化之后就从父级组件带入的到组件内部。

    我们无法在使用的过程中对组件的属性进行修改。

    1. // 定义一个 React 组件
    2. var A = React.createClass({
    3.   render: function () {
    4.     return <h1>{this.props.text}</h1>
    5.   }
    6. })
    8. // 使用组件 A
    9. ReactDOM.render(
    10.   <A text="title" />,
    11.   document.getElementById('app')
    12. )

    在以上代码中，我们定义了一个组件 A，然后在 render 方法中渲染了一个内容为 this.props.text 的变量。

    State

    state则是实际上组件中使用的「数据」：

    1. var B = React.createClass({
    2.   getInitialState: function () {
    3.     return {
    4.       value: 0
    5.     }
    6.   },
    8.   render: function () {
    9.     return (
    10.       <div>
    11.         <input value={this.state.value} />
    12.         <button onClick={() => {
    13.           this.setState({
    14.             value: ++this.state.value
    15.           })
    16.         }}>+</button>
    17.       </div>
    18.     )
    19.   }
    20. })
    22. ReactDOM.render(
    23.   <B />,
    24.   document.getElementById('app')
    25. )

    在上述例子中，可以看到我们给一个<button>绑定了click事件：

    1. this.setState({
    2.   value: ++this.state.value
    3. });

    调用 this.setState() 方法可以修改组件的state，并重新调用render方法 — 重新渲染组件。