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

文章小白一枚，正在不断学习积累知识，现将学习到的知识记录一下，也是将我的所得分享给大家！而今天这篇文章《React组件相同Props下是否总是跳过渲染？》带大家来了解一下##content_title##，希望对大家的知识积累有所帮助，从而弥补自己的不足，助力实战开发！

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下是否总是跳过渲染？》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！