React Hooks 核心原理与实战
王沛
eBay 中国研发中心资深技术专家
新⼈⾸单¥59.9
1007 人已学习
课程目录
已更新 6 讲 / 共 23 讲
0/2登录后,你可以任选2讲全文学习。
开篇词 (1讲)
开篇词 | 全面拥抱 Hooks,掌握最新 React 开发方式
免费
基础篇 (5讲)
01|认识 React:如何创建你的第一个 React 应用?
02|理解 Hooks:React 为什么要发明 Hooks?
03|内置 Hooks(1):如何保存组件状态和使用生命周期?
04|内置 Hooks(2):为什么要避免重复定义回调函数?
05|进一步认识 Hooks :如何正确理解函数组件的生命周期?
React Hooks 核心原理与实战
15
15
1.0x
00:00/00:00
登录|注册

05|进一步认识 Hooks :如何正确理解函数组件的生命周期?

王沛 2021-06-03
你好,我是王沛。今天我们来聊聊 React 组件的生命周期。
这一讲我会带你从 Hooks 的角度进一步理解 React 函数组件的生命周期。你可能会有疑问,前面几节课我们已经学习了 Hooks 的概念和内置 Hooks 的用法,那为什么还会有专门一讲来进一步介绍 Hooks 呢?
原因主要有两个。一方面,如果你已经熟悉了 Class 组件的生命周期,那么还需要一个转换编程思想到 Hooks 的过程,这样才能避免表面上用了 Hooks,却仍然用 Class 组件的方式思考问题。
另一方面,如果你是新接触 React,那么这一讲也能帮你了解原来 Class 组件的工作方式,从而如果看到或接手已有的 React 项目,也能从容应对。

忘掉 Class 组件的生命周期

基于 Class 的组件作为 React 诞生之处就存在的机制,它的用法早已深入人心,甚至至今为止 React 的官方文档中仍然是以 Class 组件为基础的,而函数组件和 Hooks 则是作为新特性做了补充说明和解释。
这其实有两个原因:
一是 React 团队尽最大努力保持 API 的稳定,不希望给你造成一种 Class 组件将被废弃的感觉;
二是大量的存量应用其实还都是用 Class 组件实现的,无论是对于维护者还是加入者来说,了解 Class 组件都是很有必要的。
确认放弃笔记?
放弃后所记笔记将不保留。
新功能上线,你的历史笔记已初始化为私密笔记,是否一键批量公开?
批量公开的笔记不会为你同步至部落
公开
同步至部落
取消
完成
0/1000字
划线
笔记
复制
© 版权归极客邦科技所有,未经许可不得传播售卖。 页面已增加防盗追踪,如有侵权极客邦将依法追究其法律责任。
该试读文章来自付费专栏《React Hooks 核心原理与实战》,如需阅读全部文章,
请订阅文章所属专栏新⼈⾸单¥59.9
立即订阅
登录 后留言

精选留言(5)

  • 毛毛开飞机
    useEffect(() => {
      return () => {
        // 这里只会在组件销毁前(componentWillUnmount)执行一次
      }
    }, [])

    作者回复: 正确~

    2021-06-03
    1
  • 海洋
    useEffect 第二个参数传入空,就只在组件初始化时和销毁前分别执行一次

    作者回复: 没错~ 传入空数组就可以了。

    2021-06-03
    1
  • 大大小小
    BlogView那个例子,为什么要把useCallback返回的函数作为useEffect的依赖呢?是要达到什么目的吗?
    2021-06-03
  • Ada
    如果想要实现只执行一次的功能,用useEffect,依赖项传空数组,不是可以实现吗?
    为什么要写一个自定义钩子?

    作者回复: 因为需要在函数体执行之前执行。useEffect 是在 render 完后执行。

    2021-06-03
    1
    1
  • 浩然
    useEffect(() => {
        return () => {
            // 组件销毁时执行
        }
    }, [])

    作者回复: 正确!

    2021-06-03
收起评论
5
返回
顶部