「React」setState 知识点

setState 知识点

setState(updater, [callback]);

1. setState 默认情况下是异步的，目的是收集一段时间内的所有修改，执行一次更新，避免短时间内多次更改导致频繁更新 DOM 造成不必要性能消耗。

由于此特性，在setState后立即读取state往往得到的是未更新的值，可以使用生命周期 componentDidUpdate 或 setState第二参数回调函数来解决这个问题

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      name: "lim",
    };
  }
  changeName() {
    this.setState({
      name: "Jesse",
    });
    this.setState({
      name: "Alice",
    });
    this.setState({
      name: "Hanke",
    });
    this.setState({
      name: "5k",
    });
    console.log(this.state.name); // 异步原因，此处打印 lim
  }
  render() {
    console.log("渲染"); // 只执行一次
    return <button onClick={() => this.changeName()}>更改名字</button>;
  }
}

2.setState 不是所有情况都是异步的如在定时器、原生事件中，是同步的。

// 定时器中
setTimeout(() => {
  this.setState({
    name: "5k",
  });
  console.log(this.state.name); // 5k
}, 0);

// 原生事件中
class App extends React.Component {
  constructor() {
    super();
    this.state = {
      name: "lim",
    };
  }
  componentDidMount() {
    const btn = document.getElementById("nameBtn");
    btn.onclick = () => {
      this.setState({
        name: "5k",
      });
      console.log(this.state.name); // 5k
    };
  }
  render() {
    return <button id={"nameBtn"}>更改名字</button>;
  }
}

3. 想要获取到 state 更新之后的值，可以通过 setState 的第二个参数 callback，它在完成合并并重新渲染组件后执行。

官网建议使用生命周期 componentDidUpdate() 来替代此方式

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      name: "",
    };
  }
  changeName() {
    this.setState(
      {
        name: "5k",
      },
      () => {
        console.log(this.state.name); // 5k
      }
    );
  }
  render() {
    return <button onClick={() => this.changeName()}>更改名字</button>;
  }
}

4. 要获取上一次更新的值，可以通过第一参数传递函数「updater」的方式，updater 函数中接收的 state 和 props 都保证为最新，updater 的返回值会与 state 进行浅合并

第一参数可选为对象或者函数，函数使用场景通常是你后续状态取决于你当前状态时。

this.setState((state, props) => {
  // 第二参数 props 就是组件接受的参数
  return {
    count: state.count + 1,
  };
});

官网直通车 state核心概念 API