在context这个高级API出来之前，数据流向只能自上而下，从父组件一层一层的往下传递。如上图左。
如果仅仅只支持这样的方式，在实践中会遇到很多麻烦。
例如一个数据要传到使用它的组件，中间还要经历3个组件。我们就不得不在这三个中间组件中处理该数据的传递逻辑。但其实对于这三个组件而言，该数据毫无用处。
context的出现，就是为了解决这样的痛点。context能够让数据直达需要它的那一个子组件。如上图右。
1
React提供了一个名为useContext的组件，能够让我们在hooks组件中使用context的能力。
在React中，只有父子组件才能相互交互。那如果不相干的两个组件如何才能做到数据交互呢？
让他们拥有共同的父组件即可。
因此，一个大型项目中，通常的做法就是在项目的最顶层自定义一个父组件Provider。并把所有可能会全局使用的数据与状态放在该组件中来维护。当项目中所有的组件都是Provider的子组件之后，那相互之间的数据交互就不再是问题。
例如在Taro项目中使用Redux，顶层组件就是自定义的Provider。
// src/app.js import Taro, { Component } from '@tarojs/taro' import { Provider } from '@tarojs/redux' import configStore from './store' import Index from './pages/index' import './app.scss' const store = configStore() class App extends Component { config = { pages: [ 'pages/index/index' ], window: { navigationBarTitleText: 'Test' } } render() { return ( <Provider store={store}> <Index /> </Provider> ) } } Taro.render(<App />, document.getElementById('app'))
2
这里仍然以最简单的计数组件为例。跟大家分享一下如何使用context。
首先，我们要自定义一个顶层组件，Provider。
使用React提供的api createContext能够创建一个context对象。
import React, { createContext } from 'react'; // 因为在别的组件中使用useContext时， // 需要用到这个context对象，因此对外抛出 export const context = createContext({});
在context对象中，提供了一个自带的Provider组件。
该组件接收一个value作为参数，我们将自定义的状态与数据通过该参数传入context对象。
<context.Provider value={/* 自定义状态 */}>
我们在别的组件中，可以使用useContext订阅这个context对象。这样，在该context对象中的数据变化，其他组件就能接收到了。
此时，我们想要自定义的状态很简单，就是一个counter数据。
export function CounterProvider({ children }: Props) { const [counter, setCounter] = useState(0); const value = { counter, setCounter, increment: () => setCounter(counter + 1), decrement: () => setCounter(counter - 1) } return ( < context.Provider value={value}>{children}</context.Provider> ) }
我们自己定义好的顶层父组件就这样搞定了。完整代码如下：
import React, { createContext, ReactNode, useState, Dispatch } from 'react'; interface Injected { counter: number, setCounter: Dispatch<any>, increment: () => any, decrement: () => any } export const context = createContext<Injected>({} as Injected); interface Props { children?: ReactNode } export function CounterProvider({ children }: Props) { const [counter, setCounter] = useState(0); const value = { counter, setCounter, increment: () => setCounter(counter + 1), decrement: () => setCounter(counter - 1) } return ( < context.Provider value={value}>{children}</context.Provider> ) }
接下来，我们要定义一个Counter组件。
让该组件成为顶层组件Provider的子组件。这样我们就可以在Counter组件内部利用useContext订阅之前我们定义好的context对象。并从中拿到我们想要的数据。
export default () => <CounterProvider><Counter /></CounterProvider>;
Coutner组件的定义也非常简单，如下。
import React, { useContext } from 'react'; import { Button } from 'antd-mobile'; import { context, CounterProvider } from './context'; function Counter() { const { counter = 0, increment, decrement } = useContext(context); return ( <div style={{ width: '200px', margin: 'auto' }}> <div style={{ width: '40px', margin: '100px auto', fontSize: '40px' }}>{counter}</div> <Button onClick={increment}>递增</Button> <Button onClick={decrement}>递减</Button> </div> ); } export default () => <CounterProvider><Counter /></CounterProvider>;
3
我们也可以同时创建多个context对象，其他组件使用时，多次使用useContext分别订阅即可。
const { counter = 0, increment, decrement } = useContext(context1); const { status } = useContext(context2);
完整代码
import React, { useContext } from 'react'; import { Button } from 'antd-mobile'; import { context, CounterProvider } from './context'; import { context as context2, CounterProvider as CounterProvider2 } from './context2'; function Counter() { const { counter = 0, increment, decrement } = useContext(context); const { counter: coutner2, increment: increment2, decrement: decrement2 } = useContext(context2); return ( <div style={{ width: '200px', margin: 'auto' }}> <div style={{ width: '40px', margin: '100px auto', fontSize: '40px' }}>{counter}</div> <Button onClick={increment}>递增</Button> <Button onClick={decrement}>递减</Button> <div style={{ width: '40px', margin: '100px auto', fontSize: '40px' }}>{coutner2}</div> <Button onClick={increment2}>递增</Button> <Button onClick={decrement2}>递减</Button> </div> ); } export default () => ( <CounterProvider> <CounterProvider2> <Counter /> </CounterProvider2> </CounterProvider> );
4
context与useContext结合，能够更简单的解决组件之间状态共享的问题。
读过react-redux源码的同学应该知道，在react-redux内部，也是使用context来解决组件共享状态的问题。如图
下一篇文章跟大家分享一些使用context的实践案例。如何利用context与useContext去合理的划分组件。
