javascript - 在 render 方法中调用 eventHandler 中的 setState

Question

当使用 React 时，我明白在组件的 render 方法中调用 setState 是不好的做法；相反，保持这个方法的纯粹性。但是，如果我需要根据链接到组件的事件更新状态，我该怎么做？

class Toggle extends React.Component {
   constructor(props) {
    super(props);
    this.state = {isToggleOn: true};

    // This binding is necessary to make `this` work in the callback
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState(prevState => ({
      isToggleOn: !prevState.isToggleOn
    }));
  }

  render() {
    return (
       <button onClick={this.handleClick}>
         {this.state.isToggleOn ? 'ON' : 'OFF'}
       </button>
    );
  }
}

上面的代码来自React官方教程。正如我们所看到的，事件处理程序绑定(bind)到 onClick 属性，并且在该事件处理程序内组件的状态发生更改，因此我们可能会在从渲染方法调用时更新状态。因此，我有点不明白为什么这样做可以，但不能在渲染方法中显式调用 setState ？这与 React 如何包装普通 html 事件有关吗？

Answer 1

不好的做法是在渲染方法中显式调用setState，因为渲染方法应该能够运行多次而不会产生任何副作用(不会影响渲染本身之外的任何内容)

在上面的代码块中，setState绑定(bind)到一个点击处理程序，这意味着它仅在单击按钮时调用，而不是在调用渲染方法时调用，所以这完全是很好。

回顾一下:

可以使用事件处理程序来更新渲染方法中的状态，只要它们仅在该事件触发时调用即可。

在 render 函数中使用 setState 或直接调用 setState 的函数不好。

示例

doSomthing = () => {
  this.setState({ foo: 'bar' });
}

render() {
  return (
    <button onClick={this.doSomething}>Click Me</button>
  );
}
// this code is GOOD

上面的例子OK

doSomething = () => {
  this.setState({ foo: 'bar' });
}

render() {
  this.doSomething();
  return (
    <button>Click Me</button>
  );
}
// this code is BAD

上面的例子不好