-
Notifications
You must be signed in to change notification settings - Fork 4
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
React v17.0.2 源码分析笔记 #38
Comments
React 更新总结 调用 useState 返回的 set 函数,实际调用 dispatchSetState 函数(函数在首次 Fiber 树创建时,也就是第一次运行 FunctionComponent 生成,通过 bind 处理之后返回,即 set 函数),内部主要做了 2 件事:
scheduleUpdateOnFiber 函数内:
ensureRootIsScheduled
workLoopSync 是我们需要关注的核心函数和逻辑
经过 workLoopSync 处理 Fiber 树之后,我们就知道了哪些节点会有副作用(对于 HostComponent 来说就是增删改 DOM 元素,对于 Function Component 来说,就是要不要执行 useEffect useLayoutEffect ref 等这些副作用) 下一阶段,就是将这些副作用开始「提交」,也是从根节点开始 commitRoot(root)
为什么 React 的数据流是单向的? React Fiber 喜欢什么组件?大组件,还是小组件? 后续开发 Function Component 有什么启发?
对于 JSX 有没有新的认识? useEffect 和 useLayoutEffect 区别? Ref 的认知?React 会何时调用 Ref Function? 什么时候可以拿到最新的 DOM 对象? ==== 多次 setState 如何合并? 什么是 bailout?什么情况下 bailout? 什么是 eagerState React 18 将怎么进行中断和恢复?Fiber 深层次工作原理? |
// 验证更新层次
import { memo, useMemo, useState } from "react";
function Title() {
console.log("## render Title");
return 'title'
}
function Layout() {
console.log("## render Layout");
return <Title />
}
function Email() {
console.log('## render Email')
return 'email'
}
function Footer({ children }) {
console.log('## render Footer')
return children
}
const MemoLayout = memo(Layout)
export function App() {
console.log('## render App')
const [state, setState] = useState(0);
const memoFooter = useMemo(() => {
return <Footer>
<Email />
</Footer>
}, [])
// 正常更新,会造成从 App 开始往下所有组件进入 render 阶段
// 原因:beginWork 阶段 oldProps !== newProps 成立
// 为啥成立?因为 App render 之后,产出的是新 Fiber 使用的 pendingProps 是新的,区别于 memoizedProps。于是 oldProps !== newProps
// 优化手段:
// 1. 使用 memo,比如 memo(Layout)
// 2. 使用 useMemo 返回组件,比如 useMemo(Footer)
return <div>
<button onClick={() => setState(state + 1)}>Click</button>
<Layout />
<Footer>
<Email />
</Footer>
<MemoLayout />
{memoFooter}
</div>
} |
笔记中梳理了
如果感兴趣,还可以深入了解一些 https://7kms.github.io/react-illustration-series/algorithm/bitfiled
The text was updated successfully, but these errors were encountered: