Блог

Мне было трудно получить четкий ответ на этот вопрос конкретно в отношении функциональных компонентов:

Есть ли какая-либо разница в производительности при передаче объекта в качестве свойства функциональному компоненту по сравнению с передачей только примитивных значений? Сравните две реализации маркера карты, например:

Версия 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 выполняет строгую проверку равенства (===) для каждой опоры, и поэтому prop ‘position’ всегда не будет выполнять эту проверку при повторном рендеринге, поскольку ссылка на объект изменяется при повторном рендеринге. Это приведет к повторному отображению CustomMapMarker, и поэтому метка, фрагмент, маркер и все дочерние элементы всегда будут повторно отображаться.

В версии 2, поскольку lat и long передаются отдельно как примитивные значения, пока ни одно из значений не изменится, проверка на равенство пройдет, и дочерние компоненты не будут повторно отображаться.

Правильно ли это? Или я неправильно понимаю?