反应组件组成但令人困惑

Posted 2023-02-23

【中文标题】反应组件组成但令人困惑

【英文标题】：react component composition but confusing

【发布时间】：2021-12-18 05:46:54

【问题描述】：

所以我有一个代码 sn-p here 基本上呈现了idea Dan 提到的内容，即提升内容以自然地提高性能并编写更简洁的代码。 在 InputField 组件中，Button 总是渲染，这不是我想要的行为，它应该跳过渲染 Button 组件。所以它应该做的是跳过渲染，因为 Button 是 inputfield 的子道具，如果子道具没有改变， react 会跳过渲染。

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

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

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

【问题讨论】：

您的Button 组件仍然很低，App 组件中的useState 导致Button 和InputField 重新渲染，要解决此问题，您需要一个在组件之间，以便Button 可以高于useState。 codesandbox.io/s/holy-tdd-4uq7s?file=/src/index.js

@JacobSmit 谢谢！只是好奇，因为在现实世界中，***组件必须具有各种 useState、状态更新等。这是否意味着“提升内容”（组件组合）在现实世界中不实用？只是从节省一些渲染算力的角度来看。 （我们知道它还有其他好处，例如帮助进行一些道具钻孔）

这取决于具体情况，有时提升内容而不重新渲染组件是可行的。根据您的应用程序、所需的性能等，仅使用重新渲染可能更容易，对于没有大量计算的简单组件在大多数情况下应该是微不足道的。

【参考方案1】：

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