react基础概念

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主要适用于函数式组件,可以让函数式组件具备类组件的功能。
文章作者: SIR_LIU
文章链接: https://gofugui.github.io/2024/07/03/react基本概念/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 程序员之家