reactjs - 使用带有对象数组的钩子,最佳实践性能明智
问题描述
我正在尝试使用 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 应显示更改。
解决方案
在构建具有拖放功能的树时,我做过类似的事情。我构建它的方式是拥有一个表示树渲染方式的顶级状态,然后递归地渲染它的分支。
在我看来,你应该做同样的事情,然后,如果这是你想要的代码,递归地渲染你的组件。基本情况是 objectA 没有更多子对象时。
你可以在这里查看代码。
推荐阅读
- python - Excel 文件和 Python 中的数据
- angular - 为动态创建的 HTML 元素创建事件监听器
- r - 如何将向量中的所有项乘以一个值?
- sql - 前缀为“%”的 LIKE 运算符中的索引丢失
- javascript - 功能是如何知道完成的以及哪些汽车放在第一位和第二位?
- excel - 如何根据另一个值突出显示单元格,填充单元格后删除突出显示
- javascript - 创建出现在没有空格的字符串中的单词列表 - 说明单词出现多次的情况
- python - 如何检测唤醒词或是否说出任何词
- mysql - 为什么这个查询不起作用而这个查询起作用?
- material-ui - MenuItem 中的 TextField - onKeyDown 事件干扰 TextField 中的 onChange