欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

React学习-context、mobx

程序员文章站 2022-06-28 19:16:13
React学习-context、mobxContext先引入全家桶中的context组件import React,{Component,createContext} from 'react'let {Provider,Consumer} = createContext()封装一个提供者,设置一个仓库class ProviderComponent extends Component{ state = { msg:'我是provider里面的值' } render(){...

React学习-context、mobx

Context

  • 先引入全家桶中的context组件
import React,{Component,createContext} from 'react'
let {Provider,Consumer} = createContext()
  • 封装一个提供者,设置一个仓库
class ProviderComponent extends Component{
  state = {
    msg:'我是provider里面的值'
  }
  render(){
    return (
      <Provider value={this.state}>
        {this.props.children}
      </Provider>
    )
  }
}

以后只要使用这个标签即可

<ProviderComponent></ProviderComponent>

那消费者如何用呢?
我们嵌套多层的组件

export default class App extends Component{
  render(){
    return (
      <ProviderComponent>
        <Demo1/>
      </ProviderComponent>
    )
  }
}
class Demo1 extends Component{
  render(){
    return(
      <Demo2/>
    )
  }
}
class Demo2 extends Component{
  render(){
    return(
      <Consumer>
        {(val)=><p>{val.msg}</p>}
      </Consumer>
    )
  }
}

同样的使用Consumer标签,在标签中即可直接获取到,就像下面这样

<Consumer>
	{(val)=><p>{val.msg}</p>}
</Consumer>

mobx

  • 下载安装mobx
npm i mobx mobx-react
npm i @babel/plugin-proposal-decorators
npm i @babel/plugin-proposal-class-properties
  • 配置package.json
"eslintConfig": {
  "parseOptions":{
    "ecmaFeatures":{
      "legacyDecorators":true
    }
  },
  "extends": "react-app"
},
"babel": {
 "plugins":[
   ["@babel/plugin-proposal-decorators",{"legacy":true}],
   ["@babel/plugin-proposal-class-properties",{"loose":true}]
 ],
 "presets": [
   "react-app"
 ]
}

定义属性

  • 我们可以创建一个store文件夹,在里面新建一个index.js文件,内容如下
import {observable} from 'mobx'

class AppStore {
    @observable n=0;
}
const store = new AppStore();
export default store;

先创建两个简单的组件,并引入相应的包
App.js

import React,{Component} from 'react'
import store from './store'
import {Provider} from 'mobx-react'
import Child from './Child'

export default class App extends Component{
  
  render(){
    return (
      <Provider store={store}>
        <div>
          <Child/>
        </div>
      </Provider>
    )
  }
}

Child.js

import React from 'react'

export default class Child extends React.Component{
    render(){
        return(
            <div>
                我是Child组件
            </div>
        )
    }
}
先实现出页面把值显示出来

接下来使用装饰器把属性注入进去

import {inject} from 'mobx-react'

@inject('store') @observable

observable用于解释注入的这个store的使用方法

如何使用呢?
只需要简单定义即可

export default class Child extends React.Component{
    render(){
        let {store} = this.props
        return(
            <div>
                我是Child组件
                <p>{store.n}</p>
            </div>
        )
    }
}

最后页面上就可以取到store中的值了
React学习-context、mobx

修改

mobx修改使用action来标注

@action
add(){
    return this.n++;
}

使用的时候

import React from 'react'
import {inject,observer} from 'mobx-react'

@inject('store') @observer
export default class Child extends React.Component{

    state = {
        num:1
    }

    fn(){
        let {store} = this.props
        this.setState({
            num:store.add()
        })
    }

    render(){
        let {store} = this.props
        return(
            <div>
                我是Child组件
                {this.state.num}
                <button onClick={this.fn.bind(this)}>点击</button>
            </div>
        )
    }
}

这里有个小问题,正常去使用store.num好像没有响应式的效果,就是数据更新了,视图没有跟着更新,因此就尝试用state来控制响应式的效果。
React学习-context、mobx

即点击实现数字递增

计算computed

    @observable n=1;
    @observable m=1;
    @computed get sum(){
        return this.n+this.m;
    }

用的时候直接

{store.sum}

就可以了

本文地址:https://blog.csdn.net/weixin_43005178/article/details/109208706

相关标签: React