在 render 方法的 eventHandler 中调用 setState答案

【问题标题】：Calling setState in an eventHandler in the render method在 render 方法的 eventHandler 中调用 setState
【发布时间】：2018-07-24 11:31:47
【问题描述】：

在使用 React 时，我已经理解它，因此在组件的渲染方法中调用 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 的官方教程。正如我们所看到的，一个事件处理程序绑定到 onClick 属性，并且在这个事件处理程序内部，组件的状态发生了变化，因此我们可能会在从渲染方法调用时更新状态。因此，对于为什么可以这样做但没有在 render 方法中显式调用 setState ，我有点迷茫？这与 React 如何包装普通的 html 事件有关吗？

【问题讨论】：

标签： javascript reactjs event-handling render setstate

【解决方案1】：

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

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

回顾一下：

在渲染方法中更新状态的事件处理程序很好，只要它们仅在该事件被触发时被调用。

setState 或直接在 render 函数中调用 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

上面的例子是BAD

【讨论】：

【解决方案2】：

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

当您尝试执行上述操作时。它会导致渲染问题。想想setState() 的目的是什么。显然是为了改变组件的状态。现在想想当你的状态改变时会发生什么。是的，您的组件再次呈现。现在想一想，如果一个组件正在渲染，它再次找到setState()，那么它会导致渲染失败。

现在讨论事件处理程序的问题，这是一个使用的好习惯 setState()

这是一个简单的概念，我们在事件调用中使用引用，这意味着当组件被渲染时，它不会立即触发它，而是等待有人调用。很明显，当有人要调用调用时，只会更改状态，不会对render() 造成任何问题，并且会正常工作

【讨论】：

【解决方案3】：

有函数没有被调用，只是通过了：

<button onClick={this.handleClick}>
         {this.state.isToggleOn ? 'ON' : 'OFF'}
</button>

【讨论】：