javascript - 将对象作为功能组件道具传递的性能影响

Question

我一直很难明确回答这个问题，特别是关于功能组件：

将对象作为属性传递给功能组件与仅传递原始值是否有任何性能差异？比较地图标记的两种实现，例如：

版本 1：为位置传递一个对象：

// position is an object with latitude and longitude
const CustomMapMarker({position, text, children}) => (
    <Fragment>
      <Marker position={position}/>
      <Label>{text}</Label>
      {children}
    </Fragment>
)

版本 2：传递文字并构造对象：

const CustomMapMarker({lat, long, text, children}) => (
  <Fragment>
    <Marker position={{latitude: lat, longitude: long}}/>
    <Label>{text}</Label>
    {children}
  </Fragment>
)

我的理解是，在版本 1 中，React 对每个道具执行严格相等（===）检查，因此道具“位置”在重新渲染时总是会失败，因为对对象的引用会在重新渲染时发生变化使成为。这将导致 CustomMapMarker 重新渲染，因此标签、片段、标记和所有子项将始终重新渲染。

在版本 2 中，由于 lat 和 long 是作为原始值分别传递的，所以只要两个值都不改变，相等性检查就会通过，并且子组件不会重新渲染。

这个对吗？还是我误会了？

标签： javascriptreactjsreact-hooks