React中對象的狀態如何更新準確地工作

我正在學習React，並試圖圍繞語法和概念進行思考。從教程陣營中提到：React中對象的狀態如何更新準確地工作

狀態更新可以是異步

陣營5批次多的setState（）調用成性能更新一次。

因爲this.props和this.state可能會異步更新，所以不應該依賴它們的值來計算下一個狀態。

我的問題是，如果this.state沒有隨時更新，我們可以依靠它來顯示正確的信息嗎？如果我的理解是正確的，React會出於性能原因分批更新這個狀態，但它會影響應用程序的準確性嗎？ React如何創建這些批次以及它們何時得到應用？

2017-01-23 poushy

只要合理，React會盡快呈現組件狀態 - 例如，在事件處理程序中，您可以更改多個組件的狀態，但是單獨使用新狀態呈現它們是不合理的 - 相反，React將會批處理在事件處理程序完成後更新和渲染組件。

在更新和渲染之間正確編寫的應用程序延遲對於用戶來說是不明顯的。從開發人員的角度來看，異步更新可能會引入難以發現的錯誤（使用Redux，其中每個狀態更新都基於以前的狀態應該可以解決其中的大部分問題;當然，在純React中也可以使用帶回調的setState()）。

來源

2017-01-23 21:27:42 nobody

謝謝您的回覆，我明白了，因此它會進行邏輯分組，並且如果您在它以某種方式不會導致問題。就像你在事件處理程序中提到的一樣，所以你不能更新某個對象的狀態，然後使用該狀態來改變同一處理程序中的其他東西？您提到Redux，爲此包含另一個庫或使用回調來完成是否理想？ – poushy

請記住，你知道新的狀態 - 你正在設置它（只是不要通過this.state來訪問它）。還要記住，您可以將回調作爲第二個參數傳遞給'setState（）'，它將在狀態更新後調用。然而更好的選擇是使用組件的componentDidUpdate方法。 Redux強制特定架構 - 檢查它是否適合您的需求。就我個人而言，我認爲這對於複雜的SPA很好，但對於簡單的應用來說過於複雜。 – nobody

感謝您的意見，他們真的很有幫助。 – poushy

React使用狀態來幫助用JavaScript管理每一個組件。由於國家可以隨時改變，所以它非常靈活。一個缺點是，由於它具有靈活性，因此當存在多個對象時可能很難管理狀態。將組件保存在易於管理的組件中是非常理想的，這樣您就可以定位狀態的行爲不像預期的那樣。

爲防止數據意外變異，工具/概念（如ImmutableJs或Redux）已與React結合使用，使管理工具更有效率。

Redux控制/組織通過單向流動狀態改變的地方。 http://redux.js.org/docs/basics/UsageWithReact.html

ImmutableJs使用持久性不可變數據結構來鎖定狀態以防止意外的更改。 https://facebook.github.io/immutable-js/

來源

2017-01-23 21:28:34 Gary

謝謝，我也會研究這些庫。 – poushy

狀態是異步的並不意味着你不能依賴它，但你應該小心如何以及何時使用你所在的信息。

例如：

this.setState({charCount: 5}); 
console.log(this.state.charCount) // may not be 5 as setState is asynchronous

在另一方面，你可以使用回調，以確保你有一個正確的值：

this.setState({charCount: 5},() => { console.log(this.state.charCount) });

一般的做法是，你應該嘗試儘量少用只有在用戶界面需要更改時才能使用它。如果您需要處理或操作數據而無需更改UI，請儘量避免使用狀態並使用此示例：Lifting State Up

來源

2017-01-23 21:34:12 Shota

謝謝我會查看建議的文章。 – poushy

React中對象的狀態如何更新準確地工作

回答

相關問題