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

  |   0 评论   |   0 浏览

今天有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来包裹消费组件

 <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,在类外部创建,它的名字可以自定义。

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如果不是一定要多端开发,还是不要用了。


标题:【Taro入门】Taro中的Context的使用
作者:yf_d
地址:看看我的CSDN