2022年3月17日
按需打包技术 ui库使用
摘要： 按需打包 在编译阶段：需要什么资源，打包什么资源 react提供了一个按需打包插件 babel-plugin-import 在babel的配置options.plugins中配置该插件 是一个数组，每一个成员代表一个插件 成员： 字符串 直接引入 成员： 数组 第一个成员代表插件名称 第二个成员代表 阅读全文
posted @ 2022-03-17 19:52 HaoyuSun 阅读(68) 评论(0) 推荐(0)
React UI
摘要： ant-design UI框架 ant-design UI框架是由阿里金服团队维护的。 官网：https://ant.design/index-cn 包含：pc端，移动端，native端等UI框架。 antd-mobile是其在移动端的一个ui框架 官网：https://mobile.ant.des 阅读全文
posted @ 2022-03-17 19:37 HaoyuSun 阅读(447) 评论(0) 推荐(0)
React 富文本编辑器
摘要： 富文本编辑器 react-quill 安装 npm i quill react-quill import React, {Component} from 'react'; import {render} from 'react-dom'; import ReactQuill from 'react- 阅读全文
posted @ 2022-03-17 19:28 HaoyuSun 阅读(473) 评论(0) 推荐(0)
Redux拓展
摘要： reducer拓展 路由模块也提供了一个reducer，所以整个应用程序就有了两个reducer 一个是路由reducer 一个是自定义reducer 为了使用多个reducer， redux提供了combineReducers方法，可以合并多个reducer 参数是对象 key 命名空间 valu 阅读全文
posted @ 2022-03-17 10:43 HaoyuSun 阅读(57) 评论(0) 推荐(0)
路由中使用redux
摘要： 本质就是让所有组件都可以获取路由数据和store数据 dealFn拓展高阶组件，接收store中所有的数据 withRouter(自带)拓展高阶组件，接收路由中所有数据 通过Route组件渲染页面组件，传递路由所有数据 通过父子组件通信，传递所有或部分路由和store中数据 注意：在App组件中，通 阅读全文
posted @ 2022-03-17 09:12 HaoyuSun 阅读(112) 评论(0) 推荐(0)
2022年3月16日
React router 路由
摘要： react路由 特点：虚拟DOM 组件化开发 多端适配 多端适配 web端 react-router-dom 模块 native端 react-router-native模块 都依赖react-router模块，不同react版本使用路由方式不同 使用： 引入react-router-dom： 步骤 阅读全文
posted @ 2022-03-16 19:38 HaoyuSun 阅读(367) 评论(0) 推荐(0)
redux解决组件间通信(常用)
摘要： 安装react-redux redux是通过属性传递数据实现的 回顾一下vuex 组件间通信 发布消息的方法 commit 和dispatch 获取store数据 state，getters 同样，react-redux提供了connect方法和Provider组件 connect函数 （conne 阅读全文
posted @ 2022-03-16 10:49 HaoyuSun 阅读(413) 评论(0) 推荐(0)
2022年3月15日
React 观察者模式解决组件间通信 不推荐 (推荐使用redux)
摘要： 目的：主要通过该案例学习观察者模式 基于观察者模式来解决组件通信 一个组件订阅消息 一个组件发布消息 在组件中订阅消息，消息的回调函数可以接收数据，可以访问组件实例对象 所以可以用接收的数据更新组件的状态实现通信，这种基于状态实现通信的方案就是reflux的实现 观察者模式只是用来发布消息的框架，不 阅读全文
posted @ 2022-03-15 20:44 HaoyuSun 阅读(443) 评论(0) 推荐(0)
Redux
摘要： redux基于flux思想实现的框架，实现了单一数据源， 数据单向流动等特征 redux 组成 components 组件视图 actions 组件或用户发送的消息 store 存储数据 reduers 捕获消息，处理消息 通信流程 1.一个组件发布一个action 2.action通过store被 阅读全文
posted @ 2022-03-15 19:42 HaoyuSun 阅读(443) 评论(0) 推荐(0)
React-hook技术
摘要： 为函数组件拓展功能 函数组件没有继承组件基类，不具有组件的行为 为了函数组件具有这些行为，使用hook方法对函数组件做拓展 1.使用状态数据 let [数据， 修改数据的方法（新的状态 数据）] = useState(默认数据值)； 在函数组件中，用”修改数据方法“ 修改数据 函数组件进入存在期，更 阅读全文
posted @ 2022-03-15 11:56 HaoyuSun 阅读(69) 评论(0) 推荐(0)