Реагируйте на useContext с помощью «setState»

Question

Недавно я начал использовать Context React Api с useContext Hook. Я заметил, что когда у нас есть переменная состояния, то есть const someState = useState (state, setState), некоторые разработчики передают setSate непосредственно в значениях поставщика, а затем вызывают его в дочерних компонентах. Это хорошая практика?

Когда вы не используете контекст, вы должны создать обработчик для «доступа» к setState в дочернем компоненте. Я все еще использую функции-обработчики и передаю их значениям поставщика, чтобы импортировать их из контекста в дочерних элементах.

Является ли передача setState в контексте хорошей практикой? У меня все еще есть сомнения, поскольку обычно вы не можете передать setState непосредственно в компонент. Есть ли разница в производительности или какие-либо другие недостатки, которые я должен учитывать?

Спасибо.

Answer 1

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

Answer 2

Изменить: я действительно думаю, что ошибся, но я не уверен. Мой ответ действителен на тот случай, если вы напишете своего провайдера, у которого есть состояние. Если вы просто используете провайдера по умолчанию, который предоставляет сеттер, я бы согласился с ответом Амела.

---

Лично я бы не стал этого делать, но это скорее вариант. Однако, как всегда, это во многом зависит от того, какой цели вы хотите достичь.

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

Я бы по-прежнему предпочел передать настраиваемый объект (например, исходящий из useMemo, чтобы избежать ненужных повторных рендеров) с обратным вызовом для установки состояния. Легче расширить, если вы хотите предоставить больше материалов в будущем.

Что-то вроде этого (очень упрощенный пример, который, конечно, не имеет такого смысла, это просто для понимания):

function MyProvider({children}) {
   const [state, setState] = useState(0);
   const provided = useMemo(() => ({
       value: state,
       setValue: (value) => setState(value)
   }, [value]);
   return <MyContext.Provider value={provided}>{children}</MyContext.Provider>;
}

Было бы проще расширить без изменения кода везде, где используется контекст. Тем не менее, я все еще думаю, что нет ничего особенно плохого в том, чтобы передать только сеттер, если это то, чего вы хотите достичь.