对一个对象或一组对象的 React 状态管理渲染

Question

我正在学习 React，并开始通过 useState Hook 以 CRUD 形式处理状态。像这样：

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

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

我有两个顾虑：

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

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

表单是只呈现特定的更改输入还是整个表单（所有输入）？如果是所有输入，如何避免？

2) 数组和useState。 如果我没有一个数据对象，而是一个数据对象数组，例如。在 editable table 中，如何为每个数组元素处理 useState？我已经搜索过示例，但它们都是针对单个对象的。

Answer 1

第 1 部分：

根据以下定义： 每次组件状态发生变化时，React 都会安排渲染。 useState 仅更改发生更改的组件。我相信，在您的情况下，会发生 re-render。

为什么轮子已经发明了re-invent？

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

的 Isolate Re-renders 部分中正确可视化它

第 2 部分：

你可以用useState存储一个Array，那个Array可以是一组Objects。

为了从 Array 渲染组件，您可以进一步使用 map 函数。

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

我希望这是有道理的。

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

此致，沙米尔·乌丁

React state management rendering for one object or array of objects