超性感的React Hooks（八）useContext
超性感的React Hooks（八）useContext
在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去合理的划分组件。
本系列文章的所有案例，都可以在下面的地址中查看
https://github.com/advance-course/react-hooks
本系列文章为原创，请勿私自转载，转载请务必私信我