在Redux中處理大量文本輸入更改

Question

我正在Redux中構建一個小應用程序，並且想知道所有狀態更改應通過Redux減速器&傳播到中央存儲區。

例如，它是單一的文本輸入自己的組件（通過setState）中管理自己的狀態更好？或者，應該針對這些投入中的每一次關鍵事件而採取行動。如果是這樣，我想知道是否會有性能問題。

總體而言，有什麼處理未成年人用戶界面更新，如終極版按鍵事件的最佳做法？

Answer 1

Redux用於以可預測的方式管理狀態。狀態意味着數據，並且同樣適用於來自API或客戶端UI的數據。

在一個小應用程序中，我會從的所有狀態開始，以爲例，直到我真的遇到性能問題。這包括視覺狀態，菜單，用戶輸入。

可以對redux狀態樹進行高度優化，以處理大量的輸入和通過reducers進行更新。很大程度上是因爲我們正在處理通過引用傳遞的不可變對象。

我寫的生產應用與終極版，可以在WebSockets的處理大量更新每100ms，並有像視覺最新組件複雜的菜單操作管理狀態，他們都一起玩很好。

爲了增強你的信心，這裏有一個tweet from Dan Abramov。

ps。最糟糕的情況是，如果你開始看到輸入的性能問題，你可以去掉輸入字段。

Answer 2

如果你不需要輸入組件以外的這些輸入值，你可以將它們存儲在本地狀態，而不是使用Redux的狀態。

在大多數情況下，全局復位狀態應該包含許多組件使用的數據。

Answer 3

如果在您的應用程序中全局需要文本輸入值，最好將它們存儲在redux存儲區中。否則，您可以將其存儲在本地狀態中，例如，如果您的應用程序是react-redux應用程序，則使用rect組件狀態。

是否在每個按鍵中分派一個動作，這取決於您的用例。假設你在描述字段中寫了一些東西。描述可能很長，您不需要爲每次擊鍵時的服務調用分派一個操作，因爲這會導致大量不必要的服務調用。 解決此問題的一種方法是僅在用戶在擊鍵之間暫停時才發送操作。 Debounce是一個可以用來覆蓋這種場景的JavaScript插件。使用去抖動，您可以配置調度操作的延遲。您可以在這裏查看debounce插件：https://github.com/component/debounce。