简单实现react+mobx

前面写过关于react+redux的文章
简单实现react+redux

这里对Redux和Mobx进行简单的对比:

  1. Redux的编程范式是函数式的而Mobx是面向对象的;
  2. 因此数据上来说Redux理想的是immutable(不可更改)的,每次都返回一个新的数据而Mobx从始至终都是一份引用。因此Redux是支持数据回溯的;
  3. 然而和Redux相比,使用Mobx的组件可以做到精确更新,这一点得 益于Mobx的observable; 对应的,Redux是用dispath进行广播,通过Provider和connect来比对前后差别控制更新力度;Mobx更加精细一点。

一张图理解mobx
在这里插入图片描述
1.创建项目

create-react-app app

2.进入项目

cd app

3.进行配置文件抽离

npm run eject

这里可能会出现无法解压资源包的问题,提示git未提交

This git repository has untracked files or uncommitted changes:

Remove untracked files, stash or commit any changes, and try again.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! react-app@0.1.0 eject: `react-scripts eject`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the react-app@0.1.0 eject script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

解决办法:

//先使用
git add .
//然后
git commit -m "init"
//然后再
npm run eject

4.安装mobx mobx-react

mobx 是状态管理工具
mobx-react 是做数据分片和数据获取

npm install mobx mobx-react

5.配置装饰器( 修饰器 es6 ) babel

npm install babel-plugin-transform-decorators-legacy -D
npm install @babel/preset-env -D
npm install babel-plugin-transform-class-properties -D
npm install @babel/plugin-proposal-decorators -D

6.配置package.json

 "babel": {
	    "plugins": [
	      [
	        "@babel/plugin-proposal-decorators",
	        {
	          "legacy": true
	        }
	      ],
      "transform-class-properties"
    ],
    "presets": [
      "react-app",
      "@babel/preset-env"
    ]
    },

注意: 其中两个配置顺序不可更改

   [
        "@babel/plugin-proposal-decorators",
        {
          "legacy": true
        }
      ],
      "transform-class-properties"

项目中 mobx应该怎么用?
在创建store的时候,需要使用class来创建一个状态,再通过实例化对象来使用状态

import {action, observable} from "mobx";

class userStore{
    //@observable观察数据变化
    @observable num=0;
    @computed    //当数据变化时发生改变时, 自动触发
    get(只读) num(){
         return this.num * 2
       }
    //@action修改状态的方法/事件
    @action
    change(){
        this.num++;
    }
}

export default userStore

在store/index.js进行其他store的实例化处理

//导入需要实例化的store
import userStore from "./userStore";

let user=new userStore();
const store={
    user
}
export default store

在入口文件中 使用Provider来传入数据

//导入需要使用的包和store
import {Provider} from "mobx-react";
import store from "./store/index";

//provider组件将我们的store注入App组件
//provider相当于一个数据容器

ReactDOM.render(
    //provider不同的传值方式导致的后面调用方式发生改变
    //第一种:
    <Provider store={store}>
        <App/>
    </Provider>,
    //第二种:解构之后
    <Provider {...store}>
        <App/>
    </Provider>,
    document.getElementById('root')
)
;

需要在那个组件里面使用store里面的值就在当前组件中引入inject[‘provider的名字’]
在页面中的获取
这是使用store={store}

//注入需要使用的状态
import {inject, observer} from 'mobx-react'
@inject('user')
@observer

this.props.store['这是inject的名称'].user['这是store的状态变量名']
//虽然this.porps里面没有找到 @action 装饰器定义的方法, 但是可以直接使用,
//直接使用的方法就是
this.props.store.user.change()
//可以嵌套在其他页面事件触发时使用
//但是由于this会丢失的原因
//点击事件要加上 bind(this)
this.props.store.user.bind(this)

这是使用{…store}

import {inject, observer} from 'mobx-react'
@inject('user')
@observer

//可以直接访问变量名
this.props.user['这是store的状态变量名']
//虽然this.porps里面没有找到 @action 装饰器定义的方法, 但是可以直接使用,
//直接使用的方法就是
this.props.user.change()
//可以嵌套在其他页面事件触发时使用
//但是由于this会丢失的原因
//点击事件要加上 bind(this)
this.props.store.user.bind(this)
展开阅读全文

React Hooks 案例详解(React 进阶必备)

03-13
前言 如释重负,好用的技术就应该越来越简单 React Hooks 是 React 16.8 从提案转为正式加入的新特性。这个新特性是个非常棒的设计。 可以说对于React 技术栈的发展具分割线一样的意义。讲师在课程中提到:之前使用 React 作为主要的前端技术,开发一款网页游戏。在整个游戏的各个模块中,Redux ,mobx,以及蚂蚁金服的 ant-design,dva, umi 这些框架或者第三方库都有涉及使用。但是自从了解了Facebook官方提案的 Hooks 特性后,才真正觉得获得了前所未有的解脱。如果你有React开发经验,学习了解 Hooks 后,一定有一种如释重负的轻松感。 React 带来了方便也带来了迷茫 相信关心 React Hooks 这项新特性的童鞋,很多已经有了一定的 React 开发经验。那么你一定有所体验,React 给我们带来方便的同时,也的确和长久以来的前端开发模式有极大的不同。React 并不需要用继承,而是推荐用嵌套。React 有独特的 jsx 语法。大多数情况 jsx 都使得我们的代码更加简洁了。然而有些时候也给我们带来了一些困扰。 比如数据的传递,逻辑的复用。 react 是一种 mvvm 的设计模式,作为开发者一定要清楚,那些数据是业务数据,那些数据是UI数据。否则你的代码很有可能会陷入混乱局面。 大型项目中模块化与功能解耦困难 在公司项目中 App 稍大的时候,我们发现状态提升和只通过 props 进行数据传递。很多时候都很难实现我们的需求。这时无论我们是否清楚的了解,但是状态管理也就是 redux mobx 等,轻易地进入到了公司的项目中。我们经过初期的尝试发现状态管理,确实比用纯粹的 React 带来了数据传递上的方便,以及代码组织上的清晰。但前提是你看懂且理解了 redux 大神晦涩的官网文档。 本来 React 被设计用来组件化前端开发。但当我们初期使用状态管理,我们常常会过度的使用状态数据,业务逻辑和ui逻辑没有清楚的分离,最终你的应用代码结果可能是:除了少数几个组件是独立的解耦的,大多数组件都因为状态数据的共享而耦合在了一起,且他们也完全依赖状态管理框架。无法再轻松的转移复用。使用高阶组件,属性渲染,渲染回调等高级特性,确实可以帮我们解决模块或功能的解耦问题。但是这些方法,确实有点超出普通“猿类”的技能。且降低了代码的可读性,对于团队协作,这是很致命的问题。 React Hooks 真正开启前端模块化的金钥匙 对于以上问题,React Hooks 都有很好的解决方案,官方的设计动机就是解决这些曾经的繁琐,化繁为简。React Hooks 让我们在纯函数中就可以使用 React 的众多特性。而不必使用类。代码扁平,易读。解耦状态相关逻辑,UI逻辑和业务逻辑更好的分离。这些逻辑往往是纯函数,而以前很容易混合在类组件中。通过自定义 Hooks 我们可以把应用中“状态相关”逻辑解耦出来,独立编写到我们自己的hooks 中。从而更加易于复用和独立测试。

Windows版YOLOv4目标检测实战:训练自己的数据集

04-26
©️2020 CSDN 皮肤主题: 深蓝海洋 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值