Open astak16 opened 1 year ago
源码中 $FlowFixMe[prop-missing]
的意思
$FlowFixMe
:打算稍后修复的类型错误$FlowIssue
:怀疑是 Flow
问题的类型错误$FlowExpectedError
:期望 Flow
产生类型错误的位置(例如,执行无效的类型转换时)。$FlowIgnore
:用于希望 Flow
忽略代码的位置hydrate 英文意思是水合物
在软件工程中大致意思是:后端给的数据,处理数据是脱水(dehydrate);前端渲染页面,处理数据是注水(rehydrate)
hydrate 是 React 中提供在初次渲染的时候,去复用原本已经存在的 DOM 节点,减少重新生成节点以及删除原本 DOM 节点的开销,来加速初次渲染的功能。主要使用场景是服务端渲染或者像prerender等情况。
参考资料:
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);
循环引用的作用:在访问子元素时,可以拿到父元素信息
不过要注意内存泄露的问题
"dispatch" 和 "invoke" 这两个词都与执行任务或操作相关,但它们在语义上有一些细微的区别。
"Dispatch" 通常意味着将任务发送到一个队列中,以便稍后执行。它强调任务的调度和安排,以确保任务按照正确的顺序和优先级被执行。在计算机编程中,"dispatch" 经常用于异步编程,其中任务可以在后台线程或进程中执行,而不会阻塞主线程或进程。
"Invoke" 则更强调执行任务本身,通常是指立即执行任务。在计算机编程中,"invoke" 经常用于调用函数或方法,它强调立即执行代码并获得结果。"Invoke" 可以用于同步编程,其中执行任务的进程或线程将阻塞,直到任务完成为止。
因此,"dispatch" 和 "invoke" 之间的主要区别在于它们强调的方面。"Dispatch" 强调任务的调度和安排,而 "invoke" 强调任务的执行。
"dispatch" 和 "invoke" 是两个不同的函数,用于在不同的编程语言和框架中执行不同的操作。
在 .NET 中,"Invoke" 是同步的,"BeginInvoke" 是异步的。操作被添加到 "Dispatcher" 的事件队列中,以指定的 "DispatcherPriority" 进行调度。Invoke
是同步操作,因此在回调返回之前,控件不会返回到调用对象。
在 C++ 中,"Invoke" 是用于调用 COM 对象的函数,而 "dispatch" 是用于调用 JavaScript 对象的函数。
在 JavaScript 中,"dispatch" 是用于在 DOM 中触发事件的函数,而 "invoke" 是用于调用函数的函数。
因此,这两个函数在不同的编程语言和框架中具有不同的含义和用途。
passive effects
指那些在组件渲染后执行的副作用
flags
作用是记录 Fiber
节点的副作用(side effects
),比如插入(Placement
)、更新(Update
)、删除(Deletion
)等
flags
是一个位运算的值,可以表示多种副作用的组合:
render
阶段(render phase
),React
会根据 Fiber
节点的变化给它们打上对应的 flags
commit
阶段(commit phase
),React
会根据 flags
来执行相应的 DOM
操作flags
还会被传递给父节点的 subtreeFlags
属性,表示子树中有哪些副作用Visibility
:表示当前节点是否可见
ChildDeletion
:表示当前节点是否需要删除它的子节点
Passive
:表示当前节点是否有 effect passive
FunctionComponent
-> 函数组件ClassComponent
-> class
组件IndeterminateComponent
-> 不确定的组件类型,可能是函数组件,也可能是 class
组件
function MyComponent(props) {
if (props.foo) {
return <div />;
}
return <span />;
}
HostRoot
-> 当前 Fiber
节点是根节点HostPortal
-> HostPortal
类型是通过 ReactDOM.createPortal(child, container)
创建的
react
会将 child
挂载到 container
上,这个 container
可以是 div#root
中的任何 dom
,也可以是 div#root
外的 dom
HostComponent
-> div
,span
等HostText
-> 文本节点Fragment
-> <React.Fragment />
,<></>
Mode
-> <React.StrictMode />
ContextConsumer
-> <MyContext.Consumer />
ContextProvider
-> <MyContext.Provider />
ForwardRef
-> React.forwardRef((props, ref) => <div ref={ref} />)
Profiler
-> <Profiler id="MyApp" onRender={callback} />
SuspenseComponent
-> <Suspense fallback={<div>Loading…</div>} />
MemoComponent
-> React.memo(MyComponent)
,包裹使用 forwardRef
的组件SimpleMemoComponent
-> React.memo(MyComponent)
,包裹不使用 forwardRef
的组件LazyComponent
; -> React.lazy(() => import('./MyComponent'))
IncompleteClassComponent
-> 不完整的类组件节点,用于标记还没有初始化的类组件DehydratedFragment
-> 脱水片段节点,用于标记在服务端渲染中被脱水的片段SuspenseListComponent
-> Suspense
列表节点,用于标记一个包含多个 Suspense
节点的列表ScopeComponent
OffscreenComponent
-> 离屏组件节点,用于标记一个使用 useDeferredValue
或 useTransition
的组件LegacyHiddenComponent
-> 遗留隐藏组件节点,用于标记一个使用 useDeferredValue
或 useTransition
的组件,并且设置了 mode="hidden"
属性CacheComponent
TracingMarkerComponent
HostHoistable
HostSingleton
在计算机领域中,flush
通常表示将缓冲区中的数据写入到磁盘或者其他外部设备中,以保证数据的持久化,避免数据丢失
在前端开发中,例如在 React
中,flush
可以表示将组件的更新立即应用到界面上,以保证用户能够立即看到最新的界面状态。在这种情况下,flush
可以翻译为“立即应用”、“立即更新”等
在数据库中,flush
可以表示将内存中的数据写入到磁盘中,以确保数据的持久化
在网络协议中,flush
可以表示将缓冲区中的数据立即发送出去,以避免数据的延迟或者丢失
变量名称中带有
host
,一般和宿主有关,在ReactDOM
中指浏览器相关的东西,比如HostComponent
、HostRoot