摘要: 这份文档主要涉及富文本编辑器、打包、打包优化方面的内容。提到了使用react-quill插件安装、项目打包和本地预览、配置懒加载、包体积分析以及CDN配置等内容。通过修改webpack配置实现CDN优化,将资源挂载到全局变量,加快页面加载速度。
1.富文本编辑器 npm install react-quill@2.0.0-beta.2 tips:严格模式下会渲染两遍 2.打包 //1.项目打包 npm run build //2.本地预览 1.安装本地服务包 npm install -g serve 2.serve -s ./build 3.http://.... 3.打包优化-配置懒加载 路由的JS资源只要在杯访问时才会动态获取 //1.把路由修改为React提供的lazy函数进行动态导入 const Home = lazy...
摘要: 这段内容总结了SCSS、Ant Design组件库、配置@别名路径、封装requests请求模块、使用Redux管理token、token持久化、Axios请求拦截器注入Token、使用Token做路由权限控制、useLocation、token失效和Echarts的安装及使用方法。
1.SCSS 一种后缀名为.scss的预编译CSS语言 npm install sass -D 2.Ant Design组件库 最常用的React PC端组件库,快速开发PC管理后台项目 npm install antd --save 2.1 表单校验 实现步骤 为 Form 组件添加 validateTrigger 属性,指定校验触发时机的集合 为 Form.Item 组件添加 name 属性,这样表单校验才会生效 [容易忽略] 为 Form.Item 组件添...
摘要: React Router是一个可以在浏览器中根据路径渲染组件的工具,可以通过声明式导航或编程式导航进行路由跳转,还可以传递参数。嵌套路由可以将多个路由相互嵌套,而默认二级路由允许一级路由和二级路由同时渲染。当路径找不到时,可以通过404组件来处理。React Router有两种路由模式:history和hash模式,需要使用不同的函数来创建。路径解析配置可以通过craco插件来修改。
1. React Router 一个path对应一个组件component当我们在浏览器中访问一个path的时候,path对应的组件会在页面中进行渲染 import {createBrowserRouter,RouterProvider} from "react-router-dom"; const routes = [ { path: '/about', component: About, }, { path: '/article', component: Articl...
摘要: Rudex是React中常用的集中状态管理工具,类似于Vue中的Vuex,在React中可以独立运行。Redux Toolkit是官方推荐的编写Redux逻辑的方式,包含一套工具集,简化书写方式。react-redux是连接Redux和React组件的中间件。通过定义reducer函数和使用createStore方法生成store实例对象,可以订阅数据的变化并触发数据变化。使用useDispatch和useSelector钩子函数来获取store数据并修改,实现组件获取数据并修改的功能。同时还可以进行异步操作,通过封装异步函数来异步修改状态。
1.Rudex Rudex是React中最常用的集中状态管理工具,类似于Vue中的Vuex,可以独立于框架运行 //1.定义一个reducer函数(根据当前想要做的修改返回一个新的状态) function reducer (state = {count: 0 }){ //数据不可变,基于原始状态生成新的状态 if(action.type === 'INCREMENT'){ return {cout:state.count + 1} } if(action.type === 'DECREMENT'){ retur...
摘要: 这份文档主要介绍了在React应用中使用的一些重要技术和工具,包括受控表单绑定、React中获取DOM、随机uuid的生成、时间格式化day.js、组件通信的不同方式、useEffect的使用、自定义Hook函数、React Hooks使用规则、模拟接口工具json-server、Axios的使用等内容。同时也提供了使用Fetch API和Axios处理HTTP请求的简单示例代码。
1.受控表单绑定 概念:使用React组件的状态(useState)控制表单状态 //1.准备一个React状态值 const [value,setValue] = useState('') //2.通过value属性绑定状态,通过onChange属性绑定状态同步的函数 setValue(e.target.value)} 2.React中获取DOM 在组件中获取/操作DOM,需要使用useRef钩子函数 `...
摘要: 这段内容主要介绍了如何创建React程序,React的渲染流程,JSX的本质以及基础事件绑定。同时还介绍了React组件的基本类型和数据传递,以及如何使用useState来管理状态。最后也提到了React样式的基本用法。
1.创建React程序 npx create-react-app 项目名 React渲染流程 App.js -> index.js -> index.html(root) JSX本质 JS的扩展语法(语法糖),通过解析工具解析后在浏览器中运行 JSX的本质是将类似XML的标记转换为JavaScript对象。当编写JSX代码时,开发者 可以使用类似HTML的标签和属性,但在底层,这些标记会被转换为**React.createEleme...
摘要: 这是一段关于实验图和实验步骤的内容,主要介绍了关于MVRP端口注册模式的设置和配置。通过设置不同的注册模式,可以控制端口如何注册和传播VLAN信息。实验步骤包括基础配置和MVRP端口注册模式设置。
实验图 image.png 实验步骤 1. 基础配置 SWA: vlan 10 port g 1/0/1 qu int g 1/0/3 port link-type trunk port trunk permit vlan all SWB: int g 1/0/1 port link-type...