时间戳

首页 > 解决方案 > 纯渲染和按钮 onClick 内联 setStates

javascript - 纯渲染和按钮 onClick 内联 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() {
  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.closeModal()
              }}
      />
      </InfoModal>
    </div>
    </div>
  </div>  
  )
}

我知道对于更复杂的组件，这样做的正确方法可能是使用此类作为属性接收的单击处理程序，但是对于简单的用例，在内部设置状态是否真的有一些具体的危害内联点击处理程序？

标签： javascriptreactjs

解决方案

当文档说你不能setState在渲染中时，这意味着setState函数不能在我们渲染后立即调用，而不是 setState 不能写在渲染中

所以当你写

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

您实际上并没有在渲染中调用 setState ，而是在click按钮的操作上调用它，这是两个不同的东西

所以无论你写

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

或者

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

如果你只是在里面设置状态是等价的closeModal

下面是一个不被接受的电话

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

推荐阅读