Mobx

另外，这俩问题是我在mobx中应用ES7装璜器语法用到的，用一般的ES6语法是不会碰到这样的问题，嫌麻烦也能够不必装璜器语法，奈何我对这种看上去像Spring正文的语法垂涎已久。 bug1Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option in your 'tsconfig' or 'jsconfig' to remove this warning.ts(1219)问题出在IDE不意识这个语法 以vscode为例 须要在setting中搜“experimentalDecorators”而后勾选上 bug2Parsing error: This experimental syntax requires enabling one of the following parser plugin(s): "decorators", "decorators-legacy". (22:4)eslint问题出在我的项目自身不意识这个语法（以后这个语法还在试验阶段 babel还没有正式公布），这个解决起来略微有点麻烦，翻了很久stackoverflow和github issue，答复都是支支吾吾 遮遮掩掩，故作此篇，以飨前人。 step1: npm i @babel/core @babel/plugin-proposal-decorators @babel/preset-envstep2:我的项目根目录下创立.babelrc { "presets": ["@babel/preset-env"], "plugins": [["@babel/plugin-proposal-decorators", { "legacy": true }]]}step3:我的项目根目录下创立config-overrides.js const path = require('path')const { override, addDecoratorsLegacy } = require('customize-cra')function resolve(dir) { return path.join(__dirname, dir) }const customize = () => (config, env) => { config.resolve.alias['@'] = resolve('src') if (env === 'production') { config.externals = { 'react': 'React', 'react-dom': 'ReactDOM' } } return config}; module.exports = override(addDecoratorsLegacy(), customize())step4:npm i customize-cra react-app-rewired ...

在react中应用react-mobx的状况下,数据曾经被action 扭转了,然而视图层 没有随之概念 如果mobx的版本大于6 "mobx": "^6.3.2","mobx-react": "^7.2.0"切记增加 makeObservable 初始化我的项目 import { observable, action, computed, makeObservable } from "mobx";export class AuthStore { @observable name = 'wangkai000'; @observable sex = '男'; @observable userObj = { name: 'wangkai000', age: 233, token: '12345689' } constructor() { // makeObservable 在mobx6 版本之后 比增加项 makeObservable(this); } @action.bound setName(v) { console.log('触发action'); this.name = v; } @computed get titleName(){ return this.name+'___111'; } }

脚手架 create-react-app 一、装置//npm yarn 随需要，尽量不要混用，混用有些资源可能会呈现掉包 yarn add mobxyarn add mobx-react// 版本号"mobx": "^6.3.2","mobx-react": "^7.2.0",二、配置package.json1.把暗藏的webpack裸露进去，开释之前记得请先提交代码 git commit 一次 yarn run eject2.装置@babel/plugin-proposal-decorators 插件 必须的 yarn add @babel/plugin-proposal-decorators 3.批改增加 package.json配置 （手动） "babel": { "plugins": [ ["@babel/plugin-proposal-decorators", {"legacy": true}] ], "presets": [ "react-app" ]}三、定义mobx的store1.目录机构(mobx反对多个多个状态模块) stores----- auth.js 模块1 ----- test.js 模块2----- index.js 总入口 2.模块 auth.js // auth.js和test.js 截然不同 展现auth.js做案例// @action.bound 和 @action 区别 https://cn.mobx.js.org/refguide/action.htmlimport { observable, action, computed } from "mobx";import { makeObservable} from "mobx";export class AuthStore { // 定义变量 @observable name = 'zhangsan000'; @observable sex = '男'; @observable userObj = { name: 'zhangsan000', age: 233, token: '12345689' } // 初始化 constructor() { // mobx6版本当前 必须得在初始化加makeObservable makeObservable(this); } // 动作(bound 能够主动绑定this 避免this 指向扭转) @action.bound setName(v) { console.log('触发action'); this.name = v; } @action setUserObj(obj) { this.userObj = obj; } // 计算属性 @computed get titleName(){ return this.name+'___111'; } }3.定义导出进口index.js ...

在react中引入mobx，vscode提醒  对润饰器的试验反对性能在未来的版本中可能更改。在 “tsconfig“ 或 “jsconfig“ 中设置 “experimentalDecorators“ 选项以删除此正告 设置一下vscode配置就行。 window零碎: 1.vscode左下角齿轮设置 => 设置2.搜寻 experimentalDecorators3.勾选 Mac零碎: 1.code => 首选项 =>设置 2.搜寻experimentalDecorators 3.勾选扩大配置

简化action属性更新通常状况下，store中会有很多属性，其中有些属性更新会很频繁，每一个属性都须要写一个action函数去更新，当这种须要变更的属性越多时，会导致store中代码量异样的宏大，可读性也会升高。就如上面代码一样： class TestStore { @observable info = {} as IInfo; @observable list = [] as IList; @action setInfo = (value: IInfo) => { this.info = value; } @action setList = (value: IList) => { this.list = value; }}引入typescript中keyof关键字应用，能够将上述action函数简化如下： class TestStore { @observable info = {} as IInfo; @observable list = [] as IList; @action setValue = <T extends keyof TestStore>(key: T, value: this[T]) => { this[key] = value; }}

Mobx 是什么？Mobx 是一个状态治理库。 Mobx 哲学任何源自利用状态的数据都应该主动地获取。"Anything that can be derived from the application state, should be derived. Automatically." Mobx 准则Mobx 反对单向数据流，即动作更新状态，状态更新视图。 为什么将 React 和 Mobx 联合应用？对于利用开发中常见的问题，React 和 Mobx 都给出了最优和独特的解决方案：React 通过应用虚构 DOM 对 UI 渲染进行了优化；Mobx 通过应用响应式状态图表，将利用状态与 React 组件同步的机制进行了优化，即只有在状态更新的时候才对组件做出扭转。归根结底，React 组件只是状态的富丽展现，而状态的衍生能够由 Mobx 来治理。 Mobx 外围概念1. Observable state（可察看的状态）Mobx 为现有的数据结构提供了可察看的性能，被察看的数据能够是原始值，也能够是援用值。 2. Computed values（计算值）计算值个别通过观察值衍生，当察看值扭转的时候，计算值会自动更新，并在它不再应用时将其优化掉。 衍生：任何源自状态并且不会有进一步相互作用的货色就是衍生。衍生能够有多种形式存在，比方：用户界面、衍生数据 class TodoList { @observable todos = []; @computed get unfinishedTodoCount() { return this.todos.filter(todo => !todo.finished).length; }}3. Reactions（反馈）Reactions 会对 state 变动作出反应，但它不是产生一个值，而是产生一些副作用，比方更新 UI。能够通过应用 Mobx 提供的 when、autorun、reaction 来创立自定义的 Reactions。 ...

mobxMobx 中创立 store 的常见关键字如下： observable computed action。 observable用来申明可察看的数据computed是申明可察看数据的演变数据，和 observable 具备等同位置action 用来扭转observable数据，然而 action 不是必须的，能够认为其是较好的约定，最好遵循。在 mobx 程序中应用class、装璜器是最佳实际，因而咱们的代码也应用装璜器实现mobx-reactProvider、observer、inject均为是mobx-react提供。 Provider以组件的模式存在，用来包裹最外层组件节点，并且传入 store（通过）context 传递给后辈组件。应用@observer装璜的react组件将转换成一个监听者，当@observable 润饰的数据变动，react组件就会从新渲染。@inject为了使被装璜的组件以 props 的模式获取到 Provider 传递过去的数据。

在平时我的项目开发中，发现前端同学在进行数据管理时存在有如下问题： 进行到开发前期发现有些store体积异样宏大，动辄上千行代码，影响代码的可读性、维护性；很多store之间存在通信的场景，而之前组织的形式不便于store之前的通信；多人合作开发时难免会同时更改同一个store，不可避免的造成代码抵触；鉴于上述问题，在本次事变单导购我的项目中将对store的组织与划分做出如下改良： 思考到每次前端工作都是依据UI模块来拆解、调配的，为了更加符合每个前端开发人员的工作，防止工作穿插。当初，store依据UI模块来划分，每一个UI模块划分出两个store，一个UI store，一个Domain store。UI store是指以后UI的状态，比方：窗口尺寸、以后展现的页面、渲染状态、网络状态等等；Domain store次要蕴含页面所需的各种数据，带有业务性的数据（个别是须要从后端获取的）。 创立一个 RootStore 来实例化所有 stores ，并共享援用，使得所有的childStore都能通过rootStore进行通信，不必再像之前应用回调的模式实现通信。示例： class RootStore { constructor() { this.userStore = new UserStore(this) this.todoStore = new TodoStore(this) }}class UserStore { constructor(rootStore) { this.rootStore = rootStore } getTodos(user) { // 通过根 store 来拜访 todoStore return this.rootStore.todoStore.todos.filter(todo => todo.author === user) }}class TodoStore { @observable todos = [] constructor(rootStore) { this.rootStore = rootStore }}参考：https://cn.mobx.js.org/best/s...

1、没有封装成observer 组件容器组件 import Change from './Change';import Father from './Father';const Main = (props: any) => { return ( <div> <Father></Father> <Change></Change> </div> )}export default Main;Father组件 import { inject } from 'mobx-react';import React from 'react';import Store from '../../store/store';interface IProps { store?: Store;}const Father = (props: IProps) => { const { store } = props; const { message } = store as Store; return <div> <div>title: {message.title}</div> <div>author: {message.author.name}</div> <div>likes: {message.likes[0]}</div> </div>}export default inject('store')(Father);Change组件 ...

这篇文章讲一讲平时应用mobx时常遇到的一种store变动了而页面取不到值的场景——new了两个store实例 假如当初有一个storeA，外面寄存了一个属性a，在组件A挂载实现时调接口获取数据并赋给属性a。当初有另外一个组件B也须要用到属性a，组件B先再次生成一份storeA并通过Provide注入，而后在外头获取属性a，发现获取不到。 这是因为组件A依赖的storeA实例与组件B依赖的storeA实例并不是同一个援用，每次new都会生成一个新的store实例，store的应用遵循就近准则。 上面举个例子阐明： 全局store import UserInfoStore from "./UserInfoStore";export default { userInfoStore: new UserInfoStore()}注入全局store ReactDOM.render( <HashRouter> <Provider {...stores}> {renderRoutes(routes)} </Provider> </HashRouter>, document.getElementById('root'))Layout组件中获取用户信息寄存到全局的UserInfoStore中 interface IProps extends RouteConfigComponentProps<void> { userInfoStore?: UserInfoStore}const Layout = (props: IProps) => { const {route, userInfoStore} = props const { fetchUserInfo } = userInfoStore as UserInfoStore; useEffect(() => { /** 获取用户信息 */ fetchUserInfo(); }) return ( <div className={styles.layout}> <div className={styles.header}>topbar</div> <div className={styles.menu}>slider</div> <div className={styles.content}> {renderRoutes(route?.routes)} </div> <div className={styles.footer}>footer</div> </div> )}export default inject('userInfoStore')(observer(Layout));当初页面组件Page再次生成新的UserInfoStore并通过Provider注入 ...