Context与Reducer
Context
是React
提供的一种跨组件的通信方案,useContext
与useReducer
是在React 16.8
之后提供的Hooks API
,我们可以通过useContext
与useReducer
来完成全局状态管理例如Redux
的轻量级替代方案。
useContext
React Context
适用于父子组件以及隔代组件通信,React Context
提供了一个无需为每层组件手动添加props
就能在组件树间进行数据传递的方法。一般情况下在React
应用中数据是通过props
属性自上而下即由父及子进行传递的,而一旦需要传递的层次过多,那么便会特别麻烦,例如主题配置theme
、地区配置locale
等等。Context
提供了一种在组件之间共享此类值的方式,而不必显式地通过组件树的逐层传递props
。例如React-Router
就是使用这种方式传递数据,这也解释了为什么<Router>
要在所有<Route
>的外面。
当然在这里我们还是要额外讨论下是不是需要使用Context
,使用Context
可能会带来一些性能问题,因为当Context
数据更新时,会导致所有消费Context
的组件以及子组件树中的所有组件都发生re-render
。那么,如果我们需要类似于多层嵌套的结构,应该去如何处理,一种方法是我们直接在当前组件使用已经准备好的props
渲染好组件,再直接将组件传递下去。
export const Page: React.FC<{
user: { name: string; avatar: string };
}> = props => {
const user = props.user;
const Header = (
<>
<span>
<img src={user.avatar}></img>
<span>{user.name}</span>
</span>
<span>...</span>
</>
);
const Body = <></>;
const Footer = <></>;
return (
<>
<Component header={Header} body={Body} footer={Footer}></Component>
</>
);
};
这种对组件的控制反转减少了在应用中要传递的props
数量,这在很多场景下可以使得代码更加干净,使得根组件可以有更多的把控。但是这并不适用于每一个场景,这种将逻辑提升到组件树的更高层次来处理,会使得这些高层组件变得更复杂,并且会强行将低层组件适应这样的形式,这可能不会是你想要的。这样的话,就需要考虑使用Context
了。
说回Context
,Context
提供了类似于服务提供者与消费者模型,在通过React.createContext
创建Context
后,可以通过Context.Provider
来提供数据,最后通过Context.Consumer
来消费数据。在React 16.8
之后,React
提供了useContext
来消费Context
,useContext
接收一个Context
对象并返回该Context
的当前值。
// https://codesandbox.io/s/react-context-reucer-q1ujix?file=/src/store/context.tsx
import React, { createContext } from "react";
export interface ContextProps {
state: {
count: number;
};
}
const defaultContext: ContextProps = {
state: {
count: 1
}
};
export const AppContext = createContext<ContextProps>(defaultContext);
export const AppProvider: React.FC = (props) => {
const { children } = props;
return (
<AppContext.Provider value={defaultContext}>{children}</AppContext.Provider>
);
};
// https://codesandbox.io/s/react-context-reucer-q1ujix?file=/src/App.tsx
import React, { useContext } from "react";
import { AppContext, AppProvider } from "./store/context";
interface Props {}
const Children: React.FC = () => {
const context = useContext(AppContext);
return <div>{context.state.count}</div>;
};
const App: React.FC<Props> = () => {
return (
<AppProvider>
<Children />
</AppProvider>
);
};
export default App;
useReducer
useReducer
是useState
的替代方案,类似于Redux
的使用方法,其接收一个形如(state, action) => newState
的reducer
,并返回当前的state
以及与其配套的dispatch
方法。
const initialState = { count: 0 };
type State = typeof initialState;
const ACTION = {
INCREMENT: "INCREMENT" as const,
SET: "SET" as const,
};
type IncrementAction = {
type: typeof ACTION.INCREMENT;
};
type SetAction = {
type: typeof ACTION.SET;
payload: number;
};
type Action = IncrementAction | SetAction;
function reducer(state: State, action: Action) {
switch (action.type) {
case ACTION.INCREMENT:
return { count: state.count + 1 };
case ACTION.SET:
return { count: action.payload };
default:
throw new Error();
}
}
function Counter() {
const [state, dispatch] = useReducer(reducer, initialState);
return (
<>
Count: {state.count}
<div>
<button onClick={() => dispatch({ type: ACTION.INCREMENT })}>INCREMENT</button>
<button onClick={() => dispatch({ type: ACTION.SET, payload: 10 })}>SET 10</button>
</div>
</>
);
}
或者我们也可以相对简单地去使用useReducer
,例如实现一个useForceUpdate
,当然使用useState
实现也是可以的。
function useForceUpdate() {
const [, forceUpdateByUseReducer] = useReducer<(x: number) => number>(x => x + 1, 0);
const [, forceUpdateByUseState] = useState<Record<string, unknown>>({});
return { forceUpdateByUseReducer, forceUpdateByUseState: () => forceUpdateByUseState({}) };
}
useContext + useReducer
对于状态管理工具而言,我们需要的最基础的就是状态获取与状态更新,并且能够在状态更新的时候更新视图,那么useContext
与useReducer
的组合则完全可以实现这个功能,也就是说,我们可以使用useContext
与useReducer
来实现一个轻量级的redux
。
// https://codesandbox.io/s/react-context-reducer-q1ujix?file=/src/store/reducer.ts
export const initialState = { count: 0 };
type State = typeof initialState;
export const ACTION = {
INCREMENT: "INCREMENT" as const,
SET: "SET" as const
};
type IncrementAction = {
type: typeof ACTION.INCREMENT;
};
type SetAction = {
type: typeof ACTION.SET;
payload: number;
};
export type Action = IncrementAction | SetAction;
export const reducer = (state: State, action: Action) => {
switch (action.type) {
case ACTION.INCREMENT:
return { count: state.count + 1 };
case ACTION.SET:
return { count: action.payload };
default:
throw new Error();
}
};
// https://codesandbox.io/s/react-context-reducer-q1ujix?file=/src/store/context.tsx
import React, { createContext, Dispatch, useReducer } from "react";
import { reducer, initialState, Action } from "./reducer";
export interface ContextProps {
state: {
count: number;
};
dispatch: Dispatch<Action>;
}
const defaultContext: ContextProps = {
state: {
count: 1
},
dispatch: () => void 0
};
export const AppContext = createContext<ContextProps>(defaultContext);
export const AppProvider: React.FC = (props) => {
const { children } = props;
const [state, dispatch] = useReducer(reducer, initialState);
return (
<AppContext.Provider value={{ state, dispatch }}>
{children}
</AppContext.Provider>
);
};
// https://codesandbox.io/s/react-context-reducer-q1ujix?file=/src/App.tsx
import React, { useContext } from "react";
import { AppContext, AppProvider } from "./store/context";
import { ACTION } from "./store/reducer";
interface Props {}
const Children: React.FC = () => {
const { state, dispatch } = useContext(AppContext);
return (
<>
Count: {state.count}
<div>
<button onClick={() => dispatch({ type: ACTION.INCREMENT })}>
INCREMENT
</button>
<button onClick={() => dispatch({ type: ACTION.SET, payload: 10 })}>
SET 10
</button>
</div>
</>
);
};
const App: React.FC<Props> = () => {
return (
<AppProvider>
<Children />
</AppProvider>
);
};
export default App;
我们直接使用Context
与Reducer
来完成状态管理是具有一定优势的,例如这种实现方式比较轻量,且不需要引入第三方库等。当然,也有一定的问题需要去解决,当数据变更时,所有消费Context
的组件都会需要去渲染,当然React
本身就是以多次的re-render
来完成的Virtual DOM
比较由此进行视图更新,在不出现性能问题的情况下这个优化空间并不是很明显,对于这个问题我们也有一定的优化策略:
- 可以完成或者直接使用类似于
useContextSelector
代替useContext
来尽量避免不必要的re-render
,这方面在Redux
中使用还是比较多的。
- 可以使用
React.memo
或者useMemo
的方案来避免不必要的re-render
,通过配合useImmerReducer
也可以在一定程度上缓解re-render
问题。
- 对于不同上下文背景的
Context
进行拆分,用来做到组件按需选用订阅自己的Context
。此外除了层级式按使用场景拆分Context
,一个最佳实践是将多变的和不变的Context
分开,让不变的Context
在外层,多变的Context
在内层。
此外,虽然我们可以直接使用Context
与Reducer
来完成基本的状态管理,我们依然也有着必须使用redux
的理由:
redux
拥有useSelector
这个Hooks
来精确定位组件中的状态变量,来实现按需更新。
redux
拥有独立的redux-devtools
工具来进行状态的调试,拥有可视化的状态跟踪、时间回溯等功能。
redux
拥有丰富的中间件,例如使用redux-thunk
来进行异步操作,redux-toolkit
官方的工具集等。
每日一题
https://github.com/WindrunnerMax/EveryDay
参考
https://zhuanlan.zhihu.com/p/360242077
https://zhuanlan.zhihu.com/p/313983390
https://www.zhihu.com/question/24972880
https://www.zhihu.com/question/335901795
https://juejin.cn/post/6948333466668777502
https://juejin.cn/post/6973977847547297800
https://segmentfault.com/a/1190000042391689
https://segmentfault.com/a/1190000023747431
https://zh-hans.reactjs.org/docs/context.html#gatsby-focus-wrapper
https://stackoverflow.com/questions/67537701/react-topic-context-vs-redux