1分钟厘清useMemo跟useCallback的区别
date
Sep 14, 2023
slug
difference_between_useMemo_and_useCallback
status
Published
tags
前端
nextjs
react
frontend
hook
summary
Difference between useMemo and useCallback
type
Post
useMemo: 依赖不变的时候始终返回之前创建的对象，一般是用在props上，防止不必要的渲染。
useCallback: 跟useMemo同样的道理
hook的数据是存放在fiber的链表里，每个hook对应一个节点，第一次执行useXXX的hook会走mountXXX的逻辑来创建hook链表，之后会走updateXXX的逻辑。
useEffect和useState还和渲染阶段有关。
useEffect在render阶段会把effect放到fiber.updateQueue的环形链表上，然后在commit阶段遍历所有fiber结构的updateQueue, 异步执行effect。
useState分为mountState和updateState。
mountState会返回state和dispatch函数，dispatch函数把更新hook.queue的记录，然后标记当前fiber到根fiber的lane需要更新，之后调度下次渲染。
再次渲染会执行updateState, 会读取hook.queue,根据优先级确定最终state返回，这样渲染出的就是最新结果。