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中的值了
修改
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}
就可以了
本文地址:https://blog.csdn.net/weixin_43005178/article/details/109208706