React Hook 02 Effect Hook

82 阅读1分钟

Effect Hook 可以让你在函数组件中执行副作用操作。可以把 useEffect Hook 看做 componentDidMountcomponentDidUpdate 和 componentWillUnmount 这三个函数的组合。

1 . useEffect( )方法做了什么 ?

useEffect( ) 的参数是一个函数,在这个函数里面 ,你可以告诉 React 组件需要在渲染后执行某些操作。React 会保存你传递的函数(我们将它称之为 “effect”),并且在执行 DOM 更新之后调用它。

0450.png

2 . 为什么要在组件内部调用 useEffect()方法?

可以在 effect 中直接访问 count state 变量(或其他 props)。

3 . useEffect()会在每次渲染后都执行吗?

是的,默认情况下,它在第一次渲染之后每次更新之后都会执行。相当于componentDidMount 和 componentDidUpdate

4 . useEffect() 的参数(函数)返回一个函数的作用 ?

这是 effect 可选的清除机制。每个 effect 都可以返回一个清除函数。来实现副作用的清除 。

0451.png

5 . all in all :

副作用需要清除就返回这个函数 ,不需要清除就不用返回!!!

6 . useEffect()与 componentDidMount 和 componentDidUpdate的区别 :

使用 useEffect 调度的 effect 不会阻塞浏览器更新屏幕,这让你的应用看起来响应更快。大多数情况下,effect 不需要同步地执行。