129浏览

0评论

React createRef循环动态赋值ref问题

目录React createRef循环动态赋值refReact中ref的理解(1) React的ref有3种用法(2) 根据ref获取dom(3) react-redux使用时利用ref调用子组件方法不可用报错总结React createR...

• 2023-04-18

152浏览

0评论

React中遍历数组生成标签问题

目录React遍历数组生成标签举一个例子React功能实现-数组遍历渲染1.在jsx渲染中2.array.map().3.为什么不能用forEach()?总结React遍历数组生成标签举一个例子一个列表根据...

• 2023-04-18

150浏览

0评论

React实现基于Antd密码强度校验组件示例详解

目录引言效果预览组件思想组件开发引言最近在开发 Nest 和 Umi 技术栈的个人项目，在用户管理模块需要用到一个密码强度校验组件，在网上寻找一方资料，没有找到自己想要的，特此自...

• 2023-04-18

145浏览

0评论

教你如何实现在react项目中嵌入Blazor

目录如何实现在react现有项目中嵌入Blazor？首先流程如何实现在react现有项目中嵌入Blazor？目前官方只提供了angular和react俩种示例所以本教程只讲react教程思路讲解：首先在现...

• 2023-04-18

98浏览

0评论

React使用Context与router实现权限路由详细介绍

目录前言思路实现向根组件注入权限列表抽离ContextHOC实现权限路由组件实现实现使用方法实现类似react-router-config的集中式权限路由配置实现使用方法前言之前使用高阶组...

• 2023-04-18

121浏览

0评论

React Native中WebView与html双向通信遇到的坑

目录一、参数配置二、坑点三、React Native与html双向通信3.1、RN发数据到WebView3.2、WebView发数据到RN四、demo源码安卓、ios原生与html双向通信相对简单且成熟，但是React...

• 2023-04-18

149浏览

0评论

React项目中decorators装饰器报错问题解决方案

目录问题：问题：我先安装了decorators：然后运行项目就报错emmmmm：src\pages\home\cookbook\swiper.jsx
Line 21: Parsing error: This experimental syntax requires enabling on...

• 2023-04-18

121浏览

0评论

基于React.js实现兔兔牌九宫格翻牌抽奖组件

目录基础页面结构初始化数据翻转逻辑count 为 0100% 中奖效果图基础页面结构import React, { useEffect, useState } from "react"import './index.css'const FlopLuckyDraw...

• 2023-04-18

140浏览

0评论

react-native只保留3x图原理解析

目录引言1. 输出构建产物2. RN如何决定加载哪张scale图片？3. repo中是否可以只保留3x图？3.1 资源上传3.2 资源下载4. 结论引言我们的react-native项目中，一张图片一般会存在1x,...

• 2023-04-18

142浏览

0评论

React深入分析更新的创建源码

目录ReactDom.rendersetState 与 forceUpdateexpirationTime的作用获取currentTime不同的expirationTimeReact 的鲜活生命起源于 ReactDOM.render ，这个过程会为它的一生储备...

• 2023-04-18

161浏览

0评论

基于React.js实现简单的文字跑马灯效果

刚好手上有一个要实现文字跑马灯的react项目，然后ant-design上面没有这个组件，于是只能自己手撸一个。我想到的最简单的方法，就是定位啦，定时移动这个文字块不就跑起来了。需要...

• 2023-04-18

153浏览

0评论

React中的for循环解读

目录React中的for循环React死循环原因1总结React中的for循环记得要绑定key!<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport"...

• 2023-04-18

132浏览

0评论

React18系列reconciler从0实现过程详解

目录引言React-Dom包createRoothostConfig.tsReact-reconciler包createContainer() 函数render() 调用创建更新createUpdate将更新推进队列enqueueUpdate开始调用scheduleUp...

• 2023-04-18

240浏览

0评论

react的ui库antd中form表单使用SelectTree反显问题及解决

目录react ui库antd中form表单使用SelectTree反显问题最近遇到这个问题，后来找到原因react antd form表单回显踩坑需求如下总结react ui库antd中form表单使用SelectTree反显...

• 2023-04-18

160浏览

0评论

React.memo React.useMemo对项目性能优化使用详解

目录React.memo示例介绍使用FAQReact.memo 二次优化小结useMemo示例介绍使用FAQ何时使用？示例示例小结扩展useCallbackReact.memo这篇文章会详细介绍该何时、如何正确使用它，...

• 2023-04-18

148浏览

0评论

React受控组件与非受控组件实例分析讲解

目录一、受控组件二、非受控组件三、总结一、受控组件在HTML中，表单元素的标签、、等的值改变通常是根据用户输入进行更新。在React中，可变状态通常保存在组件的状态属性中，并...

• 2023-04-18

155浏览

0评论

React Native全面屏状态栏和底部导航栏适配教程详细讲解

目录前言顶部状态栏底部导航栏最后说的前言最近在写 React Native 项目，调试应用时发现顶部状态栏和底部全面屏手势指示条区域不是透明的，看起来很难受。研究了一下这个问题，现...

• 2023-04-18

405浏览

0评论

React 数据获取条件竞争原理解析

目录引言Promise 简介Promise 和条件竞争条件竞争的起因解决条件竞争：强制重新挂载解决条件竞争：丢弃错误数据解决条件竞争：丢弃之前的数据解决条件竞争：取消之前的请求Async/aw...

• 2023-04-18

147浏览

0评论

React 状态管理工具优劣势示例分析

目录什么是状态管理?React 状态管理方案方案介绍方案对比Source相关建议什么是状态管理?“状态”是描述应用程序当前行为的任何数据。这可能包括诸如“从服...

• 2023-04-18

443浏览

0评论

react native图片解析流程详解

目录正文1. 构建输出的产物2. js bundle分析3. 图片source拼接3.1 如果bundle放在服务器（本地开发）3.2 bundle内置在app中（app下载bundle和assets后执行）4. Image style的witdh...

• 2023-04-18

110浏览

0评论

React使用redux基础操作详解

目录一，什么是redux二，安装redux谷歌调试工具三，操作store 改变四，写redux的小技巧一，什么是reduxRedux是一个用来管理管理数据状态和UI状态的JavaScript应用工具。随着JavaScrip...

• 2023-04-18

120浏览

0评论

useCallback和useMemo的正确用法详解

目录正文缓存值缓存函数组件为什么会重新渲染缓存复杂的计算什么是复杂的计算何时进行优化呢总结正文现实很多项目存在大量的useMemo和useCallback，大多数的使用并没有起到实...

• 2023-04-18

168浏览

0评论

React如何使用sortablejs实现拖拽排序

目录React使用sortablejs实现拖拽排序sortablejs之强大的拖拽库安装基本示例常用配置总结React使用sortablejs实现拖拽排序1、使用npm装包$ npm install sortablejs --save2...

• 2023-04-18

118浏览

0评论

React18系列commit从0实现源码解析

目录正文桥梁commit EffectcommitRoot执行commitMutationEffects执行commitMutationEffectsOnFibersgetHostParent执行appendPlacementNodeIntoContainer执行例子：正文本系列...

• 2023-04-18

140浏览

0评论

使用react遍历对象生成dom

目录react遍历对象生成dom项目场景问题描述补充react中操作dom总结react遍历对象生成dom项目场景目前有一个需求，是要接收后台返回的一个对象，并且遍历他的属性和值显示到页面...

• 2023-04-18

121浏览

0评论

styled-components 性能详解

目录引言styled-components 性能模块化 CSS 性能结论引言styled-components 是一个流行的 React 库，一个 CSS in JS 样式框架，它使用 JavaScript 中的标记模板字面量和 CSS 的...

• 2023-04-18

135浏览

0评论

React Render Props共享代码技术

目录介绍使用使用children prop代替render propRender props 与 React.PureComponent 同时使用注意解决方案介绍Render Props是指在React组件之间使用一个值为函数的prop共...

• 2023-04-18

129浏览

0评论

React useState的错误用法避坑详解

目录引言冗余的 state简单示例问题分析解决方案重复的 state简单示例问题分析解决方案使用 useEffect 更新 state简单示例问题分析解决方案使用 useEffect 监听 state 变化...

• 2023-04-18

165浏览

0评论

react echarts tree树图搜索展开功能示例详解

目录前言最终效果版本信息核心功能：关键思路：附上代码数据data.js功能：TreeUtils总结：前言umi+antd-admin 框架中使用类组件+antd结合echarts完成树图数据展示和搜索展开功能最...

• 2023-04-18

123浏览

0评论

React18从0实现dispatch update流程

目录引言hooks原理useState初始化(mount)mountStatemountWorkInProgressHook处理hook数据生成dispatch更新的总结useState触发更新(dispatch)updateStatehook数据从哪里来up...

• 2023-04-18

149浏览

0评论

Redux saga异步管理与生成器详解

目录redux-saga生成器封装可执行生成器安装基本使用写法一写法二使用多个sagaredux-saga在学习它之前先了解es6生成器生成器关键字:yield next()定义函数需要在函数名前急＋*...

• 2023-04-18

165浏览

0评论

React Mobx状态管理工具的使用

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

• 2023-04-18

145浏览

0评论

React useContext与useReducer函数组件使用

目录useContext介绍使用useReducer介绍使用(简单示例实现计算器)将useContext与useReducer整合useContext介绍与class中写法对比减少了代码量,省去了返回回调函数获取传来的...

• 2023-04-18

168浏览

0评论

React中useCallback useMemo到底该怎么用

目录useCallback记忆函数前言介绍使用useMemo记忆组件两者区别使用useCallback记忆函数前言使用缘由：防止因为组件重新渲染,导致方法被重新创建,起到缓存作用类似监听器&hell...

• 2023-04-18

143浏览

0评论

使用 React hooks 实现类所有生命周期

目录应该在什么时候使用 Hooks 呢？class 生命周期在 Hooks 中的实现注意事项在 React 16.8 之前，函数组件也称为无状态组件，因为函数组件也不能访问 react 生命周期，也没有自己...

• 2023-04-18

146浏览

0评论

react组件实例属性state详解

目录react组件实例属性statestatestate简写补充：react中的state详解statesetState有两种格式react组件实例属性statestate有状态state的组件称作复杂组件,没有状态的组件称为...

• 2023-04-18

139浏览

0评论

React高阶组件使用详细介绍

首先 我们要了解什么是高阶组件第一 高阶组件必须是一个函数第二 高阶组件接收一个参数，这个参数也必须是一个组件第三 他的返回值 也是一个组件至于高阶组件的作用 我们后续...

• 2023-04-18

159浏览

0评论

React 中的重新渲染实现

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

• 2023-04-18

127浏览

0评论

详解如何在React中优雅的使用addEventListener

目录使用 addEventListener 代替第三方库的事件方法一：state 变化，卸载/绑定事件方法二：使用闭包的方式卸载事件方法三：使用 ref 保存状态优化 state 手动维护在 React Hooks 中...

• 2023-04-18

146浏览

0评论

react-redux的connect用法详解

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

• 2023-04-18

139浏览

0评论

react 实现表格列表拖拽排序的示例

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

• 2023-04-18

131浏览

0评论

React styled components样式组件化使用流程

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

• 2023-04-18

129浏览

0评论

React反向代理与CSS模块化的使用案例

目录反向代理安装使用编写setupProxy.js测试案例CSS模块化案例反向代理官网:[Proxying API Requests in Development | Create React App 中文文档 (bootcss.com)安装使用np...

• 2023-04-18

355浏览

0评论

react中实现拖拽排序react-dnd功能

dnd文档html 拖拽排序import React, { useState, useRef } from 'react';import { cloneDeep } from 'lodash';import styles from './index.less';const defaultList = [...

• 2023-04-18

118浏览

0评论

一文带你搞懂useCallback的使用方法

目录一、useCallback的作用二、useRef解决方案三、useReducer解决方案四、usePersistFn解决方案总结一、useCallback的作用usecallback不是用来解决组件中有过多内部函数导...

• 2023-04-18

132浏览

0评论

antd中form表单的wrapperCol和labelCol问题详解

之前在学这块时候比较模糊 有点不熟 以至于在后来的开发过程中看别人的代码中的xs sm等 以及{span：8}也表示困惑但也不敢问大佬（怕因为太简单而被嘲讽），只能自己去百度去了解，总...

• 2023-04-18

105浏览

0评论

react组件实例属性props实例详解

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

• 2023-04-18

138浏览

0评论

react+antd select下拉框实现模糊搜索匹配的示例代码

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

• 2023-04-18

205浏览

0评论

react.js实现页面登录跳转示例

1，页面目录信息：2，从index.js导入路由信息BasicRoute.js，然后BasicRoute.js中存储App.js和StatisticsInformation.js页面信息，从App.js登录成功后跳转到StatisticsInformation.js...

• 2023-04-18

139浏览

0评论

react-redux的connect示例详解

connect简介：
connect是react-redux两个api中其中之一，在使用react-redux时起到了为redux中常用的功能实现了和react连接的建立
函数入口，以及需要传入的参数：export default fu...

• 2023-04-18