Разширени шаблони на React Context API за управление на състоянието

React Context API предоставя мощен механизъм за споделяне на състояние в цялото ви приложение без необходимост от "prop drilling". Докато основната му употреба е лесна, за да се възползвате от пълния му потенциал е необходимо разбиране на разширени шаблони, които могат да се справят със сложни сценарии за управление на състоянието. Тази статия разглежда няколко от тези шаблони, като предлага практически примери и полезни съвети, за да подобрите вашето React програмиране.

Разбиране на ограниченията на основния Context API

Преди да се потопим в разширените шаблони, е от решаващо значение да признаем ограниченията на основния Context API. Въпреки че е подходящ за просто, глобално достъпно състояние, той може да стане тромав и неефективен за сложни приложения с често променящо се състояние. Всеки компонент, който консумира даден контекст, се прерисува всеки път, когато стойността на контекста се промени, дори ако компонентът не зависи от конкретната част от състоянието, която е била актуализирана. Това може да доведе до проблеми с производителността.

Шаблон 1: Съставни компоненти с Context

Шаблонът "Compound Component" (Съставен компонент) подобрява Context API, като създава набор от свързани компоненти, които имплицитно споделят състояние и логика чрез контекст. Този шаблон насърчава повторната употреба и опростява API за потребителите. Това позволява сложната логика да бъде капсулирана с проста имплементация.

Пример: Компонент за табове

Нека илюстрираме това с компонент за табове. Вместо да предаваме пропъртита надолу през множество слоеве, компонентите Tab имплицитно комуникират чрез споделен контекст.

// TabContext.js
import React, { createContext, useContext, useState, ReactNode } from 'react';

interface TabContextType {
  activeTab: string;
  setActiveTab: (tab: string) => void;
}

const TabContext = createContext(undefined);

interface TabProviderProps {
  children: ReactNode;
  defaultTab: string;
}

export const TabProvider: React.FC = ({ children, defaultTab }) => {
  const [activeTab, setActiveTab] = useState(defaultTab);

  const value: TabContextType = {
    activeTab,
    setActiveTab,
  };

  return {children};
};

export const useTabContext = () => {
  const context = useContext(TabContext);
  if (!context) {
    throw new Error('useTabContext must be used within a TabProvider');
  }
  return context;
};

// TabList.js
import React, { ReactNode } from 'react';

interface TabListProps {
  children: ReactNode;
}

export const TabList: React.FC = ({ children }) => {
  return 
{children}
;
};

// Tab.js
import React, { ReactNode } from 'react';
import { useTabContext } from './TabContext';

interface TabProps {
  label: string;
  children: ReactNode;
}

export const Tab: React.FC = ({ label, children }) => {
  const { activeTab, setActiveTab } = useTabContext();
  const isActive = activeTab === label;

  const handleClick = () => {
    setActiveTab(label);
  };

  return (
    
      {label}
    
  );
};

// TabPanel.js
import React, { ReactNode } from 'react';
import { useTabContext } from './TabContext';

interface TabPanelProps {
  label: string;
  children: ReactNode;
}

export const TabPanel: React.FC = ({ label, children }) => {
  const { activeTab } = useTabContext();
  const isActive = activeTab === label;

  return (
    
  );
};

// Употреба
import { TabProvider, TabList, Tab, TabPanel } from './components/Tabs';

function App() {
  return (
    
      
        Tab 1
        Tab 2
        Tab 3
      
      Content for Tab 1
      Content for Tab 2
      Content for Tab 3
    
  );
}

export default App;

Предимства:

• Опростен API за потребителите: Потребителите трябва да се притесняват само за Tab, TabList и TabPanel.
• Имплицитно споделяне на състояние: Компонентите автоматично достъпват и актуализират споделеното състояние.
• Подобрена повторна употреба: Компонентът Tab може лесно да се използва повторно в различни контексти.

Шаблон 2: Динамични контексти

В някои сценарии може да се нуждаете от различни стойности на контекста в зависимост от позицията на компонента в дървото на компонентите или други динамични фактори. Динамичните контексти ви позволяват да създавате и предоставяте стойности на контекста, които варират в зависимост от конкретни условия.

Пример: Теми с динамични контексти

Разгледайте система за теми, в която искате да предоставяте различни теми в зависимост от предпочитанията на потребителя или секцията на приложението, в която се намира. Можем да направим опростен пример със светла и тъмна тема.

// ThemeContext.js
import React, { createContext, useContext, useState, ReactNode } from 'react';

interface Theme {
  background: string;
  color: string;
}

interface ThemeContextType {
  theme: Theme;
  toggleTheme: () => void;
}

const defaultTheme: Theme = {
    background: 'white',
    color: 'black'
};

const darkTheme: Theme = {
    background: 'black',
    color: 'white'
};

const ThemeContext = createContext({
    theme: defaultTheme,
    toggleTheme: () => {}
});

interface ThemeProviderProps {
  children: ReactNode;
}

export const ThemeProvider: React.FC = ({ children }) => {
  const [isDarkTheme, setIsDarkTheme] = useState(false);
  const theme = isDarkTheme ? darkTheme : defaultTheme;

  const toggleTheme = () => {
    setIsDarkTheme(!isDarkTheme);
  };

  const value: ThemeContextType = {
    theme,
    toggleTheme,
  };

  return {children};
};

export const useTheme = () => {
  return useContext(ThemeContext);
};

// Употреба
import { useTheme, ThemeProvider } from './ThemeContext';

function MyComponent() {
  const { theme, toggleTheme } = useTheme();

  return (
    

      
This is a themed component.
      Toggle Theme
    
  );
}

function App() {
  return (
    
      
    
  );
}

export default App;

В този пример ThemeProvider динамично определя темата въз основа на състоянието isDarkTheme. Компонентите, използващи кукичката useTheme, автоматично ще се прерисуват при промяна на темата.

Шаблон 3: Context с useReducer за сложно състояние

За управление на сложна логика на състоянието, комбинирането на Context API с useReducer е отличен подход. useReducer предоставя структуриран начин за актуализиране на състоянието въз основа на действия, а Context API ви позволява да споделяте това състояние и функцията за изпращане (dispatch) в цялото си приложение.

Пример: Прост списък със задачи

// TodoContext.js
import React, { createContext, useContext, useReducer, ReactNode } from 'react';

interface Todo {
  id: number;
  text: string;
  completed: boolean;
}

interface TodoState {
  todos: Todo[];
}

type TodoAction = 
  | { type: 'ADD_TODO'; text: string } 
  | { type: 'TOGGLE_TODO'; id: number } 
  | { type: 'DELETE_TODO'; id: number };

interface TodoContextType {
  state: TodoState;
  dispatch: React.Dispatch;
}

const initialState: TodoState = {
  todos: [],
};

const todoReducer = (state: TodoState, action: TodoAction): TodoState => {
  switch (action.type) {
    case 'ADD_TODO':
      return {
        ...state,
        todos: [...state.todos, { id: Date.now(), text: action.text, completed: false }],
      };
    case 'TOGGLE_TODO':
      return {
        ...state,
        todos: state.todos.map((todo) =>
          todo.id === action.id ? { ...todo, completed: !todo.completed } : todo
        ),
      };
    case 'DELETE_TODO':
      return {
        ...state,
        todos: state.todos.filter((todo) => todo.id !== action.id),
      };
    default:
      return state;
  }
};

const TodoContext = createContext(undefined);

interface TodoProviderProps {
  children: ReactNode;
}

export const TodoProvider: React.FC = ({ children }) => {
  const [state, dispatch] = useReducer(todoReducer, initialState);

  const value: TodoContextType = {
    state,
    dispatch,
  };

  return {children};
};

export const useTodo = () => {
  const context = useContext(TodoContext);
  if (!context) {
    throw new Error('useTodo must be used within a TodoProvider');
  }
  return context;
};

// Употреба
import { useTodo, TodoProvider } from './TodoContext';

function TodoList() {
  const { state, dispatch } = useTodo();

  return (
    

      {state.todos.map((todo) => (
        

          
            {todo.text}
          
           dispatch({ type: 'TOGGLE_TODO', id: todo.id })}>Toggle
           dispatch({ type: 'DELETE_TODO', id: todo.id })}>Delete
        
      ))}
    
  );
}

function AddTodo() {
  const { dispatch } = useTodo();
  const [text, setText] = React.useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    dispatch({ type: 'ADD_TODO', text });
    setText('');
  };

  return (
    

       setText(e.target.value)} />
      Add Todo
    
  );
}

function App() {
  return (
    
      
      
    
  );
}

export default App;

Този шаблон централизира логиката за управление на състоянието в редуцира, което го прави по-лесен за разбиране и тестване. Компонентите могат да изпращат действия за актуализиране на състоянието, без да е необходимо да управляват състоянието директно.

Шаблон 4: Оптимизирани актуализации на Context с `useMemo` и `useCallback`

Както бе споменато по-рано, ключов фактор за производителността при Context API са ненужните прерисувания. Използването на useMemo и useCallback може да предотврати тези прерисувания, като гарантира, че се актуализират само необходимите части от стойността на контекста и че референциите към функциите остават стабилни.

Пример: Оптимизиране на контекст за тема

// OptimizedThemeContext.js
import React, { createContext, useContext, useState, useMemo, useCallback, ReactNode } from 'react';

interface Theme {
  background: string;
  color: string;
}

interface ThemeContextType {
  theme: Theme;
  toggleTheme: () => void;
}

const defaultTheme: Theme = {
    background: 'white',
    color: 'black'
};

const darkTheme: Theme = {
    background: 'black',
    color: 'white'
};

const ThemeContext = createContext({
    theme: defaultTheme,
    toggleTheme: () => {}
});

interface ThemeProviderProps {
  children: ReactNode;
}

export const ThemeProvider: React.FC = ({ children }) => {
  const [isDarkTheme, setIsDarkTheme] = useState(false);
  const theme = isDarkTheme ? darkTheme : defaultTheme;

  const toggleTheme = useCallback(() => {
    setIsDarkTheme(!isDarkTheme);
  }, [isDarkTheme]);

  const value: ThemeContextType = useMemo(() => ({
    theme,
    toggleTheme,
  }), [theme, toggleTheme]);

  return {children};
};

export const useTheme = () => {
  return useContext(ThemeContext);
};

Обяснение:

• useCallback мемоизира функцията toggleTheme. Това гарантира, че референцията към функцията се променя само когато isDarkTheme се промени, предотвратявайки ненужни прерисувания на компоненти, които зависят само от функцията toggleTheme.
• useMemo мемоизира стойността на контекста. Това гарантира, че стойността на контекста се променя само когато се промени или theme, или функцията toggleTheme, което допълнително предотвратява ненужни прерисувания.

Без useCallback, функцията toggleTheme ще се създава наново при всяко рендиране на ThemeProvider, което ще доведе до промяна на value и ще задейства прерисувания във всички консумиращи компоненти, дори ако самата тема не се е променила. useMemo гарантира, че нова value се създава само когато нейните зависимости (theme или toggleTheme) се променят.

Шаблон 5: Селектори за контекст

Селекторите за контекст позволяват на компонентите да се абонират само за определени части от стойността на контекста. Това предотвратява ненужните прерисувания, когато други части на контекста се променят. За постигането на това могат да се използват библиотеки като `use-context-selector` или персонализирани имплементации.

Пример с използване на персонализиран селектор за контекст

// useCustomContextSelector.js
import { useContext, useState, useRef, useEffect } from 'react';

function useCustomContextSelector(
  context: React.Context,
  selector: (value: T) => S
): S {
  const value = useContext(context);
  const [selected, setSelected] = useState(() => selector(value));
  const latestSelector = useRef(selector);
  latestSelector.current = selector;

  useEffect(() => {
    let didUnmount = false;
    let lastSelected = selected;

    const subscription = () => {
      if (didUnmount) {
        return;
      }
      const nextSelected = latestSelector.current(value);
      if (!Object.is(lastSelected, nextSelected)) {
        lastSelected = nextSelected;
        setSelected(nextSelected);
      }
    };

    // Обикновено тук бихте се абонирали за промени в контекста. Тъй като това е опростен
    // пример, ние просто ще извикаме абонамента веднага, за да инициализираме.
    subscription();

    return () => {
      didUnmount = true;
      // Отпишете се от промените в контекста тук, ако е приложимо.
    };
  }, [value]); // Изпълнете ефекта отново, когато стойността на контекста се промени

  return selected;
}

export default useCustomContextSelector;

// ThemeContext.js (Опростено за краткост)
import React, { createContext, useState, ReactNode } from 'react';

interface Theme {
  background: string;
  color: string;
}

interface ThemeContextType {
  theme: Theme;
  setTheme: (newTheme: Theme) => void; 
}

const ThemeContext = createContext(undefined);

interface ThemeProviderProps {
  children: ReactNode;
  initialTheme: Theme;
}

export const ThemeProvider: React.FC = ({ children, initialTheme }) => {
  const [theme, setTheme] = useState(initialTheme);

  const value: ThemeContextType = {
    theme,
    setTheme
  };

  return {children};
};

export const useThemeContext = () => {
    const context = React.useContext(ThemeContext);
    if (!context) {
        throw new Error("useThemeContext must be used within a ThemeProvider");
    }
    return context;
};

export default ThemeContext;

// Употреба
import useCustomContextSelector from './useCustomContextSelector';
import ThemeContext, { ThemeProvider, useThemeContext } from './ThemeContext';

function BackgroundComponent() {
  const background = useCustomContextSelector(ThemeContext, (context) => context.theme.background);
  return 
Background
;
}

function ColorComponent() {
  const color = useCustomContextSelector(ThemeContext, (context) => context.theme.color);
  return 
Color
;
}

function App() {
  const { theme, setTheme } = useThemeContext();

  const toggleTheme = () => {
    setTheme({ background: theme.background === 'white' ? 'black' : 'white', color: theme.color === 'black' ? 'white' : 'black' });
  };

  return (
    
      Toggle Theme
      
      
    
  );
}

export default App;

В този пример BackgroundComponent се прерисува само когато се промени свойството background на темата, а ColorComponent се прерисува само когато се промени свойството color. Това избягва ненужните прерисувания, когато цялата стойност на контекста се променя.

Шаблон 6: Разделяне на действията от състоянието

За по-големи приложения, обмислете разделянето на стойността на контекста на два отделни контекста: един за състоянието и друг за действията (функциите за изпращане). Това може да подобри организацията на кода и възможността за тестване.

Пример: Списък със задачи с отделни контексти за състояние и действия

// TodoStateContext.js
import React, { createContext, useContext, useReducer, ReactNode } from 'react';

interface Todo {
  id: number;
  text: string;
  completed: boolean;
}

interface TodoState {
  todos: Todo[];
}

const initialState: TodoState = {
  todos: [],
};

const TodoStateContext = createContext(initialState);

interface TodoStateProviderProps {
  children: ReactNode;
}

export const TodoStateProvider: React.FC = ({ children }) => {
  const [state] = useReducer(todoReducer, initialState);

  return {children};
};

export const useTodoState = () => {
  return useContext(TodoStateContext);
};

// TodoActionContext.js
import React, { createContext, useContext, Dispatch, ReactNode } from 'react';

type TodoAction = 
  | { type: 'ADD_TODO'; text: string } 
  | { type: 'TOGGLE_TODO'; id: number } 
  | { type: 'DELETE_TODO'; id: number };

const TodoActionContext = createContext | undefined>(undefined);

interface TodoActionProviderProps {
    children: ReactNode;
}

export const TodoActionProvider: React.FC = ({children}) => {
    const [, dispatch] = useReducer(todoReducer, initialState);

    return {children};
};


export const useTodoDispatch = () => {
  const dispatch = useContext(TodoActionContext);
  if (!dispatch) {
    throw new Error('useTodoDispatch must be used within a TodoActionProvider');
  }
  return dispatch;
};

// todoReducer.js
export const todoReducer = (state: TodoState, action: TodoAction): TodoState => {
  switch (action.type) {
    case 'ADD_TODO':
      return {
        ...state,
        todos: [...state.todos, { id: Date.now(), text: action.text, completed: false }],
      };
    case 'TOGGLE_TODO':
      return {
        ...state,
        todos: state.todos.map((todo) =>
          todo.id === action.id ? { ...todo, completed: !todo.completed } : todo
        ),
      };
    case 'DELETE_TODO':
      return {
        ...state,
        todos: state.todos.filter((todo) => todo.id !== action.id),
      };
    default:
      return state;
  }
};

// Употреба
import { useTodoState, TodoStateProvider } from './TodoStateContext';
import { useTodoDispatch, TodoActionProvider } from './TodoActionContext';

function TodoList() {
  const state = useTodoState();

  return (
    

      {state.todos.map((todo) => (
        

          
            {todo.text}
          
          
        
      ))}
    
  );
}

function TodoActions({ todo }) {
  const dispatch = useTodoDispatch();

  return (
    <>
       dispatch({ type: 'TOGGLE_TODO', id: todo.id })}>Toggle
       dispatch({ type: 'DELETE_TODO', id: todo.id })}>Delete
    
  );
}

function AddTodo() {
  const dispatch = useTodoDispatch();
  const [text, setText] = React.useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    dispatch({ type: 'ADD_TODO', text });
    setText('');
  };

  return (
    

       setText(e.target.value)} />
      Add Todo
    
  );
}


function App() {
  return (
    
      
        
        
      
    
  );
}

export default App;

Това разделяне позволява на компонентите да се абонират само за контекста, от който се нуждаят, намалявайки ненужните прерисувания. Също така улеснява модулното тестване на редуцира и на всеки компонент поотделно. Освен това, редът на обвиване на провайдърите има значение. ActionProvider трябва да обвива StateProvider.

Добри практики и съображения

• Контекстът не трябва да замества всички библиотеки за управление на състояние: За много големи и сложни приложения, специализирани библиотеки за управление на състояние като Redux или Zustand все още може да са по-добър избор.
• Избягвайте прекомерната употреба на контекст: Не всяка част от състоянието трябва да бъде в контекст. Използвайте контекста разумно за наистина глобално или широко споделено състояние.
• Тестване на производителността: Винаги измервайте въздействието върху производителността от използването на контекста, особено когато работите с често актуализиращо се състояние.
• Разделяне на кода (Code Splitting): Когато използвате Context API, обмислете разделянето на кода на приложението си на по-малки части. Това е особено важно, когато малка промяна в състоянието предизвиква прерисуване на голяма част от приложението.

Заключение

React Context API е универсален инструмент за управление на състоянието. Като разбирате и прилагате тези разширени шаблони, можете ефективно да управлявате сложно състояние, да оптимизирате производителността и да изграждате по-лесни за поддръжка и мащабируеми React приложения. Не забравяйте да изберете правилния шаблон за вашите специфични нужди и внимателно да обмислите последиците за производителността от използването на контекста.

С развитието на React ще се развиват и добрите практики около Context API. Информираността за новите техники и библиотеки ще ви гарантира, че сте подготвени да се справите с предизвикателствата на управлението на състоянието в съвременната уеб разработка. Обмислете проучването на нововъзникващи шаблони, като използването на контекст със сигнали за още по-фина реактивност.