数据流

本节将介绍如何在 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方法 — 重新渲染组件。