Какой самый эффективный способ получить детей по индексу в React

Question

Предположим Component, что я хочу получить доступ к 3-му ребенку.

<Component>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</Component>

На самом деле я нашел 3 способа сделать это:

1) С React.children.map

const Component = ({children}) => 
  <>{React.Children.map(children, (child, i) => i === 2 && child)}</>

Работает нормально, но многословно и в O (n) .

2) С React.Children.toArray

const Component = ({children}) =>
  <>{React.Children.toArray(children)[2]}</>

Меньше многословно, но я не знаю о сложности. Это O (1) ? И если да, то достаточно ли это эффективно?

3) Direclty использует дочерние элементы как массив

const Component = ({children}) => <>{children[2]}</>

На первый взгляд кажется идеальным, но он не будет работать нормально, если потомки передаются как массив. Пример, если я написал что-то вроде этого:

<Component>
  <div>1</div>      
  {[2, 3].map(i => <div key={i}>{i}</div>)}
</Component>

Component будет предполагать, что у него будет только 2 дочерних элемента, второй из которых является массивом из 2 дочерних элементов. Следовательно, children[2] не будет существовать.

Итак, мой вопрос: каков наилучший способ получить детей по индексу? Является ли метод toArray более эффективным, чем map? Или есть способ решить проблему с параметром 3) ?

Answer 1

Нет большой разницы между использованием toArray или map метода из React.Children. Ниже приведены соответствующие фрагменты кода из базы кодов React

.

function toArray(children) {
  const result = [];
  mapIntoWithKeyPrefixInternal(children, result, null, child => child);
  return result;
}

function mapChildren(children, func, context) {
  if (children == null) {
    return children;
  }
  const result = [];
  mapIntoWithKeyPrefixInternal(children, result, null, func, context);
  return result;
}

Как видите, если вы передадите дочерние элементы как нулевые или если вы не передадите никаких дочерних элементов, React.Children.map вернет вам нулевое или неопределенное значение соответственно. Однако в любом таком случае toArray всегда возвращает вам массив, поэтому вы можете безопасно использовать <>{React.Children.toArray(children)[3]}</>

Также при использовании

<>{React.Children.map(children, (child, i) => i === 2 && child)}</>

это вернет вам [false, false, Object] что не соответствует вашим намерениям. Однако вы можете написать

<>{React.Children.map(children, (child, i) => i === 2 ? child: null)}</>