React 知命境第 31 篇在 React 中,有一个高大上的概念,叫做并发模式 Concurrent React。在并发模式中,引入了两个新概念:任务优先级、异步可中断。当一个任务正在 Reconciler 阶段执行时,如果此时 Scheduler 发现了一个优先级更高的任务,那么,React 可以把正在执行的任务中断,从 Scheculer 中把优先级 ......
11
0
0
2024-03-04
引用方式第一种:内联方式可以使用变量或者传统的内联方式优点: 只生效于当前组件 缺点: 可能产生大量重复代码 import react, { Component } from "react"; const sty = { width: "100px", backgroundColor: "#FFFFFF", //注意:需要使用驼峰 ......
13
0
0
2024-02-25
「React 知命境」第 29 篇在前面的章节中,我们学习了 context 的使用方式,基于它我们可以搞一个自己的状态管理库。不过,他存在性能上的问题,以致于虽然从功能的实现上来说,他非常不错,但是从性能上来说,context 的表现非常糟糕,虽然很少有 React 学习者关注到这个问题,但是如果你关注项目的整体架构,并且想要成为顶尖高手的话,这是你必须掌 ......
16
0
0
2024-02-19
条件渲染和其它的语言一样的逻辑在 React 中,我们可以通过 JavaScript 里面咋用的它里面就咋用比如使用 JavaScript 的 if 语句、&& 和 ? : 运算符来选择性地渲染 JSX条件返回不同的 JSX我们定义一个水果集合组件,里面定义多个水果组件,每个物品可标记为打包与否接下来我们给 JSX 组件判断一下 true 为 ......
22
0
0
2024-02-15
react18-webchat 基于vite4.x+react18创建网页版聊天实战项目。使用了react18+react-router+zustand+arco design+react-dialog等技术开发构建项目。react-webchat 整个项目遵循react18 hooks编码开发。支持图文混合emoj、图片/视频预览、红包/朋友圈、网址预览等 ......
27
0
0
2024-02-04
React 在如何组织结构方面非常开放。这正是为什么我们有责任保持项目的整洁和可维护性。今天,我们将讨论一些改善 React 应用程序健康状况的最佳实践。这些规则被广泛接受。因此,掌握这些知识至关重要。所有内容都将以代码展示,所以做好准备!1. 使用 JSX 简写尝试使用 JSX 简写来传递 Boolean 布尔值变量。假设您想要控制导航栏组件的标题可见性。 ......
25
0
0
2024-02-04
React Hooks是React 16.8版本引入的新特性,它的作用是为函数组件提供了状态管理和副作用处理的能力。在React之前,函数组件被限制在只能使用无状态的函数组件,无法使用状态和生命周期方法。Hooks的引入解决了这个限制,使得函数组件可以拥有和类组件相似的功能。React Hooks的主要作用包括:状态管理:通过useState Hook,函数 ......
27
0
0
2024-02-03
背景在前端开发的过程中,一些表单的输入经常需要输入多个内容,如果采用一个输入框+逗号分隔的方式,展示起来不是很清晰,一般需要采用标签的方式需求可以指定空状态时的标题设置标签颜色每个标签的最大长度(字符数)接口传递的时候的分隔标记(是用逗号,还是其他)直接处理表单,不需要二次处理所以需要传入以下内容给该组件title:标题separator:分隔标记maxLe ......
29
0
0
2024-02-03
众所周知,JavaScript 中的闭包(Closures)一定是这种语言最可怕的特性之一,即使是无所不知的 ChatGPT 也是这样说的。另外它可能也是最隐蔽的语言特性之一,我们在编写 React 代码时经常会用到它,但是大多数时候我们甚至没有意识到这一点。但是,我们终究还是离不开它:如果我们想编写复杂且性能很好的 React 应用,就必须了解闭包。所以, ......
29
0
0
2024-01-31
目录说明题目首次渲染流程renderbeginWorkcompleteUnitOfWorkcommit准备阶段before mutation 阶段mutation 阶段切换 Fiber Treelayout 阶段题目解析总结说明本文结论均基于 React 16.13.1 得出,若有出入请参考对应版本源码。参考了 React 技术揭秘。题目在开始进行源码分析前 ......
100
0
0
2023-09-08
目录应用场景效果预览思路剖析原生代码实现迁移到React总结应用场景懒加载列表或叫做无限滚动列表,也是一种性能优化的方式,其可疑不必一次性请求所有数据,可以看做是分页的另一种实现形式,较多适用于移动端提升用户体验,新闻、资讯浏览等。效果预览思路剖析设置临界元素,当临界元素进入可视范围时请求并追加新数据。根据可视窗口和滚动元素组建的关系确定数据加载时机。con ......
101
0
0
2023-09-07
目录在 React 中从状态数组中删除一个元素:永远不要在 React 中改变状态数组根据多个条件从状态数组中删除元素使用逻辑与 (&&) 运算符使用逻辑或 (||) 运算符使用两个运算符从状态数组中删除元素从 React 中的 State 数组中删除重复项从 React 中的状态数组中删除重复对象在 React 中从状态数组中删除一个元素: ......
149
0
0
2023-09-07
目录组件的定义:React组件函数式组件类式组件组件实例三大属性statepropsrefs与事件处理组件的定义:理解:用来实现局部功能效果的代码和资源的集合(html/css/js/image等等)为什么要用组件: 一个界面的功能更复杂作用:复用编码, 简化项目编码, 提高运行效率React内的组件分为容器组件和展示组件。Re ......
178
0
0
2023-08-11
目录使用Axios发起POST请求提交文件React中fetch和axios的简单使用fetch的使用Axios的使用总结使用Axios发起POST请求提交文件通过Axios发起POST请求向后端提交文件FormData——传入文件类型参数const formData = new FormData() formData.append('key', valu ......
200
0
0
2023-08-07
目录前言目录结构开搞ConfigProviderEmpty组件实现Spin组件前言继续搞react组件库,该写table了,学习了arco design的table的运行流程,发现准备工作还是挺多的,我们就先解决以下问题吧!实现ConfigProvider比如你要配置国际化,组件库的所有组件都要共享当前语言的变量,比如是中文,还是英文,这样组件才能渲染对应国 ......
149
0
0
2023-07-29
热门标签