在React中使用state

概念

React.js中有个state，用来存储当前组件的数据很方便。

我查看的版本是React v16.4.1，官网有一句话是“ State is similar to props, but it is private and fully controlled by the component.“

所以我们首先要明白，state是一个组件内部私有的。

使用state

Step1. 设置初始state

只能在constructor中设置this.state，例如在state中设置我的名字是Huan，年龄是16，代码如下：

constructor(props) {
    super(props);
    this.state = {"name": "Huan", "age": 16 };
}

Step2. 使用state

在User组件的render()函数的return结果中，显示数据的地方使用大括号包裹数据，如{this.state.name}，就会显示Huan，修改后代码如下：

class User extends React.Component {
  constructor(props) {
    super(props);
    this.state = {"name": "Huan", "age": 16};
  }

  render() {
    return (
      <h2>我叫{this.state.name}，我的年龄是{this.state.age}岁。</h2>
    );
  }
}

Step3. 修改state

修改state使用this.setState()

例如当前组件加一个按钮，点击之后可以修改state的数据来显示英文名Hanna，所以在handleClick处理点击函数中使用this.setState()修改state
注意不要忘记constructor中函数.bind(this)，修改后代码如下：

class User extends React.Component {
  constructor(props) {
    super(props);
    this.state = {"name": "Huan", "age": 16};
    this.handleClick = this.handleClick.bind(this)
  }

  handleClick(){
    this.setState({"name":"Hanna"})
  }

  render() {
    return (
      <div>
        <h2>我叫{this.state.name}，我的年龄是{this.state.age}。</h2>
        <button onClick={this.handleClick}>换成英文名</button>
      </div>
    );
  }
}

注意

state的基本操作就是这些，但是还有几点需要我们注意：

• 修改state的时候，很多人按照思维惯性，会直接写this.state.name=” new name “，但是这样的话，React不知道哪个state被修改了，也就不会重新渲染组件（ this will not re-render a component），所以必须使用this.setState()来修改state。

• 可以给this.setState()传入函数，虽然常见是传入对象Object，但函数也是可以的，而且应用场景也很多，比如有异步更新的情况时，或者想直接更新前一个状态的时候，如下代码:

    this.setState((prevState) => ({
      return {sum: prevState.sum + 1};
    }));
  

• 可以单独更新state中的一个键值对，其它不受影响，所有更新的结果会合并而不是覆盖，比如我只更新this.setState({"name":"Hanna"})，age是不受影响的，最后state的值是name和age的合并。也就是{"name": "Hanna", "age": 16}。

至此，我们就完成了state的基本使用。

参考文档

参考文章为React官网文档，点此查看官网。