Question

当用户点击按钮时，我正在调用函数createSession。

在createSession我跑：

this.setState({divClass: 'show'}, function() {
  ...computationally intensive and async stuff 
})

通过将this.state.divClass更改为'show'，应该重新呈现DOM并显示之前具有'hide'类

的div

我已经在render函数中删除了console.log，以确保setState在执行other stuff之前实际上是重新呈现的。即使控制台显示组件已重新渲染，视图也不会更改，直到其他内容完成。

我感到困惑的是，在调用回调之前，组件正在重新呈现，但更改不会显示，直到回调结束。

我使用的是React版本13.0

这是一些代码（对不起，它在咖啡中）：

crypto = require('crypto')

Component = React.createClass({

  render: ->
    <button onClick={@showDiv}>Show Div</button>
    <div className={@state.divDisplay}>
      Wooo
    </div>

  getInitialState: -> {
    divDisplay: 'hide'
  }


  showDiv: ->
    @setState({divDisplay: 'show'}, ->
      salt = crypto.randomBytes(16).toString('hex')

      # this call is not really sync
      crypto.pbkdf2('password', salt, 10000, 32, 'sha1', (error, hash) ->
        console.log error, hash
      )
    )
})

更新（和个人解决方案）

我发现问题不在于React正在将其更新批处理状态 - 我使用的是同步运行的密码哈希库。该库将阻止UI更新。因此即使渲染调用会使console.log状态发生变化，UI也无法更新。

我最终使用Web worker在后台散列密码。这允许UI的其余部分照常运行。

Answer 1

好像你在render()中有拼写错误。应该是@state.divDisplay而不是@divDisplay。

防止React setState进行批处理更新

1 个答案: