基于自定义Hook提取公共逻辑

自定义 Hook 是一种自然遵循 Hook 设计模式的函数，它可以让开发者将组件逻辑提取到可重用的函数中。当开发者想在不同的组件之间共享一些状态逻辑时，自定义 Hook 非常有用。使用自定义 Hook 可以使组件更加清晰、简洁，同时保持逻辑的可复用性和组织性。

创建自定义 Hook 很简单，你只需要创建一个函数，其名称以 use 开头，然后在该函数内部调用其他 Hook。以下是一个简单的自定义 Hook 的例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
/*
 * @Description: 
 * @Author: xiuji
 * @Date: 2024-01-30 09:38:50
 * @LastEditTime: 2024-01-30 09:50:25
 * @LastEditors: Do not edit
 */
import { useState } from "react";

// 批量添加状态，修改状态内指定属性
const useBatchState = function (initialState) {
    const [state, setState] = useState(initialState);
    const setBatchState = function (newState) {
        setState({
            ...state,
            ...newState
        })
    }
    return [state, setBatchState];
}

const DiyDemo = function () {
    const [state, setBatchState] = useBatchState({
        name: '张三',
        age: 18
    })


    return (
        <div>
            <h1>自定义hook</h1>
            <p>姓名：{state.name}</p>
            <p>年龄：{state.age}</p>
            <button onClick={() => setBatchState({ name: '李四' })}>修改姓名</button>
        </div>
    )
}

export default DiyDemo;

自定义 Hook 的关键优势在于它们的复用性和对逻辑的封装。开发者可以在不同的组件中使用同一自定义 Hook，而无需编写重复的代码。当发现自己在多个组件中重复相同的 Hook 逻辑时，就是创建自定义 Hook 的好时机。