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

30 条回复 • 2020-03-19 12:15:38 +08:00

1

ericgui

OP

2020-03-13 07:10:37 +08:00

给大家说说是什么情况吧：
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

2

noe132

2020-03-13 07:12:22 +08:00

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

3

ericgui

OP

2020-03-13 07:14:56 +08:00 via Android

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

4

lemontv

2020-03-13 07:24:03 +08:00 via Android

useEffect 可以用来代替 componentDidMount componentWillUnmount componentDidUpdate

5

Perry

2020-03-13 07:36:21 +08:00

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

6

blessyou

2020-03-13 08:14:44 +08:00 via Android

常规操作

7

iMusic

2020-03-13 08:41:21 +08:00

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

8

maichael

2020-03-13 08:49:34 +08:00

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

9

BoiledEgg

2020-03-13 08:56:19 +08:00

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

10

Cbdy

2020-03-13 09:04:51 +08:00 via Android

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

11

leokino

2020-03-13 09:06:37 +08:00

4

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

12

FaiChou

2020-03-13 09:19:15 +08:00

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

13

lneoi

2020-03-13 09:48:07 +08:00

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

14

hoyixi

2020-03-13 09:59:50 +08:00

那 useEffect 的 “老“用法是啥？

15

islxyqwe

2020-03-13 10:18:53 +08:00

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