防止批量更新中的setState

當用戶單擊某個按鈕時，我正在調用功能createSession。防止批量更新中的setState

在createSession我運行：

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

通過改變this.state.divClass到'show'的DOM應該被重新繪製，並顯示一個div以前有一類'hide'

我已經掉了在渲染函數中使用console.log來確保setState實際上是在它執行other stuff之前重新渲染的。即使控制檯顯示組件已重新渲染，視圖也不會更改，除非其他內容完成。

我很困惑的是組件在調用回調之前被重新渲染，但只有在回調完成之後纔會顯示更改。

我使用的是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 
    ) 
    ) 
})

UPDATE（和個人解決方案）

我發現這個問題並不是React將其更新分配給狀態 - 我使用的密碼哈希庫運行同步。該庫會阻止用戶界面更新。所以即使渲染調用將console.log狀態改變了，用戶界面也無法更新。

我結束了使用網絡工作者在後臺散列密碼。這使得其餘的UI可以照常運行。

來源

2015-03-31 BezR

請包含足夠的代碼，以便我們重現問題。 – FakeRainBrigand 2015-03-31 05:24:21

看來你有錯字render()。應該是@state.divDisplay而不是@divDisplay。

來源

2015-03-31 10:18:35

謝謝，我只是修正了錯字。但這只是一個例子，而不是我正在使用的實際代碼。 – BezR 2015-04-01 17:23:36

我無法用您提供的代碼重現所描述的行爲。這對我來說可以。你能否提供[最小可重現的例子]（http://sscce.org/）？ – 2015-04-02 05:31:46

防止批量更新中的setState

回答

相關問題