97浏览

0评论

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

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

• 2023-01-05

98浏览

0评论

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

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

• 2023-01-05

101浏览

0评论

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

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

• 2023-01-05

96浏览

0评论

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

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

• 2023-01-05

109浏览

0评论

React 如何向url中添加参数

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

• 2023-01-05

89浏览

0评论

React函数组件useContext useReducer自定义hooks

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

• 2023-01-05

105浏览

0评论

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

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

• 2023-01-05

97浏览

0评论

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

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

• 2023-01-05

376浏览

0评论

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

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

• 2023-01-05

97浏览

0评论

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

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

• 2023-01-05

96浏览

0评论

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

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

• 2023-01-05

111浏览

0评论

React hooks useState异步问题及解决

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

• 2023-01-05

110浏览

0评论

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

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

• 2023-01-05

110浏览

0评论

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

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

• 2023-01-05

100浏览

0评论

react嵌套路由实现TabBar的实现

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

• 2023-01-05

93浏览

0评论

React和Vue的props验证示例详解

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

• 2023-01-05

116浏览

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

110浏览

0评论

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

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

• 2023-01-05

110浏览

0评论

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

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

• 2023-01-05

104浏览

0评论

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

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

• 2023-01-05

102浏览

0评论

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

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

• 2023-01-05

90浏览

0评论

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

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

• 2023-01-05

96浏览

0评论

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

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

• 2023-01-05

85浏览

0评论

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

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

• 2023-01-05

257浏览

0评论

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

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

• 2023-01-05

85浏览

0评论

react中使用usestate踩坑及解决

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

• 2023-01-05

356浏览

0评论

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

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

• 2023-01-05

378浏览

0评论

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

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

• 2023-01-05

97浏览

0评论

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

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

• 2023-01-05

121浏览

0评论

react redux的原理以及基础使用讲解

目录介绍为什么会使用 redux？什么时候该使用 redux？redux使用场景redux 作用工作流程使用1.下载2.创建仓库store骨架3.生成仓库4.参数函数的创建 reducer5.引入reducer来辅助s...

• 2023-01-05

99浏览

0评论

React构建简洁强大可扩展的前端项目架构

目录引言 Bulletproof React是什么文件目录如何组织怎么做状态管理组件状态应用状态服务端缓存状态表单状态URL状态总结引言 React技术栈的一大优势在于 —— 社...

• 2023-01-05

422浏览

0评论

在 React Native 中使用 CSS Modules的配置方法

目录安装依赖和配置使用示例有些前端工程师希望也能像开发 web 应用那样，使用 CSS Modules 来开发 React Native。本文将介绍如何在 React Native 中使用 CSS Modules。安装...

• 2023-01-05

101浏览

0评论

关于react ant 组件 Select下拉框 值回显的问题

目录react ant组件Select下拉框值回显问题情形解决得问题react ant-design Select组件下拉框map不显示问题描述问题总结react ant组件Select下拉框值回显问题情形最近在处理...

• 2023-01-05

100浏览

0评论

关于react中列表渲染的局部刷新问题

目录react中列表渲染的局部刷新react实现实时/局部刷新初始做法示例增加数据修改数据删除数据react中列表渲染的局部刷新最近在写demo的时候遇到一个更新列表中某个的对象的...

• 2023-01-05

95浏览

0评论

React深入了解原理

目录VDOM（虚拟dom）Fiber架构初始化渲染更新时render阶段commit阶段VDOM（虚拟dom）react和vue都是基于vdom的前端框架。web界面由DOM树来构建，当其中一部分发生变化时，其实就是对应...

• 2023-01-05

113浏览

0评论

React弹窗使用方式NiceModal重新思考

目录一些有趣的真实场景案例一：全局弹窗案例二：存在分支以及依赖关系的弹窗不那么通用的解决方案可能是最好的弹窗实践创建弹窗使用弹窗简单实现思路推荐阅读一些有趣的真实场...

• 2023-01-05

93浏览

0评论

react进阶教程之异常处理机制error Boundaries

目录Error Boundaries介绍ComponentDidCatch 参数触发error boundaries后程序要走向哪里？对于不能捕获的错误的新处理方式在堆中跟踪componenttry/catch 如何?Event Handlers...

• 2023-01-05

117浏览

0评论

React在定时器中无法获取状态最新值的问题

目录在定时器中无法获取状态最新值问题原因问题解决ReactHook hooks和定时器产生的bug问题1解决方案 在定时器中无法获取状态最新值在做轮播图组件时发现了一个问题，...

• 2023-01-05

107浏览

0评论

React实现监听粘贴事件并获取粘贴板中的截图

目录监听粘贴事件并获取粘贴板中的截图TSX中给组件添加监听粘贴事件从粘贴板获取截图文件React监听事件事件监听绑定的事件函数相关扩展监听粘贴事件并获取粘贴板中的截图TS...

• 2023-01-05

163浏览

0评论

react-router-dom入门使用教程(前端路由原理)

目录React路由相关理解...

• 2023-01-05

126浏览

0评论

react-router-dom入门使用教程(路由的模糊匹配与严格匹配)

目录模糊匹配开启严格匹配Redirect的使用嵌套路由使用模糊匹配<!-- 编写路由链接 --><NavLink to="/home/a/b">Home</NavLink><!-- 注册路由 --><Switch> <Route path="/ho...

• 2023-01-05

120浏览

0评论

react性能优化useMemo与useCallback使用对比详解

目录引言对比useMemouseCallback引言在介绍一下这两个hooks的作用之前，我们先来回顾一下react中的性能优化。在hooks诞生之前，如果组件包含内部state，我们都是基于class的形式...

• 2023-01-05

113浏览

0评论

react-redux的基本使用

目录react-redux和redux的关系？react-redux基本使用1.安装2.配置3.组件中使用react-redux和redux的关系？redux是react中进行状态管理的js库（不是react插件），一般是管理多个组件中...

• 2023-01-05

104浏览

0评论

react中使用antd及immutable示例详解

目录一、react中使用antd组件库二、Immutable2.1 深拷贝和浅拷贝的关系2.2 immutable优化性能方式2.3 immutable的Map使用2.4 immutable的List使用2.5 实际场景formJS三、re...

• 2023-01-05

112浏览

0评论

react如何获取state的值并更新使用

目录react获取state值并更新使用在视图层处理在model层处理react中state基本使用有状态组件和无状态组件state的基本使用setState修改状态从JSX中抽离事件处理程序事件绑定t...

• 2023-01-05

105浏览

0评论

React在组件中如何监听redux中state状态的改变

目录在组件中监听redux中state状态的改变解决方式React和redux的状态处理在组件中监听redux中state状态的改变解决方式1、在组件中引入store2、在constructor构造器方法中，重...

• 2023-01-05

95浏览

0评论

React 正确使用useCallback useMemo的方式

目录正确使用useCallback useMemo的姿势useCallbackuseMemo总结正确使用useCallback useMemo的姿势说起useCallback useMemo大家肯定在React都不陌生，但是真正了解它们的作用...

• 2023-01-05

210浏览

0评论

React如何实现全屏监听Esc键

目录全屏监听Esc键全屏与退出全屏监听退出全屏事件React添加监听事件 监听键盘事件react添加监听事件监听键盘事件全屏监听Esc键全屏与退出全屏if (isFull) {      docum...

• 2023-01-05

126浏览

0评论

react项目升级报错,babel报错,.babelrc配置兼容等问题及解决

目录react项目升级报错,babel报错,.babelrc配置兼容问题遇到问题最终解决方案react运行报错TypeError现记录一下思路react项目升级报错,babel报错,.babelrc配置兼容问题由于...

• 2023-01-05

104浏览

0评论

React 源码调试方式

目录正文断点调试搜索定位Chrome Devtools 调试sourcemapnpm 下载react包插件注释调试 React 最初源码关联 react 源码项目总结正文什么？调试 React 源码还有优雅和不优雅之...

• 2023-01-05