超性感的React Hooks（八）useContext

2020-07-27 16:58:22 浏览数 (1)

在context这个高级API出来之前，数据流向只能自上而下，从父组件一层一层的往下传递。如上图左。

如果仅仅只支持这样的方式，在实践中会遇到很多麻烦。

例如一个数据要传到使用它的组件，中间还要经历3个组件。我们就不得不在这三个中间组件中处理该数据的传递逻辑。但其实对于这三个组件而言，该数据毫无用处。

context的出现，就是为了解决这样的痛点。context能够让数据直达需要它的那一个子组件。如上图右。

1

React提供了一个名为useContext的组件，能够让我们在hooks组件中使用context的能力。

在React中，只有父子组件才能相互交互。那如果不相干的两个组件如何才能做到数据交互呢？

让他们拥有共同的父组件即可。

因此，一个大型项目中，通常的做法就是在项目的最顶层自定义一个父组件Provider。并把所有可能会全局使用的数据与状态放在该组件中来维护。当项目中所有的组件都是Provider的子组件之后，那相互之间的数据交互就不再是问题。

例如在Taro项目中使用Redux，顶层组件就是自定义的Provider。

代码语言：javascript复制
// 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对象。

代码语言：javascript复制
import React, { createContext } from 'react';
// 因为在别的组件中使用useContext时，
// 需要用到这个context对象，因此对外抛出
export const context = createContext({});

在context对象中，提供了一个自带的Provider组件。

该组件接收一个value作为参数，我们将自定义的状态与数据通过该参数传入context对象。

代码语言：javascript复制
<context.Provider value={/* 自定义状态 */}>

我们在别的组件中，可以使用useContext订阅这个context对象。这样，在该context对象中的数据变化，其他组件就能接收到了。

此时，我们想要自定义的状态很简单，就是一个counter数据。

代码语言：javascript复制
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>
  )
}

我们自己定义好的顶层父组件就这样搞定了。完整代码如下：

代码语言：javascript复制
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对象。并从中拿到我们想要的数据。

代码语言：javascript复制
export default () => <CounterProvider><Counter /></CounterProvider>;

Coutner组件的定义也非常简单，如下。

代码语言：javascript复制
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分别订阅即可。

代码语言：javascript复制
const { counter = 0, increment, decrement } = useContext(context1);
const { status } = useContext(context2);

完整代码

代码语言：javascript复制
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

本系列文章为原创，请勿私自转载，转载请务必私信我

react redux

0 人点赞