Skip to content

Latest commit

 

History

History
27 lines (19 loc) · 1.6 KB

useEffect和useLayouEffect.md

File metadata and controls

27 lines (19 loc) · 1.6 KB

浅谈React的useEffect和useLayoutEffect

区别

useEffect执行时机：

  1. User interacts with App. Let us say the user clicks a button.
  2. Component state changes
  3. The DOM is mutated
  4. Changes are painted on the screen
  5. cleanup function is invoked to clean effects from previous render if useEffect dependencies have changed.
  6. useEffect hook is called after cleanup.

useLayoutEffect执行时机：

  1. User interacts with App. Let us say the user clicks a button.
  2. Component state changes
  3. The DOM is mutated
  4. cleanup function is invoked to clean effects from previous render if useLayoutEffect dependencies have changed.
  5. useLayoutEffect hook is called after cleanup.
  6. Changes are painted on the screen

useEffect和useLayoutEffect最大的区别就是invoke时机，useEffect hook is invoked after the DOM is painted. useLayoutEffect hook on the other hand is invoked synchronously before changes are painted on the screen

如何选择

  1. use useLayoutEffect hook instead of useEffect hook if your effect will mutate the DOM. useEffect hook is called after the screen is painted. Therefore mutating the DOM again immediately after the screen has been painted, will cause a flickering effect if the mutation is visible to the client. useLayoutEffect hook on the other hand is called before the screen is painted but after the DOM has been mutated. The undesirable behavior, of mutating the DOM immediately after painting the screen, described with useEffect hook above can be avoided.