React学习-context、mobx

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中的值了

修改

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来控制响应式的效果。

即点击实现数字递增

计算computed

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

用的时候直接

{store.sum}

就可以了