在没有重新渲染和性能问题的情况下，在react中收集数据的正确方法是什么?

Question

想象我们有很多输入字段和像这样庞大的状态来更新它

const [data, setData] = useState({
firstName: "",
lastName: "",
gender: "",
dateOfBirth: "",
nationalCode: "",
mobileNum: "",
organizationalRuling: "",
startOrder: null,
endOrder: null,
afterOrderEnd: [],
cardNum1: "",
bankName1: "",
cardNum2: "",
bankName2: "",
shabaNum: null,
country: "",
state: "",
city: "",
address: "",
zipCode: null,
phoneNum: "",
commissionFor: [],
commissionPercentage: [],
salaryFor: [],
salaryPrice: [],
offFor: [],
offPercentage: [],
username: "",
password: "",
passwordRepeat: "",
userStatus: "activeUser",
});

，我们把这个大数据分成6个部分例如BankInfo, AccountInfo, AddressInfo, and…我们在这个组件中更新状态，我们使用ContextAPI来传递状态

<DataContext.Provider value={{ data, setData }}>
<ListProfile />
<OrganizationalRuling />
<BankInfo />
<Address />
<Commission />
<AccountInfo />
</DataContext.Provider>

在这个实现中一切都很好，很干净。

,

每次用户开始输入一些东西时，整个组件都会重新渲染，在输入时有明显的延迟和延迟。

所以我认为one way是用onBlur更新状态，但我认为这也有点慢。another way是在每个子组件中有单独的状态，例如BankInfo组件有一个单独的状态和lift the state up，但我不知道如何做到这一点，使它成为single Object，所以我可以send it the backend我们如何在不重新渲染所有内容的情况下提高这样的数据的性能?在这种情况下，收集数据的正确方法是什么?

谢谢你的帮助。

Answer 1

如果您必须在这个更高的级别管理每个组件的状态(在每个组件之间使用数据执行操作)，那么我建议您直接通过props将这些数据传递给每个组件，而不是使用上下文提供程序。

上下文API应该用来防止这样一种情况，即你将相同的prop传递给所有组件(通常是不经常更改的prop)。我通常把它与auth或user联系在一起。

对声明性状态管理进行修改，将极大地提高应用程序的可读性，并允许呈现器决定部分呈现哪些组件。也就是说，只有必要的修改才会被做，因为你已经正确地连接了应用程序的响应元素

下面是一个代码示例:

function Overview() {
...
function submit() {
}
return (
<>
<BankInfo name={bankName1} ... onChange={submit} />
...
</>
)
}
function BankInfo({name, ..., onChange}) {
return (
<>
<input value={name} onChange={onChange} />
...
</>
)
}