React.js
文章平均质量分 94
jydchudq
写代码的修狗狗一只
展开
-
React之组件渲染性能优化
下面对React.memo和useMemo特性React.memouseMemo主要功能缓存组件,防止不必要的渲染缓存回调函数缓存计算结果使用场景当传入的 props 没有变化时,避免组件重新渲染传递函数到子组件时,避免重新渲染时重新创建该函数避免在每次渲染时,进行不必要的昂贵计算依赖项根据 props 变化根据依赖数组变化根据依赖数组变化返回值类型返回新的组件返回记忆化的函数返回记忆化的值。原创 2024-10-16 17:29:59 · 798 阅读 · 0 评论 -
React原理之Diff算法
Diff 算法是 React 中最核心的部分,它决定了 React 在更新时如何高效地复用和更新 FiberNode。前面我们提到:在构建 workInProgress Fiber Tree 时会尝试复用 current Fiber Tree 中对应的 FiberNode 的数据,这个决定是否复用的过程就是 Diff 算法。除了和JSX,即类组件的 render 方法的返回结果,或函数组件的调用结果。JSX 对象中包含描述DOM 节点的信息。Diff 算法的本质就是。原创 2024-08-28 18:03:27 · 2357 阅读 · 0 评论 -
React原理之Fiber双缓冲
双重缓冲是一种渲染优化技术,其使用来管理渲染,即和。当前树代表屏幕上当前显示的内容,而工作树用于准备下一次的渲染更新,用以实现平滑的更新。本篇将详细介绍 Fiber 架构的工作原理原创 2024-08-17 10:27:30 · 1187 阅读 · 0 评论 -
React原理之Fiber详解
Fiber 节点是 Fiber 架构的核心概念之一,它是一种虚拟 DOM 的实现方式。Fiber 本质上是一个对象, 使用了。双重缓冲是一种渲染优化技术,其使用来管理渲染,即和。当前树代表屏幕上当前显示的内容,而工作树用于准备下一次的渲染更新,用以实现平滑的更新。原创 2024-08-17 10:13:25 · 785 阅读 · 0 评论 -
React原理之React整体渲染流程
上一篇这三个组件共同工作提供了 React 的高效和灵活的渲染机制,那么他们具体是怎么渲染的呢?React 的渲染流程分为两个阶段:- render 阶段:Reconciler 的工作阶段,这个阶段会调用组件的 render 方法- commit 阶段:Renderer 的工作阶段,可以类比 git commit 提交,这个阶段会渲染具体的 UI。原创 2024-08-09 10:24:20 · 1213 阅读 · 0 评论 -
React原理之React整体架构解读
了解 React 的多少都见过这句话:React16 之后,改用了。那么,到底什么是 Fiber 架构?之前的架构是什么?为什么要使用 Fiber 架构代替之前的呢?其实关于 Fiber 架构的解读可深可浅,然而我曾经对 Fiber 架构的认知是 👇emmm 这个确实过于浅了。此篇文章作为我的学习记录,将概括性地总结讲述 Fiber 架构的关键概念。具体的深入内容将会在之后的文章中介绍。原创 2024-08-03 15:52:20 · 1227 阅读 · 0 评论 -
React Context:贯穿React应用的共享状态线
在 React 应用中,"context" 是一种特殊的全局状态管理机制。它允许你在组件树中传递数据,而不需要手动逐层传递 props。Context为整个组件树提供数据,Context 会穿过中间的任何组件原创 2024-07-29 17:45:56 · 772 阅读 · 0 评论 -
React.createRef、useRef、React.forwardRef与useImperativeHandle
在这篇文章中,我们将从基础的`ref`概念开始,逐步深入到`useRef`的使用,探索如何通过`React.forwardRef`将`ref`传递给子组件,以及如何使用`useImperativeHandle`来处理一些需要直接操作DOM的场景。原创 2024-07-18 00:45:00 · 2172 阅读 · 0 评论