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

刚好手上有一个要实现文字跑马灯的react项目，然后ant-design上面没有这个组件，于是只能自己手撸一个。 我想到的最简单的方法，就是定位啦，定时移动这个文字块不就跑起来了。 需要注意的是，要判断文字的宽度，当文字超出屏幕的宽度的时候再动起来，我用的是hook的写法，要在销毁页面的时...[2023/1/16]

目录为什么需要 fiberfiber 之前fiber 之后fiber 节点结构dom 相关属性tagkey 和 typestateNode链表树相关属性副作用相关属性flagsEffect List其他lanealternatefiber 树的构建与更新mount 过程update 过程总结 rea...[2023/1/11]

其他章节请看： react 高效高质量搭建后台系统 系列 请求数据 后续要做登录模块（主页），需要先和后端约定JSON数据格式，将 axios 进行封装，实现本地的数据模拟 mockjs。 Tip：spug 中后端返回 json 通常有 data 和 error两个 key。就像这样：...[2023/1/6]

目录总览映射提取 总览 在React中，当我们为元素的style 属性传递字符串时，会产生"Style prop value must be an object"警告。为了解决该警告，使用从属性到值的映射。比如说，style={{paddingLeft: '15p...[2022/12/5]

需求：vue3中setup组合式api中如何定义响应式数据并且修改赋值呢？ 1、字符串/数字：“ref”是vue3中用来存储值的响应式数据源，它可以定义字符串，数字等 <script setup> import { ref } from ''vue''...[2022/12/5]

目录总览useNavigateJestreplace 总览 当我们尝试在react router的Router上下文外部使用useNavigate 钩子时，会产生"useNavigate() may be used only in the context of a Router...[2022/12/5]

目录高阶组件（HOC）概述使用HOC解决横切关注点问题不用改变原始组件使用组合约定-将不相关的 props 传递给被包裹的组件约定-最大化可组合性约定-包装显示名称以便轻松调试使用高阶组件的注意事项 高阶组件（HOC） 概述 是React复用组件逻辑的一种高级技巧，是一种基于React组合特...[2022/12/5]

目录总览备用值useStatedefaultValue 总览 当input的值被初始化为undefined，但后来又变更为一个不同的值时，会产生"A component is changing an uncontrolled input to be controlled"...[2022/12/5]

目录前言状态下移内容提升 前言 本专栏的另一篇文章，讲到了 useMemo 有一定的开销，不能滥用，本篇文章讲解两个简单实用的优化组件渲染性能的方法： 状态下移内容提升 在讲解这两种方法之前，我们需要先手动创建一个有严重渲染性能的组件，如下所示： import { useState }...[2022/11/28]

目录setState异步更新那么为什么setState设计为异步呢？如何获取异步的结果setState一定是异步的吗？ setState异步更新 开发中当组件中的状态发生了变化，页面并不会重新渲染。我们必须要通过setState来告知React数据已经发生了变化，重新渲染页面。 先来看下面的...[2022/11/19]

目录前言什么是Concurrent React？设置项目实现 useTransition()isPending 是做什么的？ 前言 React 18 引入了一个关键的新概念，称为“Concurrent”。 并发涉及同时执行多个状态更新，这可以说是 React 18 中...[2022/9/15]

目录一、基本使用二、路由跳转2.1 Link 组件2.2 NavLink 组件2.3 编程式跳转三、动态路由参数3.1 路径参数路径匹配规则兼容类组件3.2 search 参数四、嵌套路由5.1 路由定义5.2 在父组件中展示5.3 在组件中定义五、默认路由六、全匹配路由七、多组路由八、路由重定向九...[2022/9/15]

目录背景UI 组件容器组件connect()mapStateToProps()mapDispatchToProps()组件实例：计数器 背景 在前面文章一文理解Redux及其工作原理中，我们了解到redux是用于数据状态管理，而react是一个视图层面的库 如果将两者连接在一起，可以使用官方...[2022/9/15]

本文实例为大家分享了React封装弹出框组件的方法，供大家参考，具体内容如下 效果图 文件目录 alertList.tsx 用于容纳弹出框的容器 import React from "react"; export const HAlertList = ...[2022/8/23]

本例基于react实现了一个简单的确认弹窗，可以让我们在项目中根据需要随时调用 创建全局modal组件 此处我将弹窗模态框独立出来，用户可以通过传入组件或Element来填充模态框的内容。 import ReactDOM from ''react-dom''; import React...[2022/8/23]

本文实例为大家分享了react-native弹窗封装的具体代码，供大家参考，具体内容如下 上图 仿苹果弹窗组件（android+ios均可用） 以上效果均基于本文的弹窗组件，后续将会介绍上面的组件，也可基于改组件定制更多组件 安装依赖 yarn add react...[2022/8/23]

目录一、预备知识：二、创建项目步骤：三、启动项目时可能出现的报错：四、Todolist项目相关库：五、GitHub搜索案例相关库：六、尚硅谷路由案例相关库：七、UI库案例相关库：八、redux相关库： 一、预备知识： npm (也可以用yarn，本文以npm为例) npm介绍 全称为Nod...[2022/8/23]

React Hook实现对话框组件，供大家参考，具体内容如下 准备 思路：对话框组件是有需要的时候希望它能够弹出来，不需要的时候在页面上是没有任何显示的，这就意味着需要一个状态，在父组件点击按钮或其他的时候能够更改+ 它并显示，同时子组件（对话框组件）点击关闭的时候也需要更改这个状态。 &...[2022/8/23]

目录引言遇到的困境1. 如何表达渲染结果？2. 如何测试并发环境？React的应对策略实现一个渲染器如何测试并发环境？总结 引言 React18进入大家视野已经有一段时间了，不知道各位有没有尝试并发特性呢？ 当启用并发特性后，React会从同步更新变为异步、带优先级、可中断的更新。 这也...[2022/8/23]

目录功能分析代码示例prefetchdelayError源码分析Flux#publishOn()Flux#subscribe()FluxPublishOn#subscribeOrReturn()FluxPublishOn#onSubscribe()非融合FluxPublishOn#onNext()F...[2022/8/15]

目录路由组件和组件的区别Swith内置组件使用react 路由传参编程式导航Redirect重定向 路由组件和组件的区别 路由组件时被Router组件使用的组件，this.props里面有三个参数，分别是history、match、location 可以接收到路由跳转传参，也可以进行编程式导...[2022/8/15]

目录引言源码解读输入内容ProvidergenerateElement其他组件总结 引言 react-live 是一个 react 的实时编辑器，可直接编辑 react 代码，并实时预览。可以看下官方的预览图： 本文针对的源码版本 src ├── components │ ...[2022/8/15]

目录React Component vs ComposableJSX vs DSLloopIf statementkey componentChildren Prop vs Children ComposableContext vs Ambient(CompositionLocal)createCo...[2022/8/3]

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

目录前言1. 函数式组件2. 类式组件 前言 React 是 组件化的 的 JS 库，组件化 也是 React 的核心思想。使用 React 可以构建管理自身状态的封装组件，然后对其组合以构成复杂的 UI。那么什么是组件呢？ 组件是用来实现局部功能效果的代...[2022/8/2]

目录添加字体定义 a ets 目录执行 link 命令在样式中使用字体示例 在 React Native 中，如何添加自定义字体呢？React Native 提供了便捷的命令行工具来帮助我们。 添加字体 在项目根目录下创建 a et fonts 文件夹，把字体文件放到这个文件夹下。 如图...[2022/8/1]

目录安装依赖和配置使用示例 有些前端工程师希望也能像开发 web 应用那样，使用 CSS Modules 来开发 React Native。本文将介绍如何在 React Native 中使用 CSS Modules。 安装依赖和配置 首先安装 react-native-sa -tr...[2022/8/1]

目录ref 的基础特性如何在ref中指定类型reactiveisRef、isReactivetoRef、toRefs、toRaw ref 的基础特性 ref 约等于 reactive({ value: x }) ref() 可以定义时无参数，第一次赋值任意类型，然后就不能增加属性 con...[2022/6/27]

目录一. url是什么二. 使用步骤 一. url是什么 访问不同url, 展示不同的组件 二. 使用步骤 安装React路由：命令行中执行npm install react-router-dom --save(注意此处的版本为npm install react-router-dom@4...[2022/4/18]

效果 /* * @Author: hongbin * @Date: 2022-04-16 13:26:39 * @LastEditors: hongbin * @LastEditTime: 2022-04-16 21:00:02 * @Description:拖动进度...[2022/4/18]

目录一、Diff算法的作用二、React的Diff算法  1、什么是调和？2、什么是Reactdiff算法？3、diff策略4、treediff：5、componentdiff:6、elementdiff 三、基于Diff的开发建议总结 一、Diff算法的作用 渲染...[2022/3/14]

目录reactreact-domreact-reconcilerscheduler总结 react 提供定义 react 组件(ReactElement)的必要函数, 一般来说需要和渲染器(react-dom,react-native)一同使用. 在编写react应用的代码时, 大部分都是调用此包...[2022/3/14]

目录一般memo用法：问题描述解决方法方案一.使用useRef+forceUpdate方案方案2.使用useCallback总结 与PureComponent不同的是PureComponent只是进行浅对比props来决定是否跳过更新数据这个步骤，memo可以自己决定是否更新，但它是一个函数组件而非...[2022/3/8]

本文实例为大家分享了react实现导航栏二级联动的具体代码，供大家参考，具体内容如下 效果图 js代码 import { Component } from "react"; import ''. croll.le '' ? cla Scroll extends Compo...[2022/3/8]

目录1-单级路由2-嵌套路由（about路径进行嵌套）ReactRouterv6使用路由嵌套和重定向 1 - 单级路由 <NavLink to="/home">Home</NavLink> <NavLink to="/about">about</Nav...[2022/3/7]

目录开篇思路实现自定义Hook-useForkRef 开篇 使用过 React 技术栈的同学相信都使用过 ref 传递给 render 中的元素，而在使用 React 封装组件时，会有这样一个场景： 组件将 props.children 作为 render 内容；组件内部会创建 ref 绑定...[2022/3/7]

目录React三大属性props函数组件类组件state有状态组件和无状态组件setStateprops和state属性的区别refsReact.createRefref的绑定总结 React三大属性 props 组件是封闭的，接收外部数据应该通过props来实现函数组件通过参数props来接...[2022/2/28]

目录用法变化替换为嵌套路由重定向路由跳转路由传参search传参动态路由传参其他总结 React Router应该是React生态系统中最受欢迎的库了，npm周下载量达600w+，github也有45.2k的加星，足以说明它是一款非常优秀的库，作为React社区重要的库，它经历了多次迭代和重大更改，...[2022/1/18]

目录类组件事件绑定函数组件事件绑定总结 React事件绑定和原生DOM事件绑定相似 语法:on+事件名={事件处理程序} 例如:onClick={()=>{}} 注意:React事件采用驼峰命名法 类组件事件绑定 import React f...[2021/12/17]

璇ユ柟妗堜娇鐢ㄥ満鏅細鍦╤tml椤甸潰涓娇鐢╮eact锛屼富js鏂囦欢index.js鍜屽叾瀹冮潪react鍔熻兘浣跨敤js妯″潡鍖栫殑鏂瑰紡寮€鍙戯紝閫傚悎杞婚噺绾т腑灏忓瀷搴旂敤 index.html浠ｇ爜锛?/p> 寮曞叆react銆乺eact-dom銆乥abel銆乵oment銆...[2021/12/15]

setup 是用来写组合式 api ，内部的数据和方法需要通过 return 之后，模板才能使用。在之前 vue2 中，data 返回的数据，可以直接进行双向绑定使用，如果我们把 setup 中数据类型直接双向绑定，发现变量并不能实时响应。接下来就看看setup如何实现data的响应式功能？ 一...[2021/11/23]

跨域解决方案 ? jsonp(模拟get) CORS(跨域资源共享) 代理 iframe postMe age window.name WebSocket react的代理实现跨域 在配置在src etupProxy.js文件，并通过npm安装http-proxy-...[2021/11/23]

目录一、redux和react的关系二、react多组件共享三、redux的三个核心概念1、store2、action （动作）3、reducer （纯函数）总结 文档： Redux中文文档 Redux 官方文档对 Redux 的定义是：一个可预测的 JavaScript 应用状态管...[2021/11/16]

目录组件通讯介绍内容三种方式小结组件通讯-父传子内容：核心代码子组件接收数据组件通讯-子传父思路步骤核心代码小结组件通讯-兄弟组件思路核心代码组件通讯 -跨级组件通讯使用Context的步骤落地代码总结 组件通讯介绍 内容 组件是独立且封闭的单元，默认情况下，只能使用组件自己的数据...[2021/11/9]

前言 作为一个前端框架的重度使用者,在技术选型上也会非常注意其生态和完整性.笔者先后开发过基于vue,react,angular等框架的项目,碧如vue生态的elementUI, ant-design-vue, iView等成熟的UI框架, react生态的ant-design, mate...[2021/11/9]

目录dva使用dva实现dva支持异步router的实现实现： dva dva是一个基于redux和redux-saga的数据流方案，然后为了简化开发体验，dva额外内置了react-router,fetch，可以激烈为一个轻量级的应用框架。 使用dva 定义一个模型，有点像...[2021/11/8]

Lottie是Airbnb开源的一个面向iOS、Android、React Native的动画库，能加载Adobe After Effects导出的动画，并且能让原生App像使用静态素材一样使用这些动画，完美实现炫酷的动画效果。 使用流程上，Lottie动画需要先使用Adobe After Ef...[2021/10/8]

目录后端：Rails API部分前端：React部分React组件使用 axios 获取 API 数据 【51CTO.com快译】使用React创建项目时，动态数据无法保存的问题要怎么办呢？为此，我开始寻找一个充当备份的API来解决这一问题。 在本文中，我将介绍如何设置和构建一个以Reac...[2021/8/9]

目录Portals 错误边界处理 如果没有使用错误边界会怎样？ 注意点 Portals 可以说是 插槽，但 不同于 Vue 中的 slot，它指的是将一个 React 元素渲染到指定的容器 (真实 DOM) 中 比如说，Modal 组件一般默认直接作为 body 的真实结构的子元素...[2021/7/21]