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}

就可以了