Taro+TypeScript - Mobx实践

朱雀 2021-09-29 04:10 368阅读 0赞

### 前言 ###

在使用Mobx中，可以使用`componentWillReact（生命周期钩子）`,当组件计划re-render (数据发生变换，页面进行渲染的时候)时会触发.

### 使用observable、@observable (Taro中官网实例化) ###

1、在store下新建counter.ts

import { observable } from 'mobx'
    
    // 创建的是实例对象
    const counter = observable({
      counter: 0,
      counterStore() {
        this.counter++
      },
      increment() {
        this.counter++
      },
      decrement() {
        this.counter--
      },
      incrementAsync() {
        setTimeout(() => {
          this.counter++
        }, 1000)
      }
    })
    export default counter

在store下新建price.ts

import { observable, action } from 'mobx'
    
    export default class Price {
      @observable price: number = 0
    
      @action.bound setPrice (price: number) {
        this.price += price
      }
    }

2、在app.tsx中导入

import counter from './store/counter'
    // 声明store
    const store = {
      counter,
      price: new Price() // 注意此处生成实例
    }
    class App extends Component {render () {
        return (
          <Provider store={store}>
            <Index />
          </Provider>
        )
      }
    }

3、使用

import { observer, inject } from '@tarojs/mobx'
    
    type propsType = {
      price: {
        price: number,
        setPrice: Function
      },
      counter: {
        counter: number,
        increment: Function,
        decrement: Function,
        incrementAsync: Function
      }
    }
    
    type stateType = {
    }
    
    interface Index {
      props: propsType,
      state: stateType
    }
    
    
    @inject('count', 'counter')
    @observer
    class Index extends Component {
        constructor(props) {
            super(props)
                this.state = {
            }
        }  
      // mobx数据改变进行渲染函数（）
      componentWillReact () {}
      increment = () => {
        const { counter } = this.props
        counter.increment()
      }
    
      decrement = () => {
        const { counter } = this.props
        counter.decrement()
      }
    
      incrementAsync = () => {
        const { counter } = this.props
        counter.incrementAsync()
      }
      setPrice () {
        const { price: { setPrice } } = this.props
        setPrice(1)
      }
      
      render () {
        const {counter: { counter }, price: { price } } = this.props
        return (
          <View className='index'>
            <Button onClick={this.increment}>+</Button>
            <Button onClick={this.decrement}>-</Button>
            <Button onClick={this.incrementAsync}>Add Async</Button>
            <Text>{counter}</Text>
            <Button onClick={this.setPrice}>点击</Button>
            <Text>现在价格为：{price}</Text>
          </View>
        )
      }
    }

### 工程化实例 ###

在store下新建counter.ts

import { observable, action } from 'mobx'
    
    export default class Counter {
      @observable counter:number =  0
      @action.bound counterStore() {
        this.counter++
      }
      @action.bound increment() {
        this.counter++
      }
      @action.bound decrement() {
      this.counter--
    }
      @action.bound incrementAsync() {
        setTimeout(() => {
          this.counter++
        }, 1000)
      }
    }

新建price.ts

新建index.ts

import Counter from './counter'
    import Price from './price'
    
    export default {
      Counter: new Counter(),
      Price: new Price()
    }

在app.tsx使用

import store from './store'
    class App extends Component {render () {
        return (
          <Provider store={store}>
            <Index />
          </Provider>
        )
      }
    }

在pages下新建mobx

import { ComponentType } from 'react'
    import Taro, { Component, Config } from '@tarojs/taro'
    import { View, Button, Text } from '@tarojs/components'
    import { observer, inject } from '@tarojs/mobx'
    
    type propsType = {
      price: {
        price: number,
        setPrice: Function
      },
      counter: {
        counter: number,
        increment: Function,
        decrement: Function,
        incrementAsync: Function
      }
    }
    
    type stateType = {
    }
    
    interface Index {
      props: propsType,
      state: stateType
    }
    
    
    @inject('price', 'counter')
    @observer
    class Index extends Component {
      constructor(props) {
        super(props)
        this.state = {
        }
      }
      config: Config = {
        navigationBarTitleText: 'mobx'
      }  
      // mobx数据改变进行渲染函数（）
      componentWillReact () {}
      
      increment = () => {
        const { counter } = this.props
        counter.increment()
      }
    
      decrement = () => {
        const { counter } = this.props
        counter.decrement()
      }
    
      incrementAsync = () => {
        const { counter } = this.props
        counter.incrementAsync()
      }
      setPrice() {
        const { price: { setPrice } } = this.props
        setPrice(1)
      }
    
      render() {
        const { counter: { counter }, price: { price } } = this.props
        return (
          <View className='index'>
            <Button onClick={this.increment}>+</Button>
            <Button onClick={this.decrement}>-</Button>
            <Button onClick={this.incrementAsync}>Add Async</Button>
            <Text>{counter}</Text>
            <Button onClick={this.setPrice}>点击</Button>
            <Text>现在价格为：{price}</Text>
          </View>
        )
      }
    }
    
    export default Index as ComponentType