React
-
理解这个机制,是成为React性能优化高手的关键
本来是准备优先分享两个官方定义的 Hook useMemo,useCallback,不过这两个 hook 本身其实没有太多探讨的空间,他们只是两个记忆函数,本身并没有特殊的、更进一…
-
精准解析 useLayoutEffect 与 useEffect 的执行时机
我们前面花了大量篇幅,从基础、理论、实践、总结几个方面,全方位的为大家分析了 useEffect。除此之外,React 还提供了一个与 useEffect 几乎一样的 hook,它…
-
useCallback 使用的4个阶段
非 React 使用者估计看了都要摇头啊。一个破回调函数的运用,居然能折腾出来这么多事。一大堆文章都在探讨如何使用它更合理。事实上确实如此,在 React 独特的单向数据流刷新机制…
-
React高手都善于使用useImprativeHandle
「React 知命境」是一本从知识体系顶层出发,理论结合实践,通俗易懂,覆盖面广的精品小册,欢迎关注我的公众号,我会持续更新 这是「React 知命境」系列第 26 篇。 在 Re…
-
这个 hook api,曾吓退许多前端开发者
「React 知命境」第 27 篇 在 React 的学习过程中,有一个大 boss 拦路虎。他不仅概念多,理解起来困难,使用起来也很麻烦,他给 React 学习者带来了巨大的痛苦…
-
在爱 context 一次,并结合 useReducer 使用,这次有一点简单
「React 知命境」第 28 篇 在 React 中,props 能够帮助我们将数据层层往下传递。而 context 能够帮助我们将数据跨层级往下传递。 context 的概念稍…
-
React 性能优化终章,成为顶尖高手的最后一步
「React 知命境」第 29 篇 在前面的章节中,我们学习了 context 的使用方式,基于它我们可以搞一个自己的状态管理库。不过,他存在性能上的问题,以致于虽然从功能的实现上…
-
useSyncExternalStore,一个陌生但重要的 hook
「React 知命境」第 30 篇 useSyncExternalStore 是一个大家非常陌生的 hook,因为它并不常用,不过在一些底层库的封装里,它又非常重要。它能够帮助我们…
-
卡顿减少 95%,记一次 React 性能优化实践
本文转载自字节商业化前端团队首发在掘金上的一篇性能优化实践经验总结 原文作者:Minoyu, 原文地址:https://juejin.cn/post/731449319218726…
-
React 性能优化新招,useTransition
React 知命境第 31 篇 在 React 中,有一个高大上的概念,叫做并发模式 Concurrent React。在并发模式中,引入了两个新概念:任务优先级、异步可中断。当一…
-
React 并发模式到底是个啥?
我的第 137 篇原创 在计算机里,并发「concurrent」一词,最早是用来表示多个任务同时进行。但是由于早期的计算机能力有限,单核计算机同一时间,只能运行一个任务。因此,为了…
-
20行代码,封装一个 React 图片懒加载组件
React 知命境第 34 篇,原创第 141 篇 图片懒加载是我们在做性能优化时非常重要的手段。我们常常需要图片在进入页面可视区域时,才让加载图片的行为发生。 1 如何判断图片进…
-
高端操作:把 React Scheduler 掏出来单独用
React 知命境第 35 篇,原创第 142 篇 我们知道,Scheduler 是 React 提供的底层调度器。但是这个调度器具体是如何用的,可能大部分人都不太清楚了,好在 R…
-
详细解读 Fiber 节点的每一个属性含义
React 知命境第 36 篇,原创第 143 篇 在 React 中,每一个组件都会被转化为对应的 Fiber 节点。这也是我们常说的虚拟 DOM。这篇文章带大家一起来了解一下 …
-
一个巨大争议,关于 useEffect 与竞态问题
React 知命境第 37 篇,原创第 144 篇 最近一个月因为一个技术方案问题,好几个人断断续续跟我产生了不小的争议。 事情的起因是这样的,我之前在介绍 useEffect 用…
-
从 React 新官网学到的一个最佳实践妙招
React 知命境第 38 篇,原创第 147 篇 在开发过程中,我们常常会遇到这样的场景。 有一个列表,但是我们需要根据列表的不同类型查询并显示对应类型的数据。如头图所示。这里有…