这集要聊的是另外一个 React 最重要的概念之一，也就是 State ，状态。 State 跟前面提过的属性 Props 类似，但是状态是组件私有的完全被组件自己控制的数据。

State 的基本使用

先来看看 State 的基本使用方式。目前我使用的是 16.6.0 版本的 React ，函数式组件中还不能支持 State ，但是未来版本中会支持的。

src/index.js

class App extends Component {
  render() {
    return <div>0</div>
  }
}

先到 src/index.js 中来添加一个普通的类组件。这里显示了0，如果0只是作为一个字符串显示，那么就没有必要抽出成 State ，但是对于一些会发生变化的内容，就要抽出成 State 。

class App extends Component {
  state = {
    count: 0
  }

  render() {
    return <div>{this.state.count}</div>
  }
}

具体方式就是，定义一个名为 state 的对象，里面的每个属性就是一个 state 了。例如，这里有了一个 state 叫做 count ，对应的值是0。下方 JSX 中，用 this.state.count 就可以得到 state 值了。

这就是 state 使用的基本方式。

如何更新 State

如果 state 数据不更新，就看不出 state 有什么意义。下面来看看如何更新 state 。

  handleClick = () => {
    console.log('Clicked!')
  }

  render() {
    return (
      <div>
        {this.state.count}
        <button onClick={this.handleClick}>+1</button>
      </div>
    )
  }

这里我们需要在组件中添加一个按钮，点击按钮触发一个 event ，关于 event ，这里我们不展开。如果要响应点击事件就用 onClick 指定一个事件处理函数即可，这里的函数名叫做 handleClick。定义 handleClick ，里面打印一条信息。浏览器中可以看到信息打印出来了，表示事件处理函数运行良好。

更新 state 时要特别注意，不允许直接赋值修改。

  handleClick = () => {
    console.log('Clicked!')
    this.state.count = 1
  }

这种写法是错误的。

正确的方式是使用 setState 来更新状态值。

  handleClick = () => {
    console.log('Clicked!')
    this.setState({
      count: 1
    })
  }

这样，浏览器中再点一下按钮，state 值就更新为1了。至于为何有这个规定，咱们这里不深究，简单来讲 ，React 坚持函数式编程思想，而保持变量不变性是函数式编程的基本原则。

除了不可直接修改 state 值，另外一个要特别注意的问题是，setState 是个异步函数，这就造成不能直接根据上一个 state 值来生成下一下 state 值。比如我们想让每次点按钮的时候 count 都加一。

// Wrong
this.setState({
  count: this.state.count + 1 
});

直观的想法就是写成这样。但是由于 setState 是异步的，也就是说，第二次触发 setState 的时候，第一次未必已经执行完毕，所以直接用上次的 state 去更新这次的 state ，是不可靠的。

// Correct
this.setState((state, props) => ({
  count: state.count + 1
}))

好在 setState 有专门的一种写法去应对这种情况，传递给 setState 一个回调函数，其中第一个参数 state 就可以放心的作为上一次 state 来使用了。

关于如何更新 state ，就聊这么多。

状态和属性的区分

初学者遇到的另外一个困难是不太容易区分 state 和 props ，所以本节最后一部分，聊聊二者的区别。关键把握一句话：props 是组件和外界联通的桥梁，state 是组件私有的。

我们先来理解一下前半句：props 是组件和外界沟通的桥梁。

class Box extends Component {
  render() {
    return (
      <h3>
        父组件计数值：
        {this.props.num}
      </h3>
    )
  }
}

   <Box num={this.state.count} />

例如，给 App 组件添加一个子组件 Box ，显示 App 组件的 count 值，这个时候，就可以给 Box 设置一个 props 值叫做 num ，传递 count 给它，这样 App 的数据就可以传入 Box 组件中显示了。所以说 props 是组件连接外部的桥梁。

那么下半句“state 是组件私有”的，如何理解呢？首先说，当前组件的 state 不能直接在其他组件中使用，包括它的子组件。另外，当前组件的 state 值也不能在其他组件中去直接修改，这种限制形成了对组件的良好封装，保证了代码的逻辑简单。

关于 props 和 state 的区别，咱们就先聊到这里。

总结

这节关于组件状态，也就是 state ，就聊这么多。需要记住的是：首先， state 值是在组件中，通过定义 state 对象来设置初始值的，第二，state 值是不能直接修改的，而要使用 setState 来更新，第三，props 是组件跟外界沟通的桥梁，而 state 是组件私有的数据。