一个组件比较多的页面，即使更新一个小组件，也必须走一遍整个页面的 render ，怎么处理呢？

[sillydaddy]

现在有一个 react 构造的页面，页面上有很多元素。整个页面是根据一个数据文档(data_document)，自顶向下构造的构造的。
自顶向下就是说，使用 data_document.dataA 构造组件 A，data_document.dataB 构造组件 B 。。然后使用 dataA 里面的子 dataAA，构造组件 A 里的子组件 AA 。

这里有个问题是，当我操作了页面里面很小的一个组件，从而修改了这个组件对应的 data 时，我需要触发页面的根组件 render()，将整个页面构造一遍。我的思考是，这些页面里的所有组件，都是由 data_document 里的某些 data 完全决定的，它们显示状态变了，就意味着 data_document 变了，反过来也是。所有的组件都是没有额外的状态 state 的。所以想要操作某个组件改变它的状态，就要改变 data_document 的某些 data，将新 data 作为 props 再传递给它。由于整个页面的构建是自顶向下构造的，想要改变传递给某个子组件的 props，就需要跑页面根组件的 render()。

虽然 render 只是重新构造整个虚拟 dom 树而不是真实 dom 树，但如果组件多的话，跑一遍也很费时间。对于这种情况，有什么好的思路吗？
( 这里要注意的是，由于多个组件可能会用同一个数据，所以每次的修改都要即时反馈到 data_document 中，这样的话让被修改的组件只更新自己的 state 就行不通了。)

[meteor957]

引用类型用 useMemo 包裹，配合 React.memo

用 react 肯定避免不了 re-render，但是渲染耗时大的组件，应该要做性能优化去减少重复渲染。

普通的组件像 button 那种，不需太关心。

[66beta]

所以为什么小尤同志敢说 vue 性能略高于 react~

[xutao881]

在你的业务场景还没有触及到 react 性能瓶颈的时候，没必要去担心 render 的性能问题，写 class 组件确实有这种层层传递 prop 的问题，更多的时候你应该考虑怎么去提取复杂 prop 到全局管理，如果还是觉得不爽，用 hooks 吧，监听父级变动可以很优雅。

[aaronlam]

楼主自己根据大伙的答案总结还是很到位，很赞！