目录什么是并发它和 React 有什么关系中断和切换是如何工作的那 Suspense 呢？如何启动 transition结束语什么是并发并发是一种执行模型，它允许程序的不同部分可以不按顺序执行，而不影响最终结果。你可能听说过多线程或多进程。由于浏览器中的 JavaScript 只能访问一个线程（虽然 Web Workers 在单独的线程中运行，但它们和 Re
......
68
0
0
2024-08-17
前言Reack Hooks自从16.8发布以来，社区已经有相当多的讨论和应用了，不知道各位在公司里有没有用上这个酷炫的特性~今天分享一下利用React Hooks实现一个功能相对完善的todolist。特点：利用自定义hook管理请求利用hooks做代码组织和逻辑分离界面预览体验地址codesandbox.io/s/react-hoo…代码详解界面首先我们引
......
144
0
0
2024-05-12
React 知命境第 46 篇，原创第 160 篇这篇是年前最后一篇分享 React 知命境 的文章。到目前为止，知命境这个合集里已经包含了大量的内容，足够我们在 React 上成为成为一名高手，也有许多付费群里的朋友陆陆续续靠合集里的内容找到了更好的工作，也算是把之前对群友承诺的坑补齐了，延后了很久实在是抱歉。后续 React 知命境的内容会根据大家在群里
......
191
0
0
2024-05-11
摘要本文总结了 ReactNative 开发中常见问题及解决方法。从 ScrollView 在 TouchableOpacity 组件内滑动困难到 Xcode 编译路径设置，都有相应解决方案。此外，还介绍了热更新问题、高度获取、强制横屏UI适配、清理缓存等实用技巧。引言ReactNative 作为一种跨平台开发框架，尽管强大，但也常伴随着一些问题。本文收集并
......
174
0
0
2024-03-19
React 知命境第 35 篇，原创第 142 篇我们知道，Scheduler 是 React 提供的底层调度器。但是这个调度器具体是如何用的，可能大部分人都不太清楚了，好在 React 把内部的模块封装得都相对独立，因此，我们可以想个办法，单独把他的 Scheduler 或者 Reconciler 单独掏出来用。1怎么掏在 React 的 github 仓
......
182
0
0
2024-03-15
当前问题现在编译时间过长,镜像构建时长就达到了20分钟+通过项目依赖升级后,镜像构建时长大约3-5分钟修改内容之前的技术方案:roadhog(2.x)+antd(3.x)+React(16.x)+dva(2.x)现在的技术方案:[Create React App]craco(7.x)+antd(5.x)+React(18.x)+react-redux(9.x
......
172
0
0
2024-03-11
Suspense 组件想必大家都用过，一般是和 React.lazy 结合用，用来加载一些异步组件。比如这样一个组件：// src/Aaa.jsx
export default function Aaa() {
return <div>aaa</div>
}
就可以在另一个组件里用 lazy + Suspense 异步
......
431
0
0
2024-03-10
React 知命境第 31 篇在 React 中，有一个高大上的概念，叫做并发模式 Concurrent React。在并发模式中，引入了两个新概念：任务优先级、异步可中断。当一个任务正在 Reconciler 阶段执行时，如果此时 Scheduler 发现了一个优先级更高的任务，那么，React 可以把正在执行的任务中断，从 Scheculer 中把优先级
......
200
0
0
2024-03-04
引用方式第一种：内联方式可以使用变量或者传统的内联方式优点: 只生效于当前组件
缺点: 可能产生大量重复代码
import react, { Component } from "react";
const sty = {
width: "100px",
backgroundColor: "#FFFFFF", //注意：需要使用驼峰
......
168
0
0
2024-02-25
「React 知命境」第 29 篇在前面的章节中，我们学习了 context 的使用方式，基于它我们可以搞一个自己的状态管理库。不过，他存在性能上的问题，以致于虽然从功能的实现上来说，他非常不错，但是从性能上来说，context 的表现非常糟糕，虽然很少有 React 学习者关注到这个问题，但是如果你关注项目的整体架构，并且想要成为顶尖高手的话，这是你必须掌
......
169
0
0
2024-02-19
条件渲染和其它的语言一样的逻辑在 React 中,我们可以通过 JavaScript 里面咋用的它里面就咋用比如使用 JavaScript 的 if 语句、&& 和 ? : 运算符来选择性地渲染 JSX条件返回不同的 JSX我们定义一个水果集合组件,里面定义多个水果组件,每个物品可标记为打包与否接下来我们给 JSX 组件判断一下 true 为
......
183
0
0
2024-02-15
react18-webchat 基于vite4.x+react18创建网页版聊天实战项目。使用了react18+react-router+zustand+arco design+react-dialog等技术开发构建项目。react-webchat 整个项目遵循react18 hooks编码开发。支持图文混合emoj、图片/视频预览、红包/朋友圈、网址预览等
......
211
0
0
2024-02-04
React 在如何组织结构方面非常开放。这正是为什么我们有责任保持项目的整洁和可维护性。今天，我们将讨论一些改善 React 应用程序健康状况的最佳实践。这些规则被广泛接受。因此，掌握这些知识至关重要。所有内容都将以代码展示，所以做好准备！1. 使用 JSX 简写尝试使用 JSX 简写来传递 Boolean 布尔值变量。假设您想要控制导航栏组件的标题可见性。
......
201
0
0
2024-02-04
React Hooks是React 16.8版本引入的新特性，它的作用是为函数组件提供了状态管理和副作用处理的能力。在React之前，函数组件被限制在只能使用无状态的函数组件，无法使用状态和生命周期方法。Hooks的引入解决了这个限制，使得函数组件可以拥有和类组件相似的功能。React Hooks的主要作用包括：状态管理：通过useState Hook，函数
......
211
0
0
2024-02-03
背景在前端开发的过程中,一些表单的输入经常需要输入多个内容,如果采用一个输入框+逗号分隔的方式,展示起来不是很清晰,一般需要采用标签的方式需求可以指定空状态时的标题设置标签颜色每个标签的最大长度(字符数)接口传递的时候的分隔标记(是用逗号,还是其他)直接处理表单,不需要二次处理所以需要传入以下内容给该组件title:标题separator:分隔标记maxLe
......
194
0
0
2024-02-03