首页 > 解决方案 > 使用带有对象数组的钩子,最佳实践性能明智

问题描述

我正在尝试使用 React Hooks 上下文来更新绑定到对象数组中的属性的视图。我是否需要为每个属性创建单独的状态处理程序或克隆数组以触发渲染。什么是明智的最佳实践表现?

作为我想要实现的一个基本示例:我有以下 objectA

objectA {
   msg: string,
   subObjects: objectA[]
}

应用程序:

App -> Textfield (bound to objectA:msg)
App -> SubComponent -> TextField (x many and each one bound to subObject.msg) 
App -> ViewComponent -> Show objectA with subObjects (update whenever input changes)

每当更新文本字段(主文本字段或任何子组件文本字段)时,objectA 都应相应更新,并且 ViewComponent 应显示更改。

标签: reactjs

解决方案


在构建具有拖放功能的树时,我做过类似的事情。我构建它的方式是拥有一个表示树渲染方式的顶级状态,然后递归地渲染它的分支。

在我看来,你应该做同样的事情,然后,如果这是你想要的代码,递归地渲染你的组件。基本情况是 objectA 没有更多子对象时。

你可以在这里查看代码。


推荐阅读