组件的状态 state

函数组件又叫做无状态组件，类组件又叫做有状态组件

状态（state）即数据

函数组件没有 state,一般只负责渲染静态结构

类组件有自己的状态，负责更新 UI，让页面“动” 起来

state 的基本使用

• 状态（state）即数据，是组件内部的私有数据，只能在组件内部使用

• state 的值是对象，表示一个组件中可以有多个数据

• 获取状态：this.state

class Hello extends React.Component {
  constructor() {
    super();
    this.state = { count: 0 }; // 初始化state
  }
  // 简化语法
  // state= { count: 0 }

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

操作 state

语法：this.setState({ 要修改的数据 })

注意：不要直接修改 state 中的值，应该使用组件实例的 setState 方法,修改 state 的值

setState() 作用：

1. 修改 state
2. 更新 UI

class Hello extends React.Component {
  constructor() {
    super();
    this.state = { count: 0, num: 100 }; // 初始化state
  }

  render() {
    return (
      <div
        onClick={() => {
          this.setState({
            count: this.state.count + 1,
          });
        }}
      >
        {this.state.count}
      </div>
    );
  }
}

setState 的注意点

• 连续调用合并问题

  handle = () => {
    this.setState({
      count: this.state.count + 1,
    });
    this.setState({
      count: this.state.count + 2,
    });
    this.setState({
      count: this.state.count + 3,
    });
  };
  // 连续调用.react会将多次合并成一次. 最终执行的是最后一次

• setState 第一个参数传入函数

  state = { count: 0 };
  // 第一个参数除了可以像之前一样传入一个对象之外,还可以传入一个函数.如下
  // 这个函数,接收一个最新的state和最新的props
  // 函数要求返回一个对象
  this.setState((state, props) => {
    return {
      count: state.count + 1,
    };
  });
  this.setState((state, props) => {
    return {
      count: state.count + 2,
    };
  });
  this.setState((state, props) => {
    return {
      count: state.count + 3,
    };
  });
  // 最终状态中count的结果是 6

• setState 将对组件 state 的更改排入队列,所以调用之后,立刻获取 this.state 拿到的值很有可能是错误的

  state = { count: 0 };
  
  this.setState((state, props) => {
    return {
      count: state.count + 1,
    };
  });
  this.setState((state, props) => {
    return {
      count: state.count + 2,
    };
  });
  this.setState((state, props) => {
    return {
      count: state.count + 3,
    };
  });
  // 这里获取到的state中count的值就是错误的
  console.log(this.state.count); // 0

• setState 的第二个可选参数

  // 如果想要在setState之后立刻得到最新的state. 可以使用第二个可以选参数
  this.setState(
    (state, props) => {},
    //它将在 setState 完成合并并重新渲染组件后执行
    () => {
      console.log(this.state);
    }
  );