时间戳

首页 > 解决方案 > 反应组件组成但令人困惑

reactjs - 反应组件组成但令人困惑

问题描述

所以我在这里有一个代码片段，基本上展示了Dan 提到的想法，即提升内容以自然地提高性能并编写更清晰的代码。在 InputField 组件中，Button 总是渲染，这不是我想要的行为，它应该跳过渲染 Button 组件。所以它应该做的是跳过渲染，因为 Button 是 inputfield 的子道具，如果子道具没有改变， react 将跳过渲染。

Dan 解释的类似概念示例：“当颜色改变时，ColorPicker 会重新渲染。但它仍然具有上次从 App 获得的相同 children 道具，因此 React 不会访问该子树”

所以我在这里很困惑，是不是多个children props 的问题，因为InputField 有value，onChange，children props，其中一个变了，react 决定更新其他的？我这里有一个例子，有点证明这不是多个道具的问题。

编辑：后续问题，在现实世界中，顶级组件必须具有各种 useState、状态更新等。这是否意味着“提升内容”（组件组合）在现实世界中不实用？只是从节省一些渲染算力的角度来看。（我们知道它还有其他好处，例如帮助进行一些道具钻探）是否有任何现实世界的实现，代码示例？

标签： reactjscomponentsstaterendercomposition

解决方案

感谢@Jacob Smit 在评论中。解决了我的问题。我的 Button 组件在组件结构中仍然是两个低，“提升内容”的方式是在代码中提升内容（组件），这样当您在较低组件中 setState() 时，它不会影响该内容(component).so 下层组件保留了一定要向下传递的 props。在这里，正如 Jacob 所说，我的 setState() 正在触发 Button 和 InputField 的重新渲染，因此 Button 将被渲染。

推荐阅读