Skip to content

Commit

Permalink
update: 改正错误
Browse files Browse the repository at this point in the history
  • Loading branch information
likaiqiang committed Sep 5, 2023
1 parent 036f827 commit 5dad91d
Showing 1 changed file with 2 additions and 1 deletion.
Original file line number Diff line number Diff line change
Expand Up @@ -261,8 +261,9 @@ useState、useMemo、useCallback、useRef、useContext、useReducer、useEffect
其中useEffect、useLayoutEffect这俩允许执行副作用的hook也是在render阶段执行的。你可能会疑惑,render阶段不是不让执行副作用操作嘛,这俩虽然在render阶段执行,但是它们的回调函数不在render阶段执行。

### commit阶段的hooks
useEffect与useLayoutEffect的回调函数。

useLayoutEffect。这个hook会在dom更新完毕,但是浏览器还没有来得及绘制之前同步执行。这句话是什么意思呢,我们知道javascript只是用来操作dom,像setState之类操作或者我们手动操作dom只是改变了内存里一颗dom树上的某些节点,真正把dom树绘制成屏幕上形形色色的画面是浏览器完成的,假设我们浏览器一秒绘制60帧,那绘制一帧的时间就是16ms,而javascript是单线程语言,执行js代码与ui绘制是互斥的,所以如果我们在16ms内用10ms的时间来更新dom树,那么还剩最多6ms用来执行useLayoutEffect。
先说useLayoutEffect。这个hook会在dom更新完毕,但是浏览器还没有来得及绘制之前同步执行。这句话是什么意思呢,我们知道javascript只是用来操作dom,像setState之类操作或者我们手动操作dom只是改变了内存里一颗dom树上的某些节点,真正把dom树绘制成屏幕上形形色色的画面是浏览器完成的,假设我们浏览器一秒绘制60帧,那绘制一帧的时间就是16ms,而javascript是单线程语言,执行js代码与ui绘制是互斥的,所以如果我们在16ms内用10ms的时间来更新dom树,那么还剩最多6ms用来执行useLayoutEffect。

所以这个hook内部适合执行一些短小精悍的代码,假如执行时间过长,那这一次更新就没有被绘制,人就会感觉到卡。

Expand Down

0 comments on commit 5dad91d

Please sign in to comment.