React - setState

介绍

setState()是 React 中一个非常重要的概念和方法，用来控制组件的状态，实现组件的数据更新和重新渲染。在开发中，经常需要根据用户交互、服务器响应、定时器等各种事件来更新组件的状态，这时候就会用到 setState。

语法

setState(updater[, callback])

• updater: 更新 state 的对象（可能是对象、函数、值、异步防抖等）
• callback: 回调函数，在 state 更新后执行

使用方式

传入对象

最简单的方式是传入一个对象，每个属性表示 state 中的一个值，并根据需求进行更新。

constructor(props) {
  super(props);
  this.state = {
    count: 0,
    message: 'Hello, world!'
  };
}

handleClick() {
  this.setState({
    count: this.state.count + 1,
    message: 'Clicked ' + (this.state.count + 1) + ' times!'
  });
}

render() {
  return (
    <div>
      <h1>{this.state.message}</h1>
      <button onClick={this.handleClick.bind(this)}>Click me</button>
    </div>
  );
}

这里每次点击按钮，都会更新 count 和 message 的值，并显示在页面上。

传入函数

如果需要对上一个状态进行操作，一般会使用传入一个函数的方式，而不是传入对象。

handleClick() {
  this.setState((prevState, props) => ({count: prevState.count + 1}));
}

这里的 setState 接受一个函数作为参数，这个函数接受两个参数：

• prevState：上一个状态值
• props：组件 props

通过修改这个函数，我们可以对上一个状态值进行操作，返回一个新的状态对象。这种方式能够解决 state 图形界面数据不一致的问题。

异步 setState

setState() 是异步的，因为 React 会尽可能的将 state 的更新操作合并执行，从而提高效率和性能。

handleClick() {
  this.setState({
    count: this.state.count + 1
  });
  console.log(this.state.count);
}

这里 console.log() 的输出结果并不是我们期望的，因为 setState() 的更新是异步执行的。可以使用回调函数来解决这个问题。

handleClick() {
  this.setState({
    count: this.state.count + 1
  }, () => {
    console.log(this.state.count);
  });
}

这里我们将 console.log() 放在了 setState() 的回调函数里，这样就可以保证输出结果正确了。

防抖

有时候，我们需要在一定时间内限制某些操作的执行次数，比如频繁的触发三方 API、短时间内多次点击等，这时候就会用到防抖。

class Debounce extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
    this.debounce = this.debounce.bind(this);
  }

  debounce(fn, delay) {
    let timer = null;
    return function(...args) {
      if (timer !== null) clearTimeout(timer);
      timer = setTimeout(() => {
        fn.apply(this, args);
      }, delay);
    }
  }

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

  render() {
    const debounceClick = this.debounce(this.handleClick, 1000); // 1s 防抖
    return (
      <div>
        <h1>Count: {this.state.count}</h1>
        <button onClick={debounceClick}>Click me</button>
      </div>
    );
  }
}

这里我们通过一个 debounce 函数来实现防抖操作，将原来的 handleClick 函数作为参数传入，返回新的 debounceClick 函数。这里防抖时间设置为 1s，也可以根据需求进行调整。

总结

setState() 是 React 中用来更新组件状态的关键方法，通过传入对象或函数来实现更新操作。需要注意的是，setState() 是异步执行的，因此不要直接使用 state 的值来进行后续的操作，而应该使用回调函数或者 componentDidUpdate 生命周期。同时，防抖也是一个非常实用的技巧，可以帮助我们解决很多频繁操作的问题。