react js - 关键与组件应该更新

Question

我知道如果键值发生变化，在任何 React 组件上使用“key”道具都会重新安装。使用“ComponentShouldUpdate”生命周期方法只会更新组件而不是重新渲染。在什么情况下我们应该使用“key”与“ComponentShouldUpdate”？使用一个是否比其他提供优势？

Answer 1

我认为您应该重新访问文档，因为您所知道的不正确。

• 无论组件中是否有键，组件都会在道具或状态更改时更新

• shouldComponentUpdate 每次在渲染之前都会执行，并告诉组件是否应该重新渲染。对于常规组件，该方法只返回 true。你可以覆盖它。纯组件进行浅层检查。

• 键仅有助于反应知道在渲染/重新渲染期间发生了什么变化。他们不会停止/禁止重新渲染。

您应该使用 shouldComponentUpdate 作为优化。

Answer 2

key和componentDidUpdate用于完全不同的目的。

从文档中，

React 基于两个假设实现了启发式 O(n) 算法：

1. 两种不同类型的元素会产生不同的树。

2. 开发人员可以使用 key prop 提示哪些子元素在不同的渲染中可能是稳定的。

这意味着如果传递给 react 组件的键发生变化，react 将在 DOM 中拆除该组件表示的旧树并创建一个新树（卸载然后重新安装该组件，即使除了键之外没有任何变化）。

另一方面，componentDidUpdate将在组件更新后运行，即特定组件的道具或状态已更改。更新不会导致树从状态中拆除。

在通常情况下，您不应该使用 key 并让 props/state 更改触发componendDidUpdate并在那里处理您的逻辑。Key用于某些情况下，您有大量的状态逻辑并且您希望将状态逻辑重置为初始状态，即从头开始重新安装您的组件。本质上，您应该避免使用 key 来卸载和重新安装组件，因为此操作会影响性能。