发现一个 useEffect 新用法： useEffect hook 模拟 react 的生命周期

30 replies • 2020-03-19 12:15:38 +08:00

ericgui

OP

Mar 13, 2020

1

给大家说说是什么情况吧：
Drawer 这个 component，show 这个 prop，只是隐藏这个 component，但不是销毁它。所以如果要想销毁，必须这样： `{ isDrawerActive && <Drawer show={isDrawerActive} />} `这样才能确保销毁。
我需要在销毁之前做点 clean up 的工作，所以要这么用：
```javascript
useEffect(()=>{
// do something here
return function cleanUp(){
// clean up job, for instance, destroy web worker
}
});
```
3. 好，为什么要这么用？ useEffect 这个 hook，返回的这个 function，会在 component 销毁(unmount)之前被执行，于是，这个就可以用来模拟 ComponentWillUnmount 这个 lifecycle hook

noe132

Mar 13, 2020

2

这应该是正常用法而不是新用法

ericgui

OP

Mar 13, 2020 via Android

3

@noe132 我这不是没见识么。。。。。轻拍

lemontv

Mar 13, 2020 via Android

4

useEffect 可以用来代替 componentDidMount componentWillUnmount componentDidUpdate

Perry

Mar 13, 2020

5

这不是新用法，这是 hook 存在的意义之一

blessyou

Mar 13, 2020 via Android

6

常规操作

MzM2ODkx

Mar 13, 2020

7

如果没看过官方文档自己发现的就牛逼

maichael

Mar 13, 2020

8

……你如果你看过它更新的 blog 或者文档你就应该不会现在才发现

BoiledEgg

Mar 13, 2020

9

随便搜一下 github，你会发现别人已经实现一整套了，比如 streamich/react-use

Cbdy

Mar 13, 2020 via Android

10

建议看一下官网文档，不然会闹出：我发现 C 语言新语法 switch 这样的笑话

leokino

Mar 13, 2020

4

11

嘴上说 “模拟生命周期” 的人基本上都没搞清楚 hook 的搞出来是干嘛的。

ethusdt

Mar 13, 2020

12

想必楼主也会发现，useEffect 可以接受第二个参数吧。

lneoi

Mar 13, 2020

13

这个是没看官方文档的问题

hoyixi

Mar 13, 2020

14

那 useEffect 的 “老“用法是啥？

islxyqwe

Mar 13, 2020

15

本来按照 react 的设计，组件不应该管理自己的生命周期，界面更新这些副作用都交给框架管理，但总还是有其他的副作用总是要处理的，所以才有生命周期。
现在有了 hooks，本来就是让你函数式风格的处理这些副作用，可以把副作用们按照功能聚合起来交给 react，而不是自己把多个副作用功能拆成各个时间点执行的东西分别放在各个生命周期方法。