![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
React
文章平均质量分 84
React学习和项目记录
fmk1023
这个作者很懒,什么都没留下…
展开
-
react-dnd实现列表的拖拽排序
使用useDrag、useDrop。原创 2022-09-01 16:15:15 · 1328 阅读 · 0 评论 -
React之错误边界(ErrorBoundary)
文章目录componentDidCatch注意实现一个ErrorBoundary组件错误边界的粒度错误边界是一种React组件。它及其子组件形成一个树型结构,能捕获JavaScript中所有位置的错误,记录下错误,并且还能显示一个后备界面,避免让用户直接看到组件树的崩溃信息。componentDidCatchReact 16 将提供一个内置函数 componentDidCatch,如果 render() 函数抛出错误,则会触发该函数。 componentDidCatch(error, info原创 2022-01-13 14:52:12 · 4863 阅读 · 0 评论 -
Vue和React区别
文章目录react 与 vue 的区别一.Vue和React相同点·二.react 与 vue 的区别2.1 运行时性能2.1.1 更新粒度2.1.2 渲染处理2.1.3 更新流程三.核心思想不同3.1 核心思想不同导致写法差异3.2 核心思想不同导致api差异3.3 核心思想不同导致社区差异3.4 核心思想不同导致未来升级方向不同四. Virtual DOM + Diff1.1 为什么Vue和React都选择Virtual DOM1.2 Diff算法react 与 vue 的区别官方文档一.Vue和原创 2021-04-22 10:24:45 · 462 阅读 · 1 评论 -
React-navigation
文章目录React-navigation一、安装1.1 安装依赖到React Native项目React-navigationReact-navigation官网移动端没有像 Web 一样自带导航功能, react-navigation 是RN推荐的移动端导航工具。一、安装参考安装npm install @react-navigation/native或yarn add @react-navigation/nativeReact Navigation由一些核心实用程序组成,然后,导航程序原创 2021-03-05 16:12:12 · 834 阅读 · 0 评论 -
React Native学习
文章目录React Native 学习一、React Native 概述1.1 React Native 特性1.2 React Native 优点1.3 React Native 局限性二、React Native 开发环境2.1 Android 开发环境2.1.1 安装 Android StudioReact Native 学习一、React Native 概述React Native 让开发者使用 JavaScript 和 React 编写应用,利用相同的核心代码就可以创建 Web,iOS 和原创 2021-03-05 10:50:38 · 1145 阅读 · 0 评论 -
微前端框架 之 qiankun
微前端框架 之 qiankun优秀文档:https://juejin.cn/post/6885211340999229454一、介绍qiankun 是基于 single-spa 做了二次封装的微前端框架,通过解决了 single-spa 的一些弊端和不足,来帮助大家实现更简单、无痛的构建一个生产可用的微前端架构系统。1.1 qiankun的优点/特点通用的脏活累活应该在框架层面去做,qiankun 基于 single-spa 做了二次封装,很好的解决了上面提到的几个问题。1.HTML Entry原创 2021-03-02 15:20:24 · 25719 阅读 · 1 评论 -
DvaJS学习
文章目录DvaJS一、数据流向二、Models2.1 State2.2 Action2.3 dispatch 函数2.4 ReducerDvaJS一、数据流向数据的改变发生通常是通过用户交互行为或者浏览器行为(如路由跳转等)触发的,当此类行为会改变数据的时候可以通过 dispatch 发起一个 action,如果是同步行为会直接通过 Reducers 改变 State ,如果是异步行为(副作用)会先触发 Effects 然后流向 Reducers 最终改变 State,所以在 dva 中,数据流向非常原创 2021-03-01 11:52:36 · 619 阅读 · 0 评论 -
UmiJS上手
文章目录UmiJS上手一、安装环境二、目录结构2.1 目录结构2.2 根目录2.2.1 package.json2.2.2 .umirc.ts2.2.3 .env2.2.4 dist 目录2.2.5 mock 目录2.2.6 public 目录2.3 /src 目录2.3.1 .umi 目录2.3.2 layouts/index.tsx2.3.3 pages 目录2.3.4 app.ts三、配置3.1 配置文件3.2 TypeScript 提示3.3 本地临时配置3.4 多环境多份配置3.5 运行时配置3.原创 2021-02-22 17:24:41 · 2793 阅读 · 1 评论 -
异步操作学习笔记
文章目录axios异步请求一、异步1.1 什么是单线程?1.2 为什么JavaScript是单线程?1.3 异步出现的原因?二、事件轮询 event-loop2.1 什么是event-loop/运行流程?三、ajax四、setTimeout五、axios5.1 axios基本使用5.2 axios全局配置5.3 常见的配置选项5.4 同时发送两个请求5.5 axios实例5.6 axios封装5.7 axios拦截器axios异步请求一、异步1.1 什么是单线程?JavaScript是单线程语言。只原创 2021-01-15 13:50:24 · 948 阅读 · 1 评论 -
React笔记
文章目录React笔记第1章:React入门1.1 React简介1.1.1 官网1.1.2 介绍描述1.1.3 React的特点1.1.4 React高效的原因1.2 React的基本使用1.2.4 虚拟DOM与真实DOM1.3 React JSX1.3.2 JSX1.3.3 渲染虚拟DOM(元素)1.4.模块与组件、模块化与组件化的理解1.4.1.模块1.4.2.组件1.4.3.模块化1.4.4.组件化第2章:React面向组件编程2.1. 基本理解和使用2.1.3. 注意2.1.4. 渲染类组件标签的原创 2020-12-22 11:06:35 · 500 阅读 · 0 评论 -
sass与scss
文章目录ScssSCSS 语法的优劣SassSass特点1. 使用变量1-1. 变量声明1-2. 变量引用1-3. 变量名用中划线还是下划线分隔2. 嵌套CSS 规则2-1. 父选择器的标识符&2-2. 群组选择器的嵌套2-3. 子组合选择器和同层组合选择器:>、+和~2-4. 嵌套属性3. 导入SASS文件4. 静默注释5. 混合器5-1. 何时使用混合器5-2. 混合器中的CSS规则5-3. 给混合器传参5-4. 默认参数值6. 使用选择器继承来精简CSS7. 小结ScssSCSS是S原创 2020-12-21 15:49:36 · 288 阅读 · 0 评论 -
TypeScript 学习记录
文章目录TypeScriptReact+TypeScript安装create-react-app创建新工程修改新工程结构添加material-uirouter安装react-router-dom在App.tsx中配置路由入口在router/index.tsx下配置路由路由懒加载路由跳转withRouter()redux安装Redux创建redux相关文件添加actions添加reducer安装redux-thunk创建store主目录下index引入redux修改数据仓库的值redux-persist持久化原创 2020-12-21 15:49:13 · 255 阅读 · 1 评论 -
React 组件更新优化
文章目录React.memo 与 useMemo一、React.memo()1、React.memo 的使用方式2、React.memo 在性能优化上的实践二、使用 useMemo() 进行细粒度性能优化React.memo 与 useMemo一、React.memo()1、React.memo 的使用方式React.memo() 文档地址:https://reactjs.org/docs/react-api.html#reactmemo在 class component 时代,为了性能优化我们经原创 2020-12-21 15:48:32 · 633 阅读 · 0 评论 -
JSX 和虚拟 DOM
React JSXReact 使用 JSX 来替代常规的 JavaScript。JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。我们不需要一定使用 JSX,但它有以下优点:JSX 执行更快,因为它在编译为 JavaScript 代码后进行了优化。它是类型安全的,在编译过程中就能发现错误。使用JSX编写模板更加简单快速。...原创 2020-12-21 15:48:02 · 272 阅读 · 0 评论 -
React-Hooks
文章目录react-hook1. useState :状态钩子函数式更新2. useEffect :副作用钩子2.1 异步操作3.1 清理副作用3. useContext : 共享状态钩子3.1 避免子组件的重复渲染3.24. useReducer:action 钩子5. useRef5.1 useRef获取DOM元素5.2 useRef保存普通变量5.3 跨越渲染周期存储数据5.4 获取子组件属性6. useMemo6.1 实现 局部 Pure6.2 useMemo缓存路由7.useCallback7.1原创 2020-12-21 15:47:19 · 497 阅读 · 1 评论 -
React 生命周期
React-生命周期钩子函数导语:在React中,生命周期钩子函数主要是针对于有状态的组件。constructor()构造函数,在创建组件时调用一次。这是es6提供的方法。componentWillMount()组件挂载之前调用一次。可以在这里初始化state,这时会在render中看到。render()这是React组件所必不可少的核心函数(上面的其它函数都不是必须的),在这个方法中进行创建虚拟dom并更新dom。注意不能在rander修改state,会引起死循环。并不是一次setSta原创 2020-12-21 15:46:50 · 138 阅读 · 0 评论