当前位置: 博客 /  ReactJs  / 在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官网文档,点此查看官网

- END -