React 源码中的一些概念 about react-study HOT 9 OPEN

源码中 $FlowFixMe[prop-missing] 的意思

• $FlowFixMe：打算稍后修复的类型错误
• $FlowIssue：怀疑是 Flow 问题的类型错误
• $FlowExpectedError：期望 Flow 产生类型错误的位置（例如，执行无效的类型转换时）。
• $FlowIgnore：用于希望 Flow 忽略代码的位置

from react-study.

hydrate 英文意思是水合物

在软件工程中大致意思是：后端给的数据，处理数据是脱水（dehydrate）；前端渲染页面，处理数据是注水（rehydrate）

hydrate 是 React 中提供在初次渲染的时候，去复用原本已经存在的 DOM 节点，减少重新生成节点以及删除原本 DOM 节点的开销，来加速初次渲染的功能。主要使用场景是服务端渲染或者像prerender等情况。

参考资料：

1. react中出现的"hydrate"这个单词到底是什么意思?
2. progressive hydration
3. hydration story

from react-study.

循环引用

const tree = [
    {
        "id": "0",
        "children": [
            { "id": "00" },
            {
                "id": "01",
                "children": [{ "id": "011" }]
            },
            { "id": "02" }
        ]
    }
]

const circularReference = (tree, parent=null) => {
    tree.forEach(child => {
        child.parent = parent;
        if (child.children) {
            circularReference(child.children, child);
        }
    });
};
circularReference(tree);

循环引用的作用：在访问子元素时，可以拿到父元素信息

不过要注意内存泄露的问题

from react-study.

dispatch 和 invoke 有啥区别

ChatGPT 解释

"dispatch" 和 "invoke" 这两个词都与执行任务或操作相关，但它们在语义上有一些细微的区别。

"Dispatch" 通常意味着将任务发送到一个队列中，以便稍后执行。它强调任务的调度和安排，以确保任务按照正确的顺序和优先级被执行。在计算机编程中，"dispatch" 经常用于异步编程，其中任务可以在后台线程或进程中执行，而不会阻塞主线程或进程。

"Invoke" 则更强调执行任务本身，通常是指立即执行任务。在计算机编程中，"invoke" 经常用于调用函数或方法，它强调立即执行代码并获得结果。"Invoke" 可以用于同步编程，其中执行任务的进程或线程将阻塞，直到任务完成为止。

因此，"dispatch" 和 "invoke" 之间的主要区别在于它们强调的方面。"Dispatch" 强调任务的调度和安排，而 "invoke" 强调任务的执行。

new bing 解释

"dispatch" 和 "invoke" 是两个不同的函数，用于在不同的编程语言和框架中执行不同的操作。

在 .NET 中，"Invoke" 是同步的，"BeginInvoke" 是异步的。操作被添加到 "Dispatcher" 的事件队列中，以指定的 "DispatcherPriority" 进行调度。Invoke 是同步操作，因此在回调返回之前，控件不会返回到调用对象。

在 C++ 中，"Invoke" 是用于调用 COM 对象的函数，而 "dispatch" 是用于调用 JavaScript 对象的函数。

在 JavaScript 中，"dispatch" 是用于在 DOM 中触发事件的函数，而 "invoke" 是用于调用函数的函数。

因此，这两个函数在不同的编程语言和框架中具有不同的含义和用途。

from react-study.

passive effects

passive effects 指那些在组件渲染后执行的副作用

from react-study.

Fiber.flags 是什么

flags 作用是记录 Fiber 节点的副作用（side effects），比如插入（Placement）、更新（Update）、删除（Deletion）等

flags 是一个位运算的值，可以表示多种副作用的组合：

• 在 render 阶段（render phase），React 会根据 Fiber 节点的变化给它们打上对应的 flags
• 在 commit 阶段（commit phase），React 会根据 flags 来执行相应的 DOM 操作
• flags 还会被传递给父节点的 subtreeFlags 属性，表示子树中有哪些副作用

from react-study.

Visibility、ChildDeletion、Passive 区别

Visibility：表示当前节点是否可见
ChildDeletion：表示当前节点是否需要删除它的子节点
Passive：表示当前节点是否有 effect passive

from react-study.

WorkTag

• 0：FunctionComponent -> 函数组件
• 1：ClassComponent -> class 组件
• 2：IndeterminateComponent -> 不确定的组件类型，可能是函数组件，也可能是 class 组件

  function MyComponent(props) {
    if (props.foo) {
      return <div />;
    }
    return <span />;
  }

• 3：HostRoot -> 当前 Fiber 节点是根节点
• resetSelecteddValue4：HostPortal -> HostPortal 类型是通过 ReactDOM.createPortal(child, container) 创建的
  • react 会将 child 挂载到 container 上，这个 container 可以是 div#root 中的任何 dom，也可以是 div#root 外的 dom
• 5：HostComponent -> div，span 等
• 6：HostText -> 文本节点
• 7：Fragment -> <React.Fragment />，<></>
• 8：Mode -> <React.StrictMode />
• 9：ContextConsumer -> <MyContext.Consumer />
• 10：ContextProvider -> <MyContext.Provider />
• 11：ForwardRef -> React.forwardRef((props, ref) => <div ref={ref} />)
• 12：Profiler -> <Profiler id="MyApp" onRender={callback} />
• 13：SuspenseComponent -> <Suspense fallback={<div>Loading…</div>} />
• 14：MemoComponent -> React.memo(MyComponent)，包裹使用 forwardRef 的组件
• 15：SimpleMemoComponent -> React.memo(MyComponent)，包裹不使用 forwardRef 的组件
• 16：LazyComponent; -> React.lazy(() => import('./MyComponent'))
• 17：IncompleteClassComponent -> 不完整的类组件节点，用于标记还没有初始化的类组件
• 18：DehydratedFragment -> 脱水片段节点，用于标记在服务端渲染中被脱水的片段
• 19：SuspenseListComponent -> Suspense 列表节点，用于标记一个包含多个 Suspense 节点的列表
• 21：ScopeComponent
• 22：OffscreenComponent -> 离屏组件节点，用于标记一个使用 useDeferredValue 或 useTransition 的组件
• 23：LegacyHiddenComponent -> 遗留隐藏组件节点，用于标记一个使用 useDeferredValue 或 useTransition 的组件，并且设置了 mode="hidden" 属性
• 24：CacheComponent
• 25：TracingMarkerComponent
• 26：HostHoistable
• 27：HostSingleton

from react-study.

flush 的意思

在计算机领域中，flush 通常表示将缓冲区中的数据写入到磁盘或者其他外部设备中，以保证数据的持久化，避免数据丢失

在前端开发中，例如在 React 中，flush 可以表示将组件的更新立即应用到界面上，以保证用户能够立即看到最新的界面状态。在这种情况下，flush 可以翻译为“立即应用”、“立即更新”等

在数据库中，flush 可以表示将内存中的数据写入到磁盘中，以确保数据的持久化

在网络协议中，flush 可以表示将缓冲区中的数据立即发送出去，以避免数据的延迟或者丢失

from react-study.