fmk1023的博客

使用useDrag、useDrop。

文章目录componentDidCatch注意实现一个ErrorBoundary组件错误边界的粒度错误边界是一种React组件。它及其子组件形成一个树型结构，能捕获JavaScript中所有位置的错误，记录下错误，并且还能显示一个后备界面，避免让用户直接看到组件树的崩溃信息。componentDidCatchReact 16 将提供一个内置函数 componentDidCatch，如果 render() 函数抛出错误，则会触发该函数。 componentDidCatch(error, info

文章目录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和

文章目录React-navigation一、安装1.1 安装依赖到React Native项目React-navigationReact-navigation官网移动端没有像 Web 一样自带导航功能， react-navigation 是RN推荐的移动端导航工具。一、安装参考安装npm install @react-navigation/native或yarn add @react-navigation/nativeReact Navigation由一些核心实用程序组成，然后，导航程序

文章目录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 和

微前端框架 之 qiankun优秀文档：https://juejin.cn/post/6885211340999229454一、介绍qiankun 是基于 single-spa 做了二次封装的微前端框架，通过解决了 single-spa 的一些弊端和不足，来帮助大家实现更简单、无痛的构建一个生产可用的微前端架构系统。1.1 qiankun的优点/特点通用的脏活累活应该在框架层面去做，qiankun 基于 single-spa 做了二次封装，很好的解决了上面提到的几个问题。1.HTML Entry

文章目录DvaJS一、数据流向二、Models2.1 State2.2 Action2.3 dispatch 函数2.4 ReducerDvaJS一、数据流向数据的改变发生通常是通过用户交互行为或者浏览器行为（如路由跳转等）触发的，当此类行为会改变数据的时候可以通过 dispatch 发起一个 action，如果是同步行为会直接通过 Reducers 改变 State ，如果是异步行为（副作用）会先触发 Effects 然后流向 Reducers 最终改变 State，所以在 dva 中，数据流向非常

文章目录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.

文章目录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是单线程语言。只

文章目录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. 渲染类组件标签的

文章目录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

文章目录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持久化

文章目录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 时代，为了性能优化我们经

React JSXReact 使用 JSX 来替代常规的 JavaScript。JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。我们不需要一定使用 JSX，但它有以下优点：JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。它是类型安全的，在编译过程中就能发现错误。使用JSX编写模板更加简单快速。...

文章目录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

React-生命周期钩子函数导语：在React中，生命周期钩子函数主要是针对于有状态的组件。constructor()构造函数，在创建组件时调用一次。这是es6提供的方法。componentWillMount()组件挂载之前调用一次。可以在这里初始化state，这时会在render中看到。render()这是React组件所必不可少的核心函数（上面的其它函数都不是必须的），在这个方法中进行创建虚拟dom并更新dom。注意不能在rander修改state,会引起死循环。并不是一次setSta