如何强制 ReactJS 在每次 setState 调用时重新渲染？

在 React 中，当调用 setState 时，只有在 state 或 props 发生变化时才会重新渲染组件。如果你想在每次 setState 调用时都重新渲染组件，有以下几种方法：

方法一：使用 key 属性

在 React 中，key 属性用于标识动态生成的组件，当 key 属性的值发生变化时会强制重新渲染组件。因此，你可以在每次 setState 调用时，通过给组件添加一个不同的 key 值来实现强制重新渲染：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      key: 0
    };
  }
  
  handleUpdate = () => {
    this.setState({
      key: this.state.key + 1
    });
  }
  
  render() {
    return (
      <div key={this.state.key}>
        <button onClick={this.handleUpdate}>Update</button>
      </div>
    );
  }
}

在上面的例子中，每次点击按钮时都会更新 key 的值，导致组件强制重新渲染。

方法二：使用 shouldComponentUpdate 方法

在 React 的生命周期方法中，shouldComponentUpdate 方法用于控制组件是否应该重新渲染。你可以手动实现 shouldComponentUpdate 方法，让它在每次 setState 调用时返回 true，这样就可以强制组件重新渲染：

class MyComponent extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    return true;
  }
  
  handleUpdate = () => {
    this.setState({
      value: this.state.value + 1
    });
  }
  
  render() {
    return (
      <div>
        <button onClick={this.handleUpdate}>Update</button>
      </div>
    );
  }
}

在上面的例子中，无论 state 的值发生何种变化，shouldComponentUpdate 方法都会返回 true，导致组件强制重新渲染。

方法三：使用 forceUpdate 方法

在 React 中，每个组件都有一个 forceUpdate 方法，可以手动强制组件重新渲染。你可以在每次 setState 调用后调用 forceUpdate 方法来实现强制重新渲染：

class MyComponent extends React.Component {
  handleUpdate = () => {
    this.setState({
      value: this.state.value + 1
    }, () => {
      this.forceUpdate();
    });
  }
  
  render() {
    return (
      <div>
        <button onClick={this.handleUpdate}>Update</button>
      </div>
    );
  }
}

在上面的例子中，每次 setState 调用后都会调用 forceUpdate 方法，导致组件强制重新渲染。

总结来说，以上三种方法都可以在每次 setState 调用时强制组件重新渲染，你可以根据具体情况选择使用哪种方法来实现。