Javascript 纯渲染和按钮onClick inline setStates

当谈到React中的纯渲染方法以及渲染内部的设置状态是如何成为一种严重的反模式时，我们对此的讨论有多严格？我得到，如果我在一个渲染函数中执行setState，它不需要任何用户输入，它可以创建无限循环并重新渲染

我不明白的是，当编写从用户接收输入的页面元素时，这个规则也适用吗？我的意思是，这两种为按钮编写简单单击处理程序的方法有什么区别：

render() {
  return(
    <div className="container-fluid info-modal">
      <div className="row">
        <div className="col col-12">
          <InfoModal active={this.state.modalActive}>
            <h2>Fine dining recipes</h2>
            <p>Here you can publish your fine dining recipes. Don't forget to 
            include every ingredient needed!</p>
            <Button
              title="ok"
              onClick={() => {
                this.setState({ modalActive: false })
              }}
            />
          </InfoModal>
        </div>
      </div>
    </div>
  )
} 

render（）{
返回(
美食食谱
在这里你可以发布你的美食食谱。别忘了
包括所有需要的成分

{
this.setState（{modalActive:false}）
}}
/>
)
} 

vs

render（）{
返回(
美食食谱
在这里你可以发布你的美食食谱。别忘了
包括所有需要的成分

{
this.closeModal（）
}}
/>
)
}

---

对于更复杂的组件，可能正确的方法是使用这个类作为属性接收的单击处理程序，但是对于简单的用例，在内联单击处理程序中设置状态真的有什么具体的危害吗？

当文档说不能在渲染中

setState

时，这意味着渲染后不能立即调用

setState

函数，也不是说不能在渲染中写入setState

所以当你写作的时候

 <Button
      title="ok"
      onClick={() => {
         this.setState({ modalActive: false })
     }}
 />

或

---

onclick不应该有引号-它应该用

onclick={（）=>{}

包装，老实说，这两种方法都在ReactJust中被接受，只是为了添加到您的答案中。钩子也是如此。不应在渲染中调用任何挂钩。最后一个例子实际上指出了两件“不好”的事情。1.

onClick

的内容在呈现时执行，因为它具有

（）

，这意味着函数返回的内容实际上被分配给

onClick

。2. <代码>设置状态是正在执行的导致渲染循环的状态。

 <Button
      title="ok"
      onClick={() => {
         this.setState({ modalActive: false })
     }}
 />

 <Button
      title="ok"
      onClick={() => {
          this.closeModal()
      }}
  />

<Button
    title="ok"
    onClick={() => {
        this.setState({ modalActive: false })
    }}
 />

<Button
      title="ok"
      onClick={this.setState({ modalActive: false })}
 />