React组件相同Props下是否总是跳过渲染？

react 组件在接收相同 props 时是否跳过渲染

尽管对组件传递相同 props 可能会跳过渲染的普遍看法，但实际情况可能更为复杂。

子组件不经过优化

对于没有经过优化的子组件，例如 组件，即使传递相同 props，也不会跳过渲染。这是因为 react 无法确定这些 props 是否实际上是相等的。

经过优化后的子组件

然而，对于使用 react.memo 高阶组件包裹的优化后子组件，情况则有所不同。react.memo 会比较这两个组件的 props，如果它们相等，则跳过子组件的渲染。

这背后的原理是：

• react.memo 会将子组件包裹在另一个组件中，称为“memo 组件”。
• react 会比较 memo 组件的 props，如果它们相等，则返回先前渲染的 memo 组件，而不是重新渲染子组件。
• 只有当 props 发生变化时，才重新渲染子组件。

示例

要使 shippingform 组件跳过重复渲染，你可以将其包裹在 react.memo 中，如下所示：

import React, { memo } from 'react';

const MemoShippingForm = memo(ShippingForm);

这将使 memoshippingform 组件的行为符合普遍预期，即在接收到相同 props 时跳过渲染。

以上就是React组件相同Props下是否总是跳过渲染？的详细内容，更多请关注硕下网其它相关文章！