布局框架 umi4.0 版本中更新了布局方式,单独创建了 layout/index.tsx 文件为默认布局页面 页面使用 Outlet 组件作为子页面的表示子页面的视口，类似与 router-view 示例 import React from 'react'; import { Outlet } from 'umi' const Page:Reac…

上面介绍 Redux 的时候被up主形容为xiang, 而 react-redux 在一定程度上简化了 redux 的操作, 优化了用户体验，但不过是xiang上添花，本质还是xiang，后来官方对 react-redux 的功能又做了进一步的改进，推出的 react Hook 可以进完全替代 react-redux 的功能，还是推荐想用函数开发的…

安装 yarn add mobx -S 基本使用 mobx 主要用到两个模块 observable (观察者) 、autorun（订阅者） 创建 mobx / store.js 用来存放需要观察的数据 import {observable} from "mobx"const sotre = observable({    nam…

安装 yarn add mobx@5 mobx-react@5 -S 使用 创建 mobx / store.js 用于存放状态数据 import {observable,action} from "mobx"class Store {    @observable number = 0; // 观察对象    …

安装 yarn add http-proxy-middleware -S 配置 在 src 目录中创建 setupProxy.js 文件 , 用法和 vue 中的代理一样 const { createProxyMiddleware } = require("http-proxy-middleware");​module.exports = func…

起步 yarn create @umijs/umi-app// ornpx @umijs/create-umi-app umi 约定式路由 umi 提供了约定式理由写法即创建文件自动转化为路由 在 src / pages 中创建文件 umi 会自动转换为页面的路由, 默认为 index.tsx 为首; 默认 404.tsx 为报错页面 路由嵌套 如…

一、mobx配置 安装 yarn add mobx yarn add mobx-reactyarn add babel-plugin-transform-decorators-legacy -Dyarn add @babel/preset-env -Dyarn add babel-plugin-transform-class-properties …

官方退出的 reactHooks 可以完美的实现 redux 的功能, 使用方法更加便捷, 仿佛又看到了React的未来 使用步骤 将数据及重在一个store对象上将所有操作集中在reducer中创建一个Context创建对数据的读写API将第四部的内容放到第三步的Context中用 Context.Provider 将 Context 提供给所有…

Redux 和 React 的关系 redux 的功能和 vuex 相同,都是作为中央状态管理仓库, 但用户体验上和 vuex 真的是大相径庭, 其原因在于 vuex 高度集成在 vue 中,可以说是为vuex 量身打造的状态管理系统, 而 redux 作为一个库,可以支持在 React \ Angular \ jquery 还有原生JS中, 并不…

CSSModules是为了解决 react 中 组件间样式覆盖的问题 ,在react脚手架中内置了CSSModules 在项目中使用 创建名为 [name].module.css 的样式文件 index.module.css 组件中导入该样式文件 import styles from "./index.module.css" 通过 styles 对…