最近在用react开发项目，遇到一个需求——开发一个弹框组件。在react中创建一个组件是很简单的，只需要使用class创建并引入就可以了，但是要做到可以用js调用这个组件...

目录一、基础环境1.1 安装Node.js1.2 添加Android原生环境1.3 添加iOS原生环境二、创建示例项目2.1 创建项目2.2 运行项目2.3 调试项目三、集成到原生应用3.1 集成到原生And...

目录一、事件处理1.1 React事件1.2 事件对象1.3 事件传参1.4 函数组件事件处理二、表单一、事件处理1.1 React事件React 元素的事件处理和 DOM 元素类似。但是有一点语法上...

目录useEffect代替常用生命周期函数原始生命周期函数对React Hooks（useState和useEffect) 的总结思考一、为什么用React Hooks(面向生命周期编程变成了面向业务逻辑编程)二、...

目录React useEffect与生命周期钩子函数的对应关系使用格式一：不带参数的情况使用格式二：带第二个参数，参数为空数组使用格式三：带第二个参数，并且指定了依赖项使用格式四：依赖项...

前言;Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。display: grid指定一个容器采用网格布局。接着划分行和列。grid-temp...

目录前言一、state保留二、state重置总结前言在开发时，我们复用一个组件，比如说切换不同的聊天窗口，这个窗口是公用的组件<Chat/>聊天窗口、<ContactList/>组件，控制不同人的id...

目录简介实现原理具体实现思考总结简介提供虚拟化列表能力的 Hook，用于解决展示海量数据渲染时首屏渲染缓慢和滚动卡顿问题。详情可见官网，文章源代码可以点击这里。实现原理...

目录一、 State1.概念2.State的简单用法3. JS绑定事件4.react 绑定事件5.react this指向问题6.修改state值7.代码简写二、props1.概念2.传参的基础方法、运算符传参三、refs...

目录循环遍历渲染数组和对象元素遍历渲染数组遍历渲染对象元素遍历对象生成dom项目场景问题描述补充循环遍历渲染数组和对象元素遍历渲染数组1.单纯数组const pureArr = ['a...

目录模块化模块模块化组件化组件组件化函数式组件创建函数组件Props参数传递（重点）复合函数组件类式组件创建实例用户自定义组件模块化模块理解：向外提供特定功能的js程序,一般...

目录一、基本使用二、路由跳转2.1 Link 组件2.2 NavLink 组件2.3 编程式跳转三、动态路由参数3.1 路径参数路径匹配规则兼容类组件3.2 search 参数四、嵌套路由5.1 路由定义...

前言：页面一共分为两个结构文字 + 渐变柱形图为一个部分，下面的标注为一个结构。我们先看文字 + 渐变柱形图部分。总体使用 flex 布局，左边文字部分占总体的 50%，右边的占剩余的...

目录React hook实现websocket封装react自定义hook解决websocket连接,useWebSocket1、描述2、代码React hook实现websocket封装新建websocket.ts文件import {useState, useRe...

目录useEffect模拟组件生命周期让函数组件模拟生命周期初始化更新阶段卸载阶段useEffect实现componentWillUnmount生命周期函数阐述useEffect 解绑副作用useEffect的第二个...

目录前言React DevTools 的原理渲染阶段FiberRoot/FiberNodememoizedState 与 React Hooks实践：突破 useDebugValue 的限制useDebugValueAnywhere 的实现特定的 devtools总结...

目录使用react-file-viewerreact-file-viewer预览本地文件解决思路使用react-file-viewer1.npm install react-file-viewer2.在组建中引入import FileViewer from &#39;reac...

目录antd使用antdantdantd 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。国内镜像为：https://ant-design.gitee.io/docs/react/introduce-cn...

目录react修改state的数组和对象数据的时候(setState)需要注意react修改数组对象的注意事项删除数组中的指定元素合并两个对象修改多层级对象的值react修改state的数组和对...

目录使用forEach或map两种方式遍历数组forEachmap循环遍历数组时map和forEach的区别forEach情况map 情况使用forEach或map两种方式遍历数组之前写代码，从后台提取数据并渲染...

目录正文内联样式普通的CSScss modulescss in js样式组件引入外部变量默认值引入全局样式provider样式继承动态添加class正文目前，前端最流行的开发方式是组件化，而CSS的设计...

目录Rematch使用1. Rematch介绍2. Rematch特性3. 基本使用Rematch使用1. Rematch介绍Rematch是没有样板文件的Redux的最佳实践，没有action types、 action creators, 状态转...

目录前言什么是Concurrent React？设置项目实现 useTransition()isPending 是做什么的？前言React 18 引入了一个关键的新概念，称为“Concurrent”。并发涉及同时执行...

目录一、是什么二、工作原理三、如何使用小结一、是什么React是用于构建用户界面的，帮助我们解决渲染DOM的过程而在整个应用中会存在很多个组件，每个组件的state是由自身进行...

目录React 组件性能优化最佳实践组件卸载前进行清理操作类组件使用纯组件PureComponent什么是纯组件什么是浅层比较shouldComponentUpdate纯函数组件使用React.memo优化性能...

目录背景技术方案介绍内存异常处理未来规划背景时至2022，精细化运营已经成为了各大App厂商的强需求，阿里的 DinamicX、Tangram 大家应该都很熟悉了，很多App厂商也自研了一些类...

目录react的watch监视属性-useEffectuseEffect使用指南最基本的使用响应更新如何处理Loading和Error处理表单自定义hooks使用useReducer整合逻辑取消数据请求react的watch监...

React 18 最新的特性
批处理文件
在同一个 函数中, 调用多次 useState 也只是会更新一次function App() { const [count, setCount] = useState(0); const [flag, setFlag...

目录效果实现card-slider.tsxcard-item.tsxApp.tsx效果实现通过zIndex控制层级，opacity控制透明度，transform 控制卡片缩放程度，marginLeft控制位置，剩下的就是计算的事了card-s...

目录引言redux中的Middleware记录日志手动记录redux-sagaGenerator函数实际使用场景引言上一节我们学习了redux在实际项目的应用细节，这一节我们来学习redux中一个很重要的概...

目录Mobx介绍1.什么是Mobx2.Mobx有什么优势3.社区评价浏览器支持基础使用1. 初始化mobx2. React使用storeMobx - computedMobx - 模块化实现步骤代码实现Mobx - 总结Mobx介...

目录项目场景：1、创建父组件2、创建子组件问题描述原因分析：解决方案：项目场景：使用过vue的朋友都知道，vue父组件更改props的值，子组件是会刷新的，而react就未必。
先看以下例子：1、...

目录配置与初始化实践react+tsx中使用better-scroll首先，你要知道为什么可以滚动，原理很简单，父容器的高度比子元素的小即可。在这之前，我们先来看一下浏览器的滚动原理： 浏览器...

目录背景UI 组件容器组件connect()mapStateToProps()mapDispatchToProps()组件实例：计数器背景在前面文章一文理解Redux及其工作原理中，我们了解到redux是用于数据状态管理，而r...

前言：页面结构分为两个部分，柱状图 + 文字为一部分，标注为为一部分。先来看柱状图 + 文字这一部分。宽度定为 width: 55, height 高度使用百分比进行动态变化。整个部分使用 fl...

目录useEffect执行两次问题父组件里面 子组件里面react使用useEffect及踩坑useEffect 介绍重要理解useEffect常见跳坑useEffect执行两次问题在useEffect第二个参数变化的时...

目录braft-editor的基本使用项目需求使用braft-editor踩坑记,引用 braft-utils有错误遇到的问题解决方式braft-editor的基本使用项目需求实现照片上传，富文本为空时的提示，官...

目录摘要1.异步的setState2.多个setState方法3.手动实现mySetState摘要这一篇文章，主要是简单的实现一下this.setState方法，为了实现该方法，就要知道this.setState方法具有什么...

目录前言自定义 Hooks 简单实现在组件中使用自定义 Hooks提前阻止 dispatch 触发优化后再测试结论题外前言在快乐使用 React Hooks 开发自定义 Hooks 过程中，使用了 useEffec...

目录引言包装 Context.Provider 作为父组件使用 Context Hook 来实现子组件使用 React 顶层 API 动态设置样式复用 Context，实现其它子组件抽取共同状态逻辑自由组合父组件与...

目录一、是什么二、如何实现CSSTransitionSwitchTransitionTransitionGroup一、是什么在日常开发中，页面切换时的转场动画是比较基础的一个场景当一个组件在显示与消失过程中...

目录背景设计理念抽象代码结构声明与定义用法高级用法拆分/合并actionAPIuseSetStategetActionpolymerActionusePolymerActionStatemergePolymerAction背景随着React Hooks...

目录useEffect的第二个参数useEffect规则第二个参数的规则不同值的参数示例useEffect使用技巧useEffect的第二个参数useEffect规则在每次render之后执行接收第二个参数来控...

目录1.前言2.useImperativeHandle初探3.获取元素的几种方式3.1 useRef：获取组件内部元素3.2 forwardRef：父组件获取子组件内部的一个元素3.3 useImperativeHandle：父组件可以获...

目录react生命周期常用的生命周期不常用的生命周完整的生命周期图react生命周期函数组件无生命周期，生命周期只有类组件才拥有生命周期函数指在某一时刻组件会自动调用并执行...

目录react 代码块输出,代码高亮显示,带行号,能复制以modal组件为例infoModal.less样式react 代码块插件代码块插件react 代码块输出,代码高亮显示,带行号,能复制以modal组件...

目录React解析excel文件React上传excel预览React解析excel文件首先安装安装xlsx插件yarn add xlsx使用xlsx解析    /**     * 上传文件并解析成json     */    co...

目录react父子组件的执行顺序1.class组件 2.函数组件 hooks无依赖的情况react父子组件的执行顺序react版本：17.x，在此版本中完全可以用Hooks去进行开发了，开始先讲class组件，只...

目录正文状态 => 视图事件 => 状态改变 => 视图正文React推荐one-way单向数据流，注意只是推荐，并不强制，常见有以下两种情况:状态 => 视图事件 => 状态改变 => 视图状态 => 视...

目录引言主要设计来源display 布局display 布局动态位置使用绝对定位styleJS引言之前的文章，咱们介绍过横向和竖向，具体的内容，请看React + CSS 绘制横向柱状图React + CSS 绘...