При использовании компонентов React в сочетании с Context вы можете оптимизировать рендеринг, обернув ваш компонент React в React.memo сразу после поставщика контекста. Это позволит избежать ненужных повторных рендеров.
Вот несколько примеров того, как повторное отображение работает с Context:
// App (ContextProvider) > A > B > C const App = () => { return ( <AppContext.Provider> <ComponentA /> </AppContext.Provider> ); }; const ComponentA = () => <ComponentB />; const ComponentB = () => <ComponentC />; const ComponentC = () => null;
В этом примере, если компонент App перерендерится, все компоненты внутри него также перерендерятся, независимо от того, изменились ли их реквизиты.
Чтобы предотвратить повторное отображение всех компонентов ComponentA, ComponentB и ComponentC при повторном отображении компонента App, вы можете использовать React.memo следующим образом:
// App (ContextProvider) const App = () => { return ( <AppContext.Provider> <ComponentA /> </AppContext.Provider> ); }; const ComponentA = React.memo(() => <ComponentB />); const ComponentB = () => <ComponentC />; const ComponentC = () => null;
// App (ContextProvider) -> C const App = () => { const value = {a: 'hi', b: 'bye'}; return ( <AppContext.Provider value = {value}> <ComponentA /> </AppContext.Provider> ); }; const ComponentA = React.memo(() => <ComponentB />); const ComponentB = () => <ComponentC />; const ComponentC = () => { const contextValue = useContext(AppContext); return null; };
В этом примере, несмотря на то, что значение провайдера не меняется, компонентС перерисовывается. Это происходит потому, что в JavaScript истинно следующее утверждение:
{a: 'hi', b: 'bye'} !== {a: 'hi', b: 'bye'}.
Проблема в примере 3 может быть решена с помощью хука useMemo из React следующим образом.
// App (ContextProvider) const App = () => { const a = 'hi'; const b = 'bye'; const value = useMemo(() => ({a, b}), [a, b]); return ( <AppContext.Provider value = {value}> <ComponentA /> </AppContext.Provider> ); }; const ComponentA = React.memo(() => <ComponentB />); const ComponentB = () => <ComponentC />; const ComponentC = () => { const contextValue = useContext(AppContext); return null; };
При такой реализации, если приложение повторно рендерится по любой другой причине, которая не изменяет ни одно из значений 'a' или 'b', последовательность повторных рендерингов будет следующей:
App (ContextProvider)
Это приводит к желаемому результату, позволяя избежать ненужного повторного рендеринга ComponentC. Благодаря использованию useMemo гарантируется одинаковая ссылка на объект для переменной value. Поскольку этой переменной присваивается значение провайдера, контекст определяется как неизменный, и потребители не уведомляются.
В этой статье блога представлена информация об оптимизации рендеринга при использовании компонентов React с Context с помощью React.memo. Она включает примеры того, как повторный рендеринг работает с Context и как предотвратить ненужный повторный рендеринг с помощью React.memo.
20.08.2023 18:21
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в 2023-2024 годах? Или это полная лажа?".
20.08.2023 17:46
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
19.08.2023 18:39
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в частности, магию поплавков и гибкость flexbox.
19.08.2023 17:22
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для чтения благодаря своей простоте. Кроме того, мы всегда хотим проверить самые последние возможности в наших проектах!
18.08.2023 20:33
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий их языку и культуре.
14.08.2023 14:49
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип предназначен для представления неделимого значения.