javascript / expert
Snippet
Kontext-Optimierung durch Splitting und Memoization
Um unnötige Re-Renders in großen Kontext-Bäumen zu verhindern, teilen Sie den Status und den Dispatch in zwei separate Kontexte auf. Komponenten, die nur Aktionen auslösen müssen, werden nicht neu gerendert, wenn sich die Statuswerte ändern.
snippet.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const StateContext = React.createContext();const DispatchContext = React.createContext();function AppProvider({ children }) {const [state, dispatch] = React.useReducer(reducer, initialState);return (<DispatchContext.Provider value={dispatch}><StateContext.Provider value={state}>{children}</StateContext.Provider></DispatchContext.Provider>);}const useAppState = () => React.useContext(StateContext);const useDispatch = () => React.useContext(DispatchContext);
react
Erklärung
1
const DispatchContext = React.createContext();
Erstellt einen Kontext speziell für die Dispatch-Funktion, die sich nie ändert.
2
const useDispatch = () => React.useContext(DispatchContext);
Benutzerdefinierter Hook für den Zugriff auf Dispatch, ohne Statusänderungen zu abonnieren.