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

06|自定义Hooks :四个典型的使用场景

王沛 2021-06-05
你好,我是王沛。
我在开篇词就说过,要用好 React Hooks,很重要的一点,就是要能够从 Hooks 的角度去思考问题。要做到这一点其实也不难,就是在遇到一个功能开发的需求时,首先问自己一个问题:这个功能中的哪些逻辑可以抽出来成为独立的 Hooks?
这么问的目的,是为了让我们尽可能地把业务逻辑拆成独立的 Hooks ,这样有助于实现代码的模块化和解耦,同时也方便后面的维护。如果你基础篇的知识掌握得牢固的话,就会发现,这是因为 Hooks 有两个非常核心的优点:
一是方便进行逻辑复用;
二是帮助关注分离。
接下来我就通过一个案例,来带你认识什么是自定义 Hooks,以及如何创建。然后,我们再通过其它 3 个典型案例,来看看自定义 Hooks 具体有什么用,从而帮你掌握从 Hooks 角度去解决问题的思考方式。

如何创建自定义 Hooks?

自定义 Hooks 在形式上其实非常简单,就是声明一个名字以 use 开头的函数,比如 useCounter。这个函数在形式上和普通的 JavaScript 函数没有任何区别,你可以传递任意参数给这个 Hook,也可以返回任何值。
但是要注意,Hooks 和普通函数在语义上是有区别的,就在于函数中有没有用到其它 Hooks。
确认放弃笔记?
放弃后所记笔记将不保留。
新功能上线,你的历史笔记已初始化为私密笔记,是否一键批量公开?
批量公开的笔记不会为你同步至部落
公开
同步至部落
取消
完成
0/1000字
划线
笔记
复制
© 版权归极客邦科技所有,未经许可不得传播售卖。 页面已增加防盗追踪,如有侵权极客邦将依法追究其法律责任。
该试读文章来自付费专栏《React Hooks 核心原理与实战》,如需阅读全部文章,
请订阅文章所属专栏新⼈⾸单¥59.9
立即订阅
登录 后留言

精选留言(3)

  • xgqfrms
    完全没有必要使用 await 处理 res 呀

    ```js
    // return await res.json();

     return res.json();

    ```
    2021-06-05
  • Free fall
    const useCounter = (initCount = 0) => {
      const [count, setCount] = useState(initCount)

      const increase = useCallback((body) => {
        setCount((count) => (count += body))
      }, [])

      return [count, increase]
    }
    2021-06-05
  • 凡凡
    import { useState, useCallback } from 'react';

    const useCounter = (step) => {
      const [counter, setCounter] = useState(0);
      const increment = useCallback(() => setCounter(counter + step), [counter, step]);
      const decrement = useCallback(() => setCounter(counter - step), [counter, step]);
      const reset = useCallback(() => setCounter(0), []);
      
      return {counter, increment, decrement, reset};
    }

    export default useCounter;
    2021-06-05
    1
收起评论
3
返回
顶部