fiber节点（fq节点）

react中什么是fiber

React Fiber是React 16版本引入的新的调度算法（reconciliation algorithm），是对核心协调算法的重新实现，旨在提升复杂React应用的可响应性和性能。其核心特点与实现原理如下：核心机制Fiber将原本同步的更新过程碎片化，拆分为多个可中断的小任务单元（称为“Fiber节点”）。

React Fiber 是对 React 核心算法的一次彻底重构。旧版的 React 使用的是“Stack Reconciler”（堆栈协调器），它会在一次更新中同步地遍历整个组件树。这种方式在处理大型应用时，可能会导致卡顿和不流畅的用户体验。

React Fiber 是 React 的一种新的协调（reconciliation）引擎，旨在解决 React 在处理大型应用时可能出现的性能瓶颈，特别是在更新过程中可能导致的界面卡顿问题。Fiber 的背景与目的在 React 15 及更早版本中，协调过程是由一个称为“Stack Reconciler”的递归算法实现的。

原生组件 fiber：原生组件 fiber 的 stateNode 属性直接指向对应的真实 DOM 节点。真实 DOM 节点通过 node[__reactFiber$ + randomKey] 属性回指到对应的 fiber 节点，这里的 randomKey 是一个随机数，用于避免与业务代码的属性名冲突。

React组件到底什么时候render啊

render：调用组件的渲染函数，根据返回的JSX创建新的Fiber节点。bailout：满足特定条件时，复用上一次更新的Fiber节点，跳过渲染函数调用。

render方法何时触发呢？在类组件中，当调用setState更新状态时，会触发render方法。而在函数组件中，使用useState hook更新状态时，若状态未发生变化，render方法不会被触发。总结来说，render方法是React组件更新机制的关键，它通过虚拟DOM与实际DOM的比较，实现高效的组件渲染与更新。

React16之前组件的渲染顺序组件生命周期：挂载阶段：constructor（） → componentWillMount（） → render（） → componentDidMount（）。更新阶段：componentWillReceiveProps（） → shouldComponentUpdate（） → componentWillUpdate（） → render（） → componentDidUpdate（）。

React学习第六步的核心内容包括：组件生命周期：定义：组件生命周期是理解组件行为的关键，从创建、挂载、更新到卸载，每个阶段都有其特定的方法调用。挂载阶段：组件首次渲染到DOM中，如constructor、render、componentDidMount等钩子函数。

React新手眼中的Fiber

React Fiber 是 React 16 引入的新的协调引擎，用于实现虚拟 DOM 的增量渲染，核心目标是解决复杂应用中递归更新导致的性能问题，通过可中断的任务调度提升页面响应能力。React 引入 Fiber 的背景浏览器主线程负载问题：主线程需处理 JS 执行、样式计算、布局（Layout）、图层合成（Layer）等任务。

Fiber是React 16引入的一个新的协调（reconciliation）引擎的核心概念，它解决了React 15及之前版本中在大量DOM操作时可能出现的卡顿问题。Fiber可以看作是一个虚拟DOM的数据结构，它在内存中保存了DOM的信息，使得React的更新过程可以异步、可中断地进行。

真实 DOM 节点通过 node[__reactFiber$ + randomKey] 属性回指到对应的 fiber 节点，这里的 randomKey 是一个随机数，用于避免与业务代码的属性名冲突。DOM 节点还通过 node[__reactProps$ + randomKey] 属性指向最新的 props 对象。

React Fiber是React 16版本引入的新的调度算法（reconciliation algorithm），是对核心协调算法的重新实现，旨在提升复杂React应用的可响应性和性能。其核心特点与实现原理如下：核心机制Fiber将原本同步的更新过程碎片化，拆分为多个可中断的小任务单元（称为“Fiber节点”）。

React 在其发展历程中，进行了一次重要的重构，引入了 Fiber 架构。这次重构的核心目标是实现异步渲染，以提升用户体验。以下是对 Fiber 架构的详细解析。Fiber 的背景与意义 在 React 16 之前，React 使用的 reconciler 被称为 stack reconciler。

React Fiber原理的理解如下： Fiber数据结构与执行单元： Fiber是一种数据结构，也是一个执行单元，旨在解决React在处理DOM更新时的性能问题。 Fiber通过链表的形式组织，使得React的更新过程可以中断和恢复。