为一个对象或对象数组的状态管理呈现

Question

我正在学习React，并开始通过useStateHook在CRUD形式中处理状态。像这样:

const [data, setData] = useState({});

其中data是包含表单状态的对象，而他的props是输入的值。

我有两个顾虑:

1)不必要的渲染如果输入发生变化(onChange或onBlur事件)，我通过典型的handleChanged函数更新状态，例如:

const handleChanged = (e) => {
setData(...data, [e.target.name]: e.target.value)
});

表单是只呈现特定更改的输入，还是呈现整个表单(所有输入)?如果它是针对所有输入的，如何避免呢?

2) Arrays and useState.如果不是单个数据对象，而是一个数据对象数组，例如:在一个可编辑的表，useState如何处理每个数组元素?我已经搜索了一些例子，但它们都是针对单个对象的。

Answer 1

第一部分:

根据以下定义:React会在每次组件状态改变时安排一次渲染。useState仅更改发生更改的组件。在你的情况下，我相信，重新渲染发生。

既然轮子已经发明了，为什么还要重新发明呢?

如果你关心表单，你应该探索这个库:https://react-hook-form.com/

此外，您将能够在https://react-hook-form.com/

的隔离重新呈现

部分中正确地可视化它第2部分:

您可以使用useState来存储Array,Array可以是Objects的集合。

为了从数组中呈现组件，您可以进一步使用map函数。

或者如果你只是想访问数据，那么你可以使用索引值来访问对象。

我希望，这是有意义的。

如果您所关注的整个代码片段被共享，那么解释可能会更好。

问候,Shameel Uddin