惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

博客园 - Franky
Microsoft Azure Blog
Microsoft Azure Blog
阮一峰的网络日志
阮一峰的网络日志
宝玉的分享
宝玉的分享
量子位
N
Netflix TechBlog - Medium
M
MIT News - Artificial intelligence
GbyAI
GbyAI
Apple Machine Learning Research
Apple Machine Learning Research
博客园_首页
博客园 - 叶小钗
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
酷 壳 – CoolShell
酷 壳 – CoolShell
T
Tailwind CSS Blog
Y
Y Combinator Blog
L
LangChain Blog
The Cloudflare Blog
T
The Blog of Author Tim Ferriss
U
Unit 42
Martin Fowler
Martin Fowler
aimingoo的专栏
aimingoo的专栏
G
Google Developers Blog
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
月光博客
月光博客

Coding Your Life

lib库开发的一款PDF处理小工具 | Coding Your Life mirror-cli | Coding Your Life 最长递增子序列算法 | Coding Your Life webpack5 模块联邦技术 | Coding Your Life webpack基础配置详解 | Coding Your Life canvas实现代码雨效果 | Coding Your Life 使用MessageChannel模拟React优先级执行队列 | Coding Your Life vue3 和 react 虚拟dom | Coding Your Life ES6中Reflect对象与Proxy结合实现代理和响应式编程 | Coding Your Life 前端技术分享MediaRecord实现运动相机 | Coding Your Life 微信小程序使用canvas创建像素头像 | Coding Your Life 前端基础概念 | Coding Your Life 中高级前端须注意的40条移动端H5坑位指南 | Coding Your Life native-code-push 热更新配置 | Coding Your Life Git 常用命令速查表 | Coding Your Life push-server 热更新常用命令速查表 | Coding Your Life 高效的js片段 | Coding Your Life
react基础概念 | Coding Your Life
Sir_Liu · 2024-07-03 · via Coding Your Life

react fiber算法

1、在早期版本中,react渲染的方式是递归方式,每次渲染都会重新创建组件,然后进行diff比较,最后更新视图,整个过程是一气呵成,中间不许中止或暂停,但是随着react的更新,业务越来越复杂,这种方式在处理复杂视图和大数据量业务时会面临阻塞和卡顿的问题,为了解决这一问题,react开始使用fiber算法,fiber算法可以理解为react的虚拟dom,react会根据fiber算法来确定组件的更新顺序,如果主线程上有输入等更高优先级的任务则会让渡出执行权,让主线程执行其他任务。
2、在本质上fiber是一个javascript对象,代表着react的工作单元,它包含了组件的信息。react可以在处理任何fiber对象之前判断是否有足够的时间完成改工作,并在必要时恢复和中断该工作。

react hooks使用

# react hooks不能放在循环、条件判断、函数内部
(1)、确保hooks执行顺序的稳定性:react需要根据Hooks的调用顺序来维护内部的状态。将hooks放在条件语句或循环中可能导致每次渲染时hooks执行顺序变化,这会破坏React对状态的管理,使得组件状态变得不可预测。
(2)、维护hooks的调用链表:react内部使用一个链表来跟踪每个hooks调用,确保在组件的每次更新时能准确的恢复状态。条件或循环内的hooks会打破这一机制,因为它们可能不会按照上次渲染的顺序被调用。
(3)、函数组件的纯函数特性:函数组件应被视为纯函数,对于相同的输入应当产生相同的输出,条件性的使用hooks会使得组件行为依赖于外部条件,而不是状态,这破坏了组件的封装性和可预测性。
(4)便于理解和调试。

# 在React开发中使用React Hooks可以带来以下优势:
简化代码:相比于传统的类组件,使用React Hooks可以更简洁地管理组件的状态和生命周期方法,减少了冗余代码。
提高可重用性:React Hooks可以将组件逻辑进行封装,使得逻辑可以在多个组件中共享和复用。
方便测试:由于React Hooks使组件的逻辑更加纯粹,没有副作用,因此更容易进行单元测试和集成测试。

# React Hooks的应用场景包括但不限于:
简单的组件:对于只有少量状态和生命周期方法的组件,使用React Hooks可以更加简洁地实现。
复杂的组件逻辑:对于需要管理多个状态和处理复杂逻辑的组件,使用React Hooks可以更好地组织代码。
函数式组件:React Hooks主要适用于函数式组件,可以让函数式组件具备类组件的功能。

版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Coding Your Life