React 自定义 Hook 与 Hooks 使用规则全解析

天天扭码
786 阅读4分钟

在 React 开发的世界里，Hooks 的出现彻底改变了函数式组件的开发方式，让我们能以更简洁、高效的方式实现组件逻辑。其中，自定义 Hook 和严格的 Hooks 使用规则，更是提升开发效率和代码质量的关键。接下来，就带大家深入了解这两个重要内容。

一、React 自定义 Hook

1.1 什么是自定义 Hook

自定义 Hook 本质上是以 use 开头命名的函数，它的核心价值在于实现逻辑的封装和复用。通过自定义 Hook，我们可以将一些通用的、重复的逻辑提取出来，避免在多个组件中重复编写，从而提高代码的可维护性和复用性。

1.2 封装自定义 hook 的通用思路

  • 步骤一：声明函数

首先，我们需要声明一个以 use 打头的函数，这是自定义 Hook 的命名规范，通过这样的命名，能够清晰地让开发者识别出这是一个 Hook 函数。

  • 步骤二：封装逻辑

在函数体内，封装可复用的逻辑。这里的逻辑可以是状态管理、数据获取、事件处理等任何可复用的代码片段。

  • 步骤三：返回结果

把组件中用到的状态或者回调以对象或数组的形式 return 出去。这样，使用该自定义 Hook 的组件就能获取到所需的数据和操作方法。

  • 步骤四：使用 Hook

在需要用到这个逻辑的组件中，调用这个自定义 Hook 函数，并解构出返回的状态和回调进行使用。

1.3 示例对比

我们通过一个简单的示例来对比使用自定义 Hook 前后的代码差异。

自定义 Hook 之前

import {useState} from "react"
function App() {
    const [value, setValue] = useState(true)
    const toggle = () => {
        setValue(!value)
    }
    return (
        <div>
            {value && <h1>Hello World</h1>}
            <button onClick={toggle}>toggle</button>
        </div>
    )
}
export default App;

在这个组件中，我们实现了一个简单的显示 / 隐藏功能，通过 useState 管理状态 value ，并定义了 toggle 函数来切换状态。

自定义 Hook 之后

import {useState} from "react"
function useToggle() {
    const [value, setValue] = useState(true)
    const toggle = () => {
        setValue(!value)
    }
    return {value, toggle}
}
function App() {
    const {value, toggle} = useToggle()
    return (
        <div>
            {value && <h1>Hello World</h1>}
            <button onClick={toggle}>toggle</button>
        </div>
    )
}
export default App;

通过自定义 useToggle Hook，我们将状态管理和切换逻辑封装起来。在 App 组件中，只需简单调用 useToggle 并解构出 value 和 toggle ，就能实现相同的功能。如果后续有其他组件也需要类似的显示 / 隐藏功能，直接复用 useToggle 即可，大大减少了代码重复。

二、React Hooks 使用规则

2.1 规则一：只能在组件中或者其他自定义 Hook 函数中调用

Hooks 必须在 React 组件的函数体内或者其他自定义 Hook 函数中调用，不能在普通的 JavaScript 函数中使用。

import {useState} from "react"
// 错误示例：直接在顶层调用Hook
const [count, setCount] = useState(0) 
function App() {
    return (
        <div>这不对</div>
    )
}
export default App;

上述代码中，useState 在组件外部调用，这违反了 Hooks 的使用规则，会导致程序报错。正确的做法是将 useState 调用放在 App 组件内部。

2.2 规则二：只能在组件的顶层调用，不能嵌套在 if、for 等其他函数中

Hooks 调用必须在组件函数的顶层，不能被嵌套在条件语句、循环语句或者其他函数内部。

import {useState} from "react"
function App() {
    // 错误示例：在if语句中调用Hook
    if (false) { 
        const [count, setCount] = useState(0)
    }
    return (
        <div>这不对</div>
    )
}
export default App;

在这个例子中，useState 被放在 if 语句中，这会破坏 Hooks 的调用顺序，导致 React 无法正确追踪状态和副作用，从而引发错误。所有的 Hooks 调用都应该在组件函数的最外层，保证其调用顺序的一致性。

三、总结

React 自定义 Hook 为我们提供了强大的逻辑复用能力，通过遵循特定的封装思路，能有效减少代码冗余，提升开发效率。而严格遵守 React Hooks 的使用规则，则是确保代码稳定运行的基础，避免因不当调用引发难以调试的问题。掌握好自定义 Hook 和 Hooks 使用规则，将帮助我们在 React 开发中编写出更优质、更易维护的代码。希望本文的讲解能让你对这两个重要知识点有更清晰、深入的理解，在实际项目开发中灵活运用 。

avatar
文章
阅读
粉丝