防止在 onChange Input 时从子组件渲染答案

【问题标题】：prevent rendering from child component when onChange Input防止在 onChange Input 时从子组件渲染
【发布时间】：2021-10-22 04:05:11
【问题描述】：

我一直在尝试通过防止以下示例中的容器组件在每次子组件更新时重新渲染来优化应用程序。输入EditableRow组件onchange时如何预渲染UsersList组件？谢谢。链接代码： https://stackblitz.com/edit/react-ts-llwq51?file=EditableRow.tsx

【问题讨论】：

这能回答你的问题吗？ stackoverflow.com/questions/60669528/…
谢谢你，但没用 :(

标签： reactjs typescript rendering

【解决方案1】：

在您提到的示例中，组件正在重新渲染，因为状态保持在父组件中。因此，当状态更改时，父组件会重新渲染，并且所有依赖于状态的组件都会重新渲染。如果在 EditableRow 组件中移动 'handleEditFormChange' 并在单击保存按钮时触发状态更改（setEditFormData）将防止表单数据更改时重新呈现。

【讨论】：

感谢您的回复，但是当我单击 ReadOnly 组件的按钮编辑时，它会为 editFormData 设置编辑用户的值，如果我在 EditableRow 组件内移动 handleEditFormChange，每次输入 onchange 时，editFormData 状态仍然会发生变化.对不起，我的英语不好:(
是的，当点击编辑按钮时组件会重新渲染，我们关心的是防止输入改变时重新渲染。如果我们看一下“handleEditFormChange”函数，由于“setEditFormData(newFormData)”，每个 onChange 触发器的状态都会更新为新值。因此，您实际上可以在单击保存按钮而不是 onChange 触发器时触发该状态更改。如果将 handleEditFormChange 逻辑移动到 EditableRow 组件或将 setEditFormData 移动到单独的处理程序而不是 onChange 触发器中，则可以实现这一点。
非常感谢，我修好了。