编程开发 - 教程之家

编程开发

分类导航：HTML/html5 CSS JavaScript PHP Python Java IOS .NET R语言 Android Go语言鸿蒙OS C类语言综合编程正则表达式

45浏览

0评论

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

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

2023-01-05 20:48:09

42浏览

0评论

react hooks闭包陷阱切入浅谈

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

2023-01-05 20:48:06

194浏览

0评论

ahooks控制时机的hook实现方法

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

2023-01-05 20:48:04

30浏览

0评论

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

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

2023-01-05 20:48:03

50浏览

0评论

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

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

2023-01-05 20:48:00

36浏览

0评论

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

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

2023-01-05 20:47:58

43浏览

0评论

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

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

2023-01-05 20:47:56

47浏览

0评论

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

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

2023-01-05 20:47:55

38浏览

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 20:47:53

38浏览

0评论

详解React hooks组件通信方法

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

2023-01-05 20:47:48

51浏览

0评论

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

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

2023-01-05 20:47:47

51浏览

0评论

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

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

2023-01-05 20:47:46

53浏览

0评论

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

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

2023-01-05 20:47:44

44浏览

0评论

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

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

2023-01-05 20:47:42

48浏览

0评论

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

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

2023-01-05 20:47:36

44浏览

0评论

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

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

2023-01-05 20:47:34

46浏览

0评论

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

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

2023-01-05 20:47:33

48浏览

0评论

关于react中useCallback的用法

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

2023-01-05 20:47:31

54浏览

0评论

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

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

2023-01-05 20:47:29

265浏览

0评论

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

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

2023-01-05 20:47:28

39浏览

0评论

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

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

2023-01-05 20:47:26

40浏览

0评论

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

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

2023-01-05 20:47:24

36浏览

0评论

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

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

2023-01-05 20:47:23

42浏览

0评论

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

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

2023-01-05 20:47:21

37浏览

0评论

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

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

2023-01-05 20:47:19

46浏览

0评论

React 如何向url中添加参数

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

2023-01-05 20:47:16

37浏览

0评论

React函数组件useContext useReducer自定义hooks

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

2023-01-05 20:47:13

45浏览

0评论

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

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

2023-01-05 20:47:07

38浏览

0评论

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

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

2023-01-05 20:47:05

288浏览

0评论

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

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

2023-01-05 20:47:03

33浏览

0评论

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

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

2023-01-05 20:47:00

38浏览

0评论

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

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

2023-01-05 20:46:59

50浏览

0评论

React hooks useState异步问题及解决

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

2023-01-05 20:46:56

56浏览

0评论

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

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

2023-01-05 20:46:54

54浏览

0评论

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

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

2023-01-05 20:46:53

44浏览

0评论

react嵌套路由实现TabBar的实现

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

2023-01-05 20:46:50

37浏览

0评论

React和Vue的props验证示例详解

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

2023-01-05 20:46:47

46浏览

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 20:46:44

37浏览

0评论

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

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

2023-01-05 20:46:41

55浏览

0评论

React报错解决之ref返回undefined或null

目录总览useEffect事件总结总览当我们试图在其对应的DOM元素被渲染之前访问其current属性时，React的ref通常会返回undefined或者null。为了解决该问题，可以在useEffect钩子中...

2023-01-05 20:46:40

44浏览

0评论

React反向代理及样式独立详解

目录一、反响代理1.1 安装1.2 使用二、cssModule一、反响代理1.1 安装使用命令：npm install http-proxy-middleware --save 1.2 使用将之前的Film.js组件改成如下：import Reac...

2023-01-05 20:46:38

43浏览

0评论

react中useState使用:如何实现在当前表格直接更改数据

目录如何实现在当前表格直接更改数据需求效果如下具体做法useState修改对象的字段如何实现在当前表格直接更改数据需求用户点击修改按钮时直接在弹出框的当前页面内直接再次...

2023-01-05 20:46:35

41浏览

0评论

react使用useState修改对象或者数组的值无法改变视图的问题

目录使用useState修改对象或者数组的值无法改变视图解决办法关于useState使用及注意事项一、基本使用二、注意事项使用useState修改对象或者数组的值无法改变视图在react中...

2023-01-05 20:46:34

34浏览

0评论

React Native 中添加自定义字体的方法

目录添加字体定义 assets 目录执行 link 命令在样式中使用字体示例在 React Native 中，如何添加自定义字体呢？React Native 提供了便捷的命令行工具来帮助我们。添加字体在项...

2023-01-05 20:46:32

31浏览

0评论

React路由拦截模式及withRouter示例详解

目录一、路由拦截二、路由模式三、withRouter一、路由拦截在前面两篇路由博客基础上，我们将ReactRouter.js的我的profile路由设置成路由拦截的：<Route path="/profile" rende...

2023-01-05 20:46:29

200浏览

0评论

解决react组件渲染两次的问题

目录react组件渲染两次react总结之避免不必要的重复渲染类组件PureComponent使用插件seamless-immutable使用插件pure-render-decoratorreact组件渲染两次可能会有人问，问什...

2023-01-05 20:46:26

27浏览

0评论

react中使用usestate踩坑及解决

目录usestate的常规用法useState遇到的坑1、useState不适合复杂对象的更改2、useState异步回调的问题3、根据hook的规则,使用useState的位置有限制4、使用useState,回调函数...

2023-01-05 20:46:24

267浏览

0评论

react-redux action传参及多个state处理的实现

目录action 中传递参数多个state状态action 中传递参数App.js 中传递自己的参数function App (props){ console.log(props,'===') return ( <div> <h1>redux</h1...

2023-01-05 20:46:23

288浏览

0评论

React Native 中限制导入某些组件和模块的方法

目录限制使用 Touchable限制使用 Image同时限制两者示例有些时候，我们不希望使用某些组件，而是想使用其他组件。这时候，我们可以使用一个名为 no-restricted-imports 的eslint...

2023-01-05 20:46:20

41浏览

0评论

React实现下拉框的key,value的值同时传送

目录React下拉框的key,value的值同时传送需求总结思路React属性传值 key:value形式key:value传值React下拉框的key,value的值同时传送需求一般下拉框选择后会传送一个ID号给...

2023-01-05 20:46:19

首页 «161 162163164 165 »尾页

热门文章