mobx在react中引用的几种方式

码林鼠

已于 2022-03-07 20:11:50 修改

阅读量865

点赞数

分类专栏： react 文章标签：自动化 python javascript

于 2021-05-09 00:13:21 首次发布

本文链接：https://blog.csdn.net/weixin_41254345/article/details/116548699

版权

react 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

先看效果，类似于vue的双向绑定

在这里插入图片描述

方式一（inject方式）：

import {Provider} from 'mobx-react'
import mobxStore from './store/testStore'
import ByInject from './components/byInject'
function App() {
  return (
    <div className="App">
      <Provider receiverStore={mobxStore}>
        <ByInject ></ByInject>
      </Provider>
    </div>
  );
}
export default App;

byInject.js

import React from 'react'
import { inject, observer} from 'mobx-react'
import {PropTypes} from 'prop-types'
@inject ('receiverStore') @observer class ByInject extends React.Component {
    render() {
        let {receiverStore} = this.props
        return (
            <div>
                <input onChange={(e) => { receiverStore.setName(e.target.value) }} placeholder="请设置名称"/>
                <div>{receiverStore.name}</div>
            </div>
        )
    }
}
ByInject.propTypes = {
    receiverStore: PropTypes.func
}
export default ByInject

方式二（inject方式）：

import {Provider} from 'mobx-react'
import mobxStore from './store/testStore'
import ExportInject from './components/exportInject'
function App() {
  return (
    <div className="App">
      <Provider receiverStore={mobxStore}>
        <ExportInject ></ExportInject >
      </Provider>
    </div>
  );
}
export default App;

exportInject.js

import React from 'react'
import { inject, observer} from 'mobx-react'
import {PropTypes} from 'prop-types'
class ExportInject extends React.Component {
    render() {
        let {receiverStore} = this.props
        return (
            <div>
                <input onChange={(e) => { receiverStore.setName(e.target.value) }} placeholder="请设置名称"/>
                <div>{receiverStore.name}</div>
            </div>
        )
    }
}
ExportInject.propTypes = {
    receiverStore: PropTypes.func
}
export default inject('receiverStore')(observer(ExportInject))

方式三（import方式）：

import ByImport from './components/byImport'
function App() {
  return (
    <div className="App">
        <ByImport ></ByImport >
    </div>
  );
}
export default App;

byImport.js

import React from 'react'
import { inject, observer} from 'mobx-react'
import {PropTypes} from 'prop-types'
import mobxStore from '../store/testStore'
@observer class ByImport extends React.Component {
    render() {
        return (
            <div>
                <input onChange={(e) => { mobxStore.setName(e.target.value) }} placeholder="请设置名称"/>
                <div>{mobxStore.name}</div>
            </div>
        )
    }
}
ByImport.propTypes = {
    mobxStore: PropTypes.func
}
export default ByImport

方式四（与函数组件相结合一）：

import FunComponent from './components/funComponent'
function App() {
  return (
    <div className="App">
      <FunComponent></FunComponent>
    </div>
  );
}
export default App;

import {observer} from 'mobx-react'
import testStore from '../store/testStore'
function FunComponent() {
    return (
        <div>
            <input onChange={(e) => { testStore.setName(e.target.value) }} placeholder="请设置名称"/>
            <div>{testStore.name}</div>
        </div>
    )
}
export default observer(FunComponent)

方式五（与函数组件相结合二）：

import FunComponent from './components/funComponent'
import {Provider} from 'mobx-react'
import testStore from './store/testStore'
function App() {
  return (
    <div className="App">
      <Provider testStore={testStore}>
        <FunComponent></FunComponent>
      </Provider>
    </div>
  );
}
export default App;

import {observer, inject} from 'mobx-react'
function FunComponent({testStore}) {
    return (
        <div>
            <input onChange={(e) => { testStore.setName(e.target.value) }} placeholder="请设置名称"/>
            <div>{testStore.name}</div>
        </div>
    )
}
export default inject('testStore')(observer(FunComponent))

其实有这么多方法，说到底也就是inject引入和observer监听这两个了，只有用了observer监听器，才能当mobx改变时页面也能及时监听到并更新页面