Использование Context API против CloneElement для передачи реквизита для прямого потомства

Question

Итак, у меня есть два компонента, один всегда будет прямым потомком другого.Я хочу передать реквизит от родительского компонента ребенку.Может быть более одного дочернего компонента.Есть два способа достичь этого.

React.Children.map(children, (child) =>
  React.cloneElement(child, { someProp: 'value' })
)

или использование Context API

<Context.Provider value={{ someProp: 'value' }}>
  {this.props.children}
</Context.Provider>

Оба приведут к одной и той же структуре DOM, однако Context API немного больше кода иприведет к большему количеству компонентов React.

Итак, какой из них более ориентирован на производительность и рекомендуется.Я не смог найти никакого обсуждения, связанного с этим сравнением, поэтому спрашиваю здесь.

Answer 1

Использование API контекста кажется излишним для передачи данных прямому потомку.

Если ребенок знает, что данные будут передаваться от родителя (это предполагается использованием <Context.Consumer>), он может напрямую использовать шаблон рендеринга, например:

<Parent>{passedProps => <Child {...passedProps}/>}</Parent>

и

{children({ someProp: 'value' })};

Answer 2

Новый API-интерфейс Context действительно интересен и помогает нам разобраться с раскладыванием пропеллера и делает использование шаблона реквизита рендеринга более понятным, но он имеет некоторые «проблемы с производительностью» из-за ненужного повторного рендеринга.На самом деле, это не проблема, поскольку API предоставляет способ работы с этим ненужным повторным рендерингом. см. Ссылку, если это поможет и api *, оптимизация производительности в контексте