gpt4 book ai didi

javascript - React 16 中的 fiber 对象和 React Element 有什么区别?

转载 作者:塔克拉玛干 更新时间:2023-11-02 21:10:05 31 4
gpt4 key购买 nike

这里是this链接(很多人为了理解 React 16 的架构而提到的)提到了: enter image description here

即使是 React 中的 Elements 也是包含组件信息的纯 JS 对象,具有以下四个属性:

{
type,
ref,
props,
key
}

我现在想知道组件、元素、实例和这个新的 Fiber 对象之间的明显区别。另外,这个新的 Fiber 对象是否与图片中提到的具有更多新属性的旧 Element 对象相同?

最佳答案

Fiber 是一个 JavaScript 对象,包含有关组件 及其输入和输出的信息。它与实例 具有一对一的关系。它管理实例的工作。纤程使用属性 stateNode 跟踪实例。它也有关于它与其他实例的关系的信息。

来自此处的源代码: https://github.com/facebook/react/blob/9ea4bc6ed607b0bbd2cff7bbdd4608db99490a5f/packages/react-reconciler/src/ReactFiber.js#L406

export function createFiberFromElement(
element: ReactElement,
mode: TypeOfMode,
expirationTime: ExpirationTime,
): Fiber {
let owner = null;
if (__DEV__) {
owner = element._owner;
}

let fiber;
const type = element.type;
const key = element.key;
const pendingProps = element.props;

let fiberTag;
if (typeof type === 'function') {
....
....
....

我可以理解 React Fiber reconciler 使用 react 元素为组件实例生成一个 fiber 节点。所以你可以把它想象成一个具有时间管理超能力的 React 元素🥇。

关于javascript - React 16 中的 fiber 对象和 React Element 有什么区别?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51496101/

31 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com