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

Answer 1

有一个函数没有调用，只通过了:

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

Answer 2

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

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

回顾一下：

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

不好有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

Answer 3

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

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

Now over to your issue of event handler a good practice of using setState()

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

在 render 方法的 eventHandler 中调用 setState

Calling setState in an eventHandler in the render method

javascript

render

event-handling

setstate

reactjs