在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事件处理程序，或者具有阴影内部状态（就像您所做的那样），而不是立即传播所有更改。