React-Hooks中的useEffect和useLayoutEffect

766 阅读1分钟

首先,useEffect有一些副作用

  • 对环境的改变即为副作用,例如修改了document.title
  • 不过副作用不一定要放在useEffect中。
  • 理解为afterRender可能好一些,因为这些函数是在每次render之后运行的。

useEffect的用途

  • 可以作为componentDidMount使用,[]作为第二个参数。
  • 可以作为componentDidUpdate使用,可以指定依赖(在[]中指定),如果不写第二个参数,则任何一个状态变化时都会执行。
  • 可以作为componentWillUnmount使用,通过添加一个return。
  • 以上三种用途可以同时存在。

特点

如果同时存在多个useEffect,则会按照出现的顺序依次执行。


useLayoutEffect

  • useEffect在浏览器渲染完成后执行。
  • useLayoutEffect在浏览器渲染之前执行。

特点

  • useLayoutEffect总是比useEffect先执行。
  • useLayoutEffect里的任务影响了Layout。

(建议优先使用useEffect(优先渲染)以保障用户体验)