react文章/教程

目录 引言 一. scheduleUpdateOnFiber 二. performSyncWorkOnRoot renderRootSync workLoopSync performUnitOfWork 三. beginWork updateHostRoot reconcileChildre »

目录 Mobx与redux的区别 使用 安装 observable&&autorun action 使用装饰器写法 runInAction(异步) Mobx与redux的区别 mobx写法偏向与oop 对一份数据可以直接进行修改操作,不需要始终返回一个新的数据 »

目录 安装 基本使用 props传值修改样式 样式化组件 样式扩展 动画 将style样式写在同一个文件中并且组件化使用. 安装 npm i styled-components 基本使用 const 样式组件名=引入的styled-components.替代的标签(支持sass »

目录 一、Mobx前端状态管理框架 基础概念？ 1. 什么是Mobx 2. 什么是状态管理？ 3. 为什么需要状态管理？ 状态管理的一般思想（Flux） 二、mobx的用法 1. 安装 mobx 2. 安装 mobx 与 react 关联工具 3. 安装两个插件，以支持 ES6 的 mob »

目录 react-router-dom路由简介 react-router-dom路由的基本使用 设置默认路由 常用组件介绍 Router组件 路由的执行过程 编程式导航 匹配模式 模糊匹配-默认 react-router-dom路由简介 现代的前端页面大多是SPA(单页面应用程序)， 也就 »

目录 前言 目录结构 开搞ConfigProvider Empty组件实现 Spin组件 前言 继续搞react组件库，该写table了，学习了arco design的table的运行流程，发现准备工作还是挺多的，我们就先解决以下问题吧! 实现ConfigProvider 比如 »

目录 问题描述 思路 解析 1. react-sortable-hoc 2. array-move 问题描述 在项目开发中，遇到这样一个需求：需要对表格里面的数据进行拖拽排序。 效果图如下所示： 思路 安装两个插件： react-sortable-hoc （或者 rea »

其他章节请看： react 高效高质量搭建后台系统 系列 系统布局 前面我们用脚手架搭建了项目，并实现了登录模块，登录模块所依赖的请求数据和antd（ui框架和样式）也已完成。 本篇将完成系统布局。比如导航区、头部区域、主体区域、页脚。 最终效果如下： spug 中系统布局的分析 spug 登录成功 ... »

目录 react-redux使用及原理 1、下载 react-redux redux redux-thunk三个依赖包 2、配置store对象，用来管理全局状态 3、创建reducer.js文件， reducer文件主要是用来处理改变store状态里面的值 4、在入口文件index.js中引入p »

目录 一、UI组件和容器组件 二、connect 1、导入 2、使用 三、mapStateToProps 四、mapDispatchToProps 五、Provider 一、UI组件和容器组件 React-Redux 将所有组件分成两大类：UI 组件和容器组件。 UI 组件： »

目录 前言 1.在根目录创建一个 .env 文件 2.配置全局变量 3.在项目中使用 4.效果图 前言 本文基于“react”: “^18.2.0” 1.在根目录创建一个 .env 文件 2.配置全局变量 .env文件默认是没有语法高亮的，vscode编辑器可以下载 DotE »

目录 使用 addEventListener 代替第三方库的事件 方法一：state 变化，卸载/绑定事件 方法二：使用闭包的方式卸载事件 方法三：使用 ref 保存状态 优化 state 手动维护 在 React Hooks 中使用第三方库的事件时，很多人会写成这样（指的就是我）： con »

目录 <></>包裹多个元素↓：  使用Fragment标签↓： <></>和Fragment标签的区别 react return里返回多个元素值要有父标签包裹。 React.Fragment组件能够在不额外创建 DOM 元素的情况下，让 re »

我们在开发过程中，经常会出现下拉框数据很多得情况，这个时候客户一个个得找就很浪费时间，那该怎么办呢？ 我们可以实现一边输入一遍模糊匹配。 实现后的效果是 具体代码实现请看下面： 我们可以在Select.Option 里面返回我们想要搜索得字段，然后通过filterOption这个 »

目录 一. 标签形式 二. 对象形式 三. 实现一个经典的左目录右内容布局结构（使用对象路由方式） 一. 标签形式 src 文件夹下创建一个 routers 文件夹，用于存放路由表 src/routers 文件夹下创建一个 index.js 文件，用于设置路由表 import { Br »

目录 缘起 类组件 React 合成事件 定时器回调后触发 setState 异步函数后调触发 setState 原生事件触发 setState 修改不参与渲染的属性 只是调用 setState，页面会不会重新渲染 多次渲染的问题 测试代码 函数组件 React 合成事件 定时器回调 异步函 »

概况 web3-react是由Noah Zinsmeister开发的一个web3框架，主要功能是实时获取DApp里的关键数据（如用户当前连接的地址、网络、余额等）。 Noah也是著名的去中心化交易所uniswap里的工程师，因此这个库在uniswap里也已被大量的使用。 web3-react有两个版 ... »

目录 react组件实例属性props props props简单使用 props批量操作 props属性类型限制 props属性限制的简写 函数组件使用props 补充：React之组件实例的三大属性之props props 实例 react组件实例属性props p »

目录 前言 遍历视图key使用 React.memo缓存组件 React.useCallback让函数保持相同的引用 避免使用内联对象 使用React.useMemo缓存计算结果或者组件 使用React.Fragment片段 组件懒加载 通过 CSS 加载和卸载组件 变与不变的地方做分离 总结 »

本文主要讨论基于webpack5+TypeScript的React项目（cra、craco底层本质都是使用webpack，所以同理）在2023年的今天是如何在项目中使用svg资源的。 首先，假定您已经完成基于webpack5+TypeScript的React项目的搭建工作（如果您不太清楚搭建的背景， ... »