【Taro入门】Taro中的Context的使用

今天有HR问，有没有使用过Taro开发小程序，额，怎么说呢，之前在公司的时候使用Vue，所以就基本用不上Taro，对于个人而言也没必要，因为Taro如果不是为了多个平台使用，基本上是把小程序开发复杂化了，而且目前很多bug。
虽然Hr没联系我了，但是有点后悔啊，最近要研究一下Taro了。

既然HR都问了，肯定要试试，跑起来了，然后一路到底看文档，和React其实也差不多，Redux也用了。就是JSX支持不完善，不过不影响基本上。就是突然看到Context好奇了，这个算是React的hook了。

但是Taro的支持不完善，唉。
在React中，Context有提供者组件和消费者组件，但是Taro没有消费者API支持，使用过了hook，useContext和useState来替代。

首先是最普通的用法，创建Context：基本上一致。
React：

const ThemeContext = React.createContext('light');

Taro：

const ThemeContext = Taro.createContext('light')

然后看第一种使用

React:使用Provider来包裹消费组件

1
2
3
4
5
6
7
<ThemeContext.Provider value="dark">
      
   <ThemeContext.Consumer>
     {theme => <Button  theme={theme} />}
   </ThemeContext.Consumer>

 </ThemeContext.Provider>

Taro：这里theme可以是来自state或者使用this.context获取，不过要先创建一个叫做ContextType的常量，或者使用类的语法
image.png

可以看到这样使用可以不用消费者组件，直接使用context，缺点就是单一使用。

<Text>{this.context}</Text>
image.png

下面看看动态的Context的使用：

Taro：这里注意到，动态的context，在类外部创建，它的名字可以自定义。

1
let ThemeContext = Taro.createContext('ligth')

然后，我们使用hook，useState来控制动态的Context，点击按钮 change Theme就会更改Context的数据、

image.png
image.png
image.png

最后看看taro的多个Context使用，这里的创建和动态的context是一致的。

image.png

image.png

如果需要跨组件使用，只需要在子组件使用useContext这个hook就好了。

先到这，Taro如果不是一定要多端开发，还是不要用了。