zoukankan      html  css  js  c++  java
  • #mobx应用在rn项目中

    第一步先建立一个类似redux中reducer的文件
    runInAction可以解决获取异步数据问题
    import { observable, action, runInAction } from 'mobx'
    
    class List {
      // 树叶变成响应数据
      @observable listData: Array<any> = []
    
      // @computed计算属性
      // MobX 配置为需要通过动作来更改状态时,必须使用 action,做一些事件
      @action
      getCateData () {
        fetch('https://ik9hkddr.qcloud.la/mock/cookbook-list.json')
          .then(reponse => reponse.json())
          .then(result => {
            runInAction(() => {
              this.listData = result.data
            })
          })
      }
    }
    
    export default new List()
    第二步在 利用mobx-react将mobx和react粘合,并在componentDidMount钩子中触发获取数据的函数action
    import React from 'react'
    import { Provider } from 'mobx-react'
    
    import Home from './pages/home/Home'
    import store from './store'
    
    export default class componentName extends React.Component {
      render() {
        return (
          <Provider store={store}>
            <Home></Home>
          </Provider>
        )
      }
    
      componentDidMount () {
        store.list.getCateData()
      }
    }
    第三步将store注入要用数据的组件
    import { observer, inject } from 'mobx-react'
    interface Props {
      store?: any
    }
    
    interface State {
      hotCateList: Array<any>
      list: Array<any>
    }
    //inject将store注入组件
    @inject('store')
    // @observer吧数据变成响应式
    @observer
    export default class componentName extends Component<Props, State> {
    }

    第四步 直接在树枝上获取数据,在render中渲染
    render() {
        const listData = this.props.store.list.listData
        return ()}

     

        

  • 相关阅读:
    Linux 分区与挂载
    Linux Shell 编程总结
    Java AtomicIntegerFieldUpdater 抽象类
    Java 内部类加载顺序
    Java AtomicIntegerArray 类
    Java AtomicInteger 类
    Java ReentrantLock 类
    Java Runnable 接口
    Java Supplier 接口
    Java Consumer 接口
  • 原文地址:https://www.cnblogs.com/w-819/p/10047390.html
Copyright © 2011-2022 走看看