Замените реквизиты на useContext в приложении React

Question

Есть ли недостаток в создании объекта состояния в родительском компоненте React и передаче данных вверх и вниз между вложенными компонентами с помощью useContext? Устранит ли это необходимость в реквизите? Похоже, гораздо более простой и логичный способ организации данных. Есть ли какие-либо проблемы с производительностью или другие проблемы с этим методом?

Answer 1

Есть несколько примечаний, которые следует учитывать заранее:

1. Вы не можете передавать данные как Поток данных .

2. Передача реквизита между вложенными компонентами приведет к анти-шаблону - «бурение реквизита»

3. Решение «бурения реквизита»: Context API

Но использование «только контекста» (как вы предлагаете) может привести к созданию анти-паттерна («Контекстный ад»?), Как для при каждой передаче данных вы создаете Context и визуализируете Provider.

Кроме того, основная проблема, которую я вижу при таком подходе, заключается в том, что каждый компонент, использующий контекст, будет отображать при изменении значения поставщика , хотя они могут не использовать значение контекста.

Обратите внимание на визуализацию компонентов 3,4:

const Context = React.createContext();

const Child = ({ id }) => {
  console.log(`rendered`, id);
  return <div>Child with id = {id}</div>;
};

const UsingContext = ({ id }) => {
  useContext(Context);
  console.log(`rendered using Context`, id);
  return <div>Using Context id = {id}</div>;
};

const MemoizedUsingContext = React.memo(UsingContext);
const Memoized = React.memo(Child);

const App = () => {
  const [value, render] = useReducer(0, p => p + 1);

  return (
    <Context.Provider value={value}>
      <Child id={1} />
      <Memoized id={2} />
      <UsingContext id={3} />
      <MemoizedUsingContext id={4} />
      <button onClick={render}>Render</button>
    </Context.Provider>
  );
};