阻止React setState批处理更新

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更新。因此，即使render调用会console.log状态已更改，UI也无法更新。

我最终使用了一个网络工作者在后台对密码进行散列。这使得UI的其余部分可以照常运行。

Answer 1

您在render()中似乎有拼写错误。应该是@state.divDisplay而不是@divDisplay。