05｜进一步认识 Hooks ：如何正确理解函数组件的生命周期？
忘掉 Class 组件的生命周期
荧光笔
直线
曲线- 深入了解
- 翻译
- 解释
- 总结
React Hooks是React函数组件中的重要特性，本文从Hooks的角度深入探讨了React函数组件的生命周期。作者强调了忘记Class组件的生命周期是使用Hooks的关键，因为函数组件和Class组件的开发思路有很大不同。在函数组件中，通过useEffect这个Hook来描述副作用，而不再需要手动判断Props或State的变化。函数组件中没有构造函数的概念，但可以利用useRef来实现一次性的初始化逻辑。通过对比Class组件和函数组件的生命周期机制，帮助读者更好地理解和使用Hooks，从而更自然地解决问题。Hooks的机制更具有语义化，使得代码更加自然和合理。文章还提到了已有应用是否应该迁移到Hooks的问题，强调了类组件和函数组件可以共存，并且在实现具体的业务功能时，应该尽量从Hooks的语义角度出发去思考组件是如何展现和交互的。文章内容深入浅出，对于React开发者来说具有很高的参考价值。
《React Hooks 核心原理与实战》，新⼈⾸单¥59
全部留言(18)
- 最新
- 精选
Ada如果想要实现只执行一次的功能，用useEffect，依赖项传空数组，不是可以实现吗？ 为什么要写一个自定义钩子？作者回复: 因为需要在函数体执行之前执行。useEffect 是在 render 完后执行。
2021-06-03356
毛毛开飞机useEffect(() => { return () => { // 这里只会在组件销毁前（componentWillUnmount）执行一次 } }, [])作者回复: 正确~
2021-06-0331
海洋useEffect 第二个参数传入空，就只在组件初始化时和销毁前分别执行一次作者回复: 没错~ 传入空数组就可以了。
2021-06-0327- Geek_12f953老师，useSingleton这个Hook里面使用useRef来定义called标记而不是用useState，是因为called并不会影响UI渲染吗？我尝试了用useState好像也可以实现只执行一次的效果
作者回复: 确实如此，useState 会导致多余的渲染。
2021-08-034 
花儿与少年请教： 以下代码不是每次render后都会执行吗，return的函数在每次effect执行前执行？ useEffect(() => { return () => { // 这里只会在组件销毁前（componentWillUnmount）执行一次 } }, [])作者回复: useEffect 接收的 callback 是在 依赖发生变化以及第一次时执行，return 的函数是在下一次 callback 执行之前执行，或者销毁时执行。这段代码的 依赖项为空，所以只会在最后组件销毁时执行。
2021-08-024
Isaac老师，useEffect 的执行时机是 DOM 渲染完毕后执行，还是依赖发生变化，不管 DOM 有没有更新完毕就立即执行？作者回复: DOM 渲染后执行。
2021-06-094
大大小小BlogView那个例子，为什么要把useCallback返回的函数作为useEffect的依赖呢？是要达到什么目的吗？作者回复: 所有在 useEffect 中用到的变量都应该被作为依赖的参数，这样在 useEffect 执行的时候才会执行正确的回调函数。
2021-06-0334
Geek_sky老师，我看到useRef的用法有一个疑问：例子中useSingleton包含了一个useRef的定义为false，如果我在MyComp中定义多个useSingleton，程序在启动的时候第二次及之后的调用useRef是怎么确认需要创建新的还是使用之前的？那么界面在刷新之后，useSingleton会再次被调用，那时会有多个useRef的检查，那么程序又是如何判定的？作者回复: useRef 是定义一个当前组件实例上的一个变量。所以组件重新 mount，或者多实例，是互不相关的。
2021-06-093
Joseph😈请问下老师，如果只是为了做初始化工作，即只在首次render前执行一次。useSingleton这个自定义hook似乎换成useState或useEffect似乎都能做呀，跟useRef相比有没有什么优劣呢？作者回复: useEffect 是在组件 render 完后才执行的，这里的 useSingleton 可以在函数体内直接执行，而不是 render 完之后。
2021-06-0631
浩然useEffect(() => { return () => { // 组件销毁时执行 } }, [])作者回复: 正确！
2021-06-031