29浏览

0评论

React路由组件传参的三种方式(params、search、state)

目录...

• 2023-01-05

43浏览

0评论

React将组件作为参数进行传递的3种方法实例

目录前言方式一：直接传递 jsx 创建好的元素方式二：直接传递组件本身方式三：传递一个返回组件的函数三种方案的对比总结前言在日常的开发中，开发通用组件的机会其实并不多，尤其是...

• 2023-01-05

46浏览

0评论

React Hook 四种组件优化总结

目录前言组件抽取memo 优化组件React.memo 语法useCallback 优化组件useCallback 作用useMemo 优化useMemo 语法useCallback 和 useMemo 区别前言React Hook 已成为当前最流...

• 2023-01-05

43浏览

0评论

React实现轮播图效果

本文实例为大家分享了React实现轮播图效果的具体代码，供大家参考，具体内容如下效果：轮播功能用到了react-slick组件，安装：npm install react-slick --savenpm install slick-caro...

• 2023-01-05

41浏览

0评论

ahooks封装cookie localStorage sessionStorage方法

目录引言cookielocalStorage/sessionStorage总结与归纳引言本文是深入浅出 ahooks 源码系列文章的第九篇，这个系列的目标主要有以下几点：加深对 React hooks 的理解。学习如何...

• 2023-01-05

47浏览

0评论

react 表单数据形式配置化设计

目录前言实现一般实现配置化的实现实现思路具体实现使用示例总结前言在日常的中后台系统开发中，表单是和我们打交道非常多的名词。但是在一般的表单实现中、我们会做着很多重...

• 2023-01-05

178浏览

0评论

React封装CustomSelect组件思路详解

目录思路和前提编码与实现处理createContext与useContext对content的封装和拆分: DispatchRender, Controls先说Controls, 包含控制行: 重置, 确定DispatchRender 用于根据t...

• 2023-01-05

56浏览

0评论

解析react 函数组件输入卡顿问题 usecallback react.memo

目录现象分析解决方案一：方案二：弊端现象在输入问题时，输入框响应巨慢。效果图分析右侧控制台显示，子组件不停在mount unmount，子组件中使用了CKEditor组件，每次mount开支较大，导致...

• 2023-01-05

42浏览

0评论

React前端DOM常见Hook封装示例下

目录引言useFullscreenuseHoveruseDocumentVisibility引言本文是深入浅出 ahooks 源码系列文章的第十五篇，这个系列的目标主要有以下几点：加深对 React hooks 的理解。学习如...

• 2023-01-05

30浏览

0评论

React系列useSyncExternalStore学习详解

目录前言useSyncExternalStore 初体验Concurrent 模式下使用 react-redux 7Concurrent 模式下使用 react-redux 8Concurrent 模式下使用自定义 external store源码分析useSy...

• 2023-01-05

45浏览

0评论

React手写一个手风琴组件示例

目录知识点结构分析AccordionItem子组件Accordion容器组件知识点emotion语法react语法css语法typescript类型语法结构分析根据上图，我们来分析一下，一个手风琴组件应该包含一...

• 2023-01-05

44浏览

0评论

React函数组件hook原理及构建hook链表算法详情

目录写在前面的小结Demofiberhook 链表hook 对象及其属性介绍useState Hook 对象useRef HookuseEffect、useLayoutEffect 以及 useImperativeHandleuseMemouseCallback构建...

• 2023-01-05

41浏览

0评论

react hooks闭包陷阱切入浅谈

目录引言1、一个熟悉的闭包场景2 浅谈hooks原理，理解useEffect 的 “闭包陷阱” 出现原因2 难道真的要在依赖数组里写上的值，才能拿到新鲜的值？3 为什么使用useRef能...

• 2023-01-05

193浏览

0评论

ahooks控制时机的hook实现方法

目录引言Function Component VS Class ComponentClass ComponentFunction ComponentLifeCycle - 生命周期useMountuseUnmountuseUnmountedRefEffectuseUpdateEffect 和 useU...

• 2023-01-05

28浏览

0评论

useEvent显著降低Hooks负担的原生Hook

目录前言没有 useEvent 的时候...

• 2023-01-05

49浏览

0评论

基于React Context实现一个简单的状态管理的示例代码

目录前言封装一个父组件用来包裹其他子组件子组件如何获取数据呢class Component 方式context.ConsumeruseContext总结参考前言在大多数情况下，我们开发项目都需要一个状态管...

• 2023-01-05

35浏览

0评论

关于react+antd样式不生效问题的解决方式

目录1、添加antd组件样式不生效2、运行yarn eject时暴露配置文件报错3、less-loader版本过高，删除旧版本，下载低版本即可4、项目中引入icon代码报错补充：React中antd按需加载样...

• 2023-01-05

42浏览

0评论

如何应用 SOLID 原则在 React 中整理代码之开闭原则

目录本系列其他文章什么是开闭原则？让我们从一个例子开始一个糟糕的解决方案解决方案是什么？让我们创建单独的用户组件注意总结SOLID 是一套原则。它们主要是关心代码质量和可...

• 2023-01-05

45浏览

0评论

使用 React Hooks 重构类组件的示例详解

目录1. 管理和更新组件状态2. 状态更新后的操作3. 获取数据4. 卸载组件时清理副作用5. 防止组件重新渲染6. Context API7. 跨重新渲染保留值8. 如何向父组件传递状态和方法...

• 2023-01-05

36浏览

0评论

React组件三大属性之state,props,refs

目录1.1基本理解和使用1.1.1 使用React开发者工具调试1.1.2 定义组件的方式1.1.3 注意1.1.4 渲染类组件标签的基本流程1.2 组件实例的三大核心属性之一：state1.2.1 理解1.2.2...

• 2023-01-05

37浏览

0评论

详解React hooks组件通信方法

目录一、前言二、父子组件通信1）父组件传值给子组件2）子组件传值给父组件3）跨组件传值（父传孙子组件）一、前言组件通信是React中的一个重要的知识点，下面列举一下 react hooks中常...

• 2023-01-05

50浏览

0评论

ahooks解决用户多次提交方法示例

目录引言场景useLockFn缺点axios 自动取消重复请求axios 取消请求如何自动取消重复的请求思考与总结引言本文是深入浅出 ahooks 源码系列文章的第四篇，这个系列的目标主要有...

• 2023-01-05

50浏览

0评论

React18中请求数据的官方姿势适用其他框架

目录引言这是一个普遍的问题为什么不推荐这么写？需要解决竞态问题点击返回按钮后重新请求数据CSR时的白屏时间瀑布问题推荐的方式总结引言一些同学喜欢在useEffect中请求初始...

• 2023-01-05

52浏览

0评论

React中的权限组件设计问题小结

目录背景所谓的权限控制是什么？实现思路路由权限菜单权限背景权限管理是中后台系统中常见的需求之一。之前做过基于 Vue 的后台管理系统权限控制，基本思路就是在一些路由钩子...

• 2023-01-05

43浏览

0评论

react基于react-slick实现多图轮播效果

目录写在前面：一、进入官网查看文档（Docs）二、安装插件（Quick Start）三、范例使用（Examples）1、直接copy代码：2、实现结果：3、引入样式：4、还是报错？5、运行成功！实现结果：总结写在前面：目...

• 2023-01-05

47浏览

0评论

教你应用 SOLID 原则整理 React 代码之单一原则

目录什么是单一责任原则？让我们从一个糟糕的例子开始1. 移动数据处理逻辑2. 可重用的数据获取钩子3. 分解 UI 组件让我们回顾一下我们刚刚做了什么总结SOLID 原则的主要是作...

• 2023-01-05

43浏览

0评论

react组件memo useMemo useCallback使用区别示例

目录正文memo使用useMemo使用useCallback使用正文memo用来优化函数组件的重复渲染行为，针对的是一个组件useMemo返回一个memoized的值本质都是用同样的算法来判定依赖是否发...

• 2023-01-05

45浏览

0评论

react redux中如何获取store数据并将数据渲染出来

目录前景提要1.创建仓库骨架并书写初始代码2.正式开始3.store 数据获取方法（可略过）4.数据的获取与展示前景提要如果不了解基础的话 ----- 点击此处本文着重实现效果，不会讲太...

• 2023-01-05

47浏览

0评论

关于react中useCallback的用法

目录基础用法父组件子组件useCallback是react中比较重要的一个hookuseCallback 用来返回一个函数，在父子组件传参或者通用函数封装中,起到举足轻重的作用。基础用法useCallba...

• 2023-01-05

47浏览

0评论

React中井字棋游戏的实现示例

目录需求分析实现分析涉及的组件涉及的状态编码实现项目初始化定义各个组件的props/stateSquare组件propsBoard组件propsGame组件state各组件代码SquareBoardGame最近开始接...

• 2023-01-05

260浏览

0评论

React 函数式组件和类式组件详情

目录前言1. 函数式组件2. 类式组件前言React 是 组件化的 的 JS 库，组件化 也是 React 的核心思想。使用 React 可以构建管理自身状态的封装组件，然后对其组合以构成复杂的 UI...

• 2023-01-05

38浏览

0评论

关于React动态修改元素样式的三种方式

目录React动态修改元素样式1.借助ref动态修改样式2.通过动态控制状态的变化修改元素的样式（两种方式）3.通过在DOM中使用JS代码（三元运算符）React样式冲突问题css-样式私有化cssM...

• 2023-01-05

39浏览

0评论

React事件监听和State状态修改方式

目录React事件监听和State状态修改React事件监听相关例子React事件监听和State状态修改on*函数可直接使用，但只能使用在html标签上，自己创建的组件标签不可组件可以增加state...

• 2023-01-05

35浏览

0评论

React如何使用axios请求数据并把数据渲染到组件

目录一、安装boostrap、axios二、在src目录下新建一个List.js,在List.js中三、在app.js中引入List.js并渲染四、在create-react-app脚手架跑起来项目开始这个实例之前需要对...

• 2023-01-05

41浏览

0评论

react函数组件useState异步,数据不能及时获取到的问题

目录react useState异步,数据不能获取到问题解决方法一react中useState的使用及注意事项基本使用注意事项react useState异步,数据不能获取到useState() 属于异步函数，在useS...

• 2023-01-05

36浏览

0评论

React报错之Object is possibly null的问题及解决方法

目录类型守卫非空断言总结类型守卫使用类型守卫来解决React中useRef钩子“Object is possibly null”的错误。比如说，if (inputRef.current) {} 。一旦null被排除...

• 2023-01-05

45浏览

0评论

React 如何向url中添加参数

目录React 向url中添加参数React 获取url后面参数的值React 向url中添加参数用@withRouter修饰组件，把不是通过路由切换过来的组件中，将react-router 的 history、location、m...

• 2023-01-05

36浏览

0评论

React函数组件useContext useReducer自定义hooks

目录一、hooks（useContext）二、hooks（useReducer）三、hooks（useContext搭配useReducer使用）四、自定义hooks一、hooks（useContext）接收一个 context 对象（React.createContext 的返回...

• 2023-01-05

44浏览

0评论

React Hook中useState更新延迟问题及解决

目录React Hook中useState更新延迟React Hook useState连续更新对象问题React Hook中useState更新延迟方法一：去掉useEffect的第二个参数例如以下代码 错误实例const[zoom, s...

• 2023-01-05

37浏览

0评论

React报错之组件不能作为JSX组件使用的解决方法

目录总览返回单个JSX元素不要忘记返回值更新React类型声明总览组件不能作为JSX组件使用，出现该错误有多个原因：返回JSX元素数组，而不是单个元素。从组件中返回JSX元素或者null...

• 2023-01-05

284浏览

0评论

React报错map() is not a function详析

目录总览Array.isArrayArray.fromObject.keys总览当我们对一个不是数组的值调用map()方法时，就会产生"TypeError: map is not a function"错误。为了解决该错误，请将你调用map...

• 2023-01-05

32浏览

0评论

React Native 中处理 Android 手机吞字的解决方案

目录复现问题解决问题示例React Native App 在部分型号的 Android 手机上，可能会发生文字显示不全的问题。官方也有一个 相关的 Issue ，并提供了如下的解决方案：const defaultF...

• 2023-01-05

36浏览

0评论

React前端渲染优化--父组件导致子组件重复渲染的问题

目录React前端渲染优化--父组件导致子组件重复渲染说明一般的优化方式项目中常见会导致重复渲染的写法以及改进方法组件重复渲染问题(pureComponent, React.memo, useMemo,...

• 2023-01-05

49浏览

0评论

React hooks useState异步问题及解决

目录React Hooks useState异步问题原因解决方法React中useState异步更新小坑问题点React Hooks useState异步问题最近在开发中遇到一个问题 我接口请求回来的数据 用useStat...

• 2023-01-05

54浏览

0评论

Redux中异步action与同步action的使用

异步actionaction：Object{} => 同步actionaction：function() => 异步action 同步action异步action类型Object类型的对象function()函数dispatch(action)同步的action被dispatc...

• 2023-01-05

53浏览

0评论

在 React Native 中给第三方库打补丁的过程解析

目录安装使用示例有时使用了某个React Native 第三方库，可是它有些问题，我们不得不修改它的源码。本文介绍如何修改源码又不会意外丢失修改结果的方法。我们可能不方便给原作...

• 2023-01-05

43浏览

0评论

react嵌套路由实现TabBar的实现

有两种页面,一种是有TabBar的页面,如下图; 一种是无TabBar的页面有TabBar的页面使用嵌套路由来实现嵌套路由:路由内部包含路由使用步骤1 在pages文件夹创建News/index.js组...

• 2023-01-05

36浏览

0评论

React和Vue的props验证示例详解

目录React中的props校验react中单一类型校验器设定属性类型和默认值设置必需属性react中组合类型校验器PropTypes.oneOfTypePropTypes.arrayOfPropTypes.objectOfPropTypes....

• 2023-01-05

45浏览

0评论

详解React Fiber架构原理

目录一、概述二、Fiber架构2.1 执行单元2.2 数据结构2.3 Fiber链表结构2.4 Fiber节点2.5 API2.5.1 requestAnimationFrame2.5.2 requestIdleCallback三、Fiber执行流程3.1 r...

• 2023-01-05

34浏览

0评论

基于React路由跳转的几种方式

目录React路由跳转的几种方式1. params形式2. 使用state的形式React路由跳转传参问题使用Link传参url传参隐式传参React路由跳转的几种方式注意： 这里使用的react-router-dom...

• 2023-01-05