在React中提升狀態的正確方法

Question

我是React的新手，我試圖製作一個數據網格，現在正在工作，但我覺得我做錯了，下面是詳細信息：

每行都有多個輸入（文本，選擇，按鈕），我們有能力刪除，插入行。

現在我有一個GridComponent將所有數據保存爲一個對象數組。在使其將對象傳遞給RowComponent帶有手柄打電話時輸入的變化：

this.state.data.map((rowdata, index) => 
    <RowComponent key={rowdata.id} rowdata={rowdata} dataindex={index} handleChange={this.handleChange} />) 

問題是，當RowComponent調用handleChange，該GridComponent使用的rowIndex更新對象。但速度很慢，打字時有一點延遲。

爲了解決這個問題，我在RowComponent中聲明瞭一個狀態來控制輸入時的數據，並且只對onBlur事件調用handleChange並且它工作得很好。但是現在我在Grid和Row中有2個狀態，這是正確的方法嗎？

Answer 1

你有沒有profiled你的代碼來識別最慢的部分？

您似乎已經在不使用助焊劑的情況下以可接受的方式完成此操作。這應該是許多頻繁和可預防呈現的問題。主要是要把一些shouldComponentUpdate檢查。除非你使用這些，否則外部化狀態將無濟於事（除了使用基於forceUpdate的方法的庫，例如MobX）。

此外，對於輸入，您應該更喜歡使用debounced事件處理程序，或者具有陰影內部狀態（就像您所做的那樣），而不是立即傳播所有更改。