相信全局?jǐn)?shù)據(jù)同步是每個(gè)前端開發(fā)都會(huì)遇到的問題，在實(shí)際開發(fā)過程中，比較常見的方式有redux, mobx, vuex等

然而，在使用了react hooks后，有一種更加簡(jiǎn)便優(yōu)雅的方式，那就是使用useContext這個(gè)鉤子

在普通的react項(xiàng)目中，我們可以很自然地使用useContext，但是，最近我們項(xiàng)目組打算使用taro重構(gòu)項(xiàng)目，于是花了點(diǎn)功夫進(jìn)行技術(shù)調(diào)研，踩了一些坑，所以還是寫點(diǎn)總結(jié)，希望能給小伙伴們提供點(diǎn)幫助。

useContext的具體使用方式可以查看 官方文檔

在taro 2.2.6版本中使用

在實(shí)際開發(fā)項(xiàng)目中，useContext的使用方式比較不太方便，于是借鑒了 unstated-next 這個(gè)庫的源碼，在本地創(chuàng)建了一個(gè)useContainer的hook，替換原來的React.createContext為Taro.createContext，然后就可以愉快地使用啦

• 步驟1: 創(chuàng)建useContainer.ts

import Taro from "@tarojs/taro";

const EMPTY: unique symbol = Symbol();

export interface ContainerProviderProps<State = void> {
  initialState?: State;
  children: any;
}

export interface Container<Value, State = void> {
  Provider: any;
  useContainer: () => Value;
}

export function createContainer<Value, State = void>(
  useHook: (initialState?: State) => Value
): Container<Value, State> {
  let Context = Taro.createContext<Value | typeof EMPTY>(EMPTY);

  function Provider(props: ContainerProviderProps<State>) {
    let value = http://www.wxapp-union.com/useHook(props.initialState);
    return <Context.Provider value=http://www.wxapp-union.com/{value}>{props.children};
  }

  function useContainer(): Value {
    let value = http://www.wxapp-union.com/Taro.useContext(Context);
    if (value =http://www.wxapp-union.com/== EMPTY) {
      throw new Error("Component must be wrapped with <Container.Provider>");
    }
    return value;
  }

  return { Provider, useContainer };
}

export function useContainer<Value, State = void>(
  container: Container<Value, State>
): Value {
  return container.useContainer();
}
復(fù)制代碼

• 步驟2: 寫一些需要在全局使用的數(shù)據(jù)

import { createContainer } from "./useContainer";
import { useState } from "@tarojs/taro";

export default createContainer(() => {
  const [count, setCount] = useState(0);
  // 這里可以做一些數(shù)據(jù)的獲取操作，例如發(fā)送請(qǐng)求之類的

  return {
    count,
    setCount,
  };
})
復(fù)制代碼

步驟3: 在入口文件app.tsx中，注入全局?jǐn)?shù)據(jù)

import Container from "./hooks/index";

# 省略部分代碼

Taro.render(
  <Container.Provider>
    <App />
  </Container.Provider>,
  document.getElementById("app")
);

復(fù)制代碼

這里遇到的一個(gè)小坑就是，我們不能在 App 類里面寫注入代碼，因?yàn)槟莻€(gè)render其實(shí)是沒起實(shí)際作用的。

寫到這里，似乎就大功告成了，寫一下測(cè)試數(shù)據(jù)，運(yùn)行npm run dev:h5，可以在組件和嵌套頁面中正常顯示我們注入的全局?jǐn)?shù)據(jù)

然而，運(yùn)行npm run dev:weapp，似乎在小程序中并不支持......

正巧在調(diào)研的時(shí)候Taro 3.0發(fā)布了，于是更新了一波taro，試試有沒有支持

在taro 3.0.0-rc.6版本中使用

• 通過 taro update self 命令，我們將taro更新到最新的版本
• taro init my-taro-demo 初始化一個(gè)項(xiàng)目
• taro 3.0中內(nèi)置了React，因此我們可以直接引入 unstated-next 這個(gè)包，不需要?jiǎng)?chuàng)建本地的useContainer
• 重復(fù)步驟2
• 修改初始化項(xiàng)目中的app.ts為app.tsx( 劃重點(diǎn) )，修改app.tsx

import Container from "./hooks/container";

# 省略部分代碼

 render() {
    return <Container.Provider>{this.props.children}</Container.Provider>;
  }
復(fù)制代碼

最后，分別運(yùn)行npm run dev: h5 和 npm run dev:weapp，都能完美顯示～