JavaScript React Hooks 实战：useState/useEffect 封装与自定义 Hook 设计

一、前言

在前端开发里，React 可是个很火的框架，而 React Hooks 更是给开发带来了极大的便利。今天咱们就来聊聊 React Hooks 里的 useState 和 useEffect，看看怎么封装它们，还有怎么设计自定义 Hook。

二、React Hooks 基础介绍

2.1 什么是 React Hooks

简单来说，React Hooks 就是 React 提供的一些函数，让你不用写 class 也能使用 state 还有其他 React 特性。以前用 class 写组件的时候，逻辑会比较复杂，代码也不好维护。有了 Hooks 之后，代码结构更清晰，复用性也更高。

2.2 useState 和 useEffect 简介

• useState：这个 Hook 主要用来给组件添加 state。在函数组件里，本来是没有自己的 state 的，但是有了 useState 就可以有啦。它返回一个数组，第一个元素是当前的 state 值，第二个元素是更新 state 的函数。
• useEffect：这个 Hook 可以让你在组件渲染之后执行一些副作用操作，比如数据获取、订阅事件、修改 DOM 等等。它就像是 class 组件里的 componentDidMount、componentDidUpdate 和 componentWillUnmount 这几个生命周期函数的结合体。

三、useState 的封装

3.1 基本使用示例

下面是一个简单的 useState 使用示例，技术栈为 JavaScript + React：

import React, { useState } from 'react';

function Counter() {
    // 使用 useState 定义一个名为 count 的 state，初始值为 0
    const [count, setCount] = useState(0);

    return (
        <div>
            <p>你点击了 {count} 次</p>
            {/* 点击按钮时调用 setCount 函数更新 count 的值 */}
            <button onClick={() => setCount(count + 1)}>
                点击我
            </button>
        </div>
    );
}

export default Counter;

在这个示例中，我们定义了一个名为 count 的 state，初始值为 0。每次点击按钮，就会调用 setCount 函数来更新 count 的值。

3.2 封装 useState

有时候，我们可能会有一些通用的 state 操作，这时候就可以把 useState 封装一下。比如，我们要封装一个可以控制显示和隐藏的 Hook：

import React, { useState } from 'react';

// 封装一个自定义的 useState Hook，用于控制显示和隐藏
function useToggle(initialValue = false) {
    const [value, setValue] = useState(initialValue);

    const toggle = () => {
        setValue(!value);
    };

    return [value, toggle];
}

function App() {
    // 使用自定义的 useToggle Hook
    const [isVisible, toggleVisibility] = useToggle(false);

    return (
        <div>
            {/* 根据 isVisible 的值决定是否显示内容 */}
            {isVisible && <p>这是显示的内容</p>}
            {/* 点击按钮时调用 toggleVisibility 函数切换显示状态 */}
            <button onClick={toggleVisibility}>
                {isVisible ? '隐藏' : '显示'}
            </button>
        </div>
    );
}

export default App;

在这个示例中，我们封装了一个 useToggle Hook，它接受一个初始值，返回一个数组，第一个元素是当前的状态，第二个元素是切换状态的函数。这样，我们在其他组件里就可以方便地使用这个 Hook 来控制显示和隐藏了。

四、useEffect 的封装

4.1 基本使用示例

下面是一个 useEffect 的基本使用示例，技术栈为 JavaScript + React：

import React, { useState, useEffect } from 'react';

function Example() {
    const [count, setCount] = useState(0);

    // 使用 useEffect 进行副作用操作
    useEffect(() => {
        // 每次 count 变化时，更新文档标题
        document.title = `你点击了 ${count} 次`;

        // 返回一个清理函数，在组件卸载时执行
        return () => {
            console.log('组件卸载了');
        };
    }, [count]); // 只有当 count 变化时，才会重新执行 useEffect

    return (
        <div>
            <p>你点击了 {count} 次</p>
            <button onClick={() => setCount(count + 1)}>
                点击我
            </button>
        </div>
    );
}

export default Example;

在这个示例中，我们使用 useEffect 来更新文档标题。每次 count 变化时，就会重新执行 useEffect 里的代码。同时，我们返回了一个清理函数，在组件卸载时会执行这个清理函数。

4.2 封装 useEffect

我们可以封装一个通用的 useEffect 来处理数据获取。比如，我们要从一个 API 获取数据：

import React, { useState, useEffect } from 'react';

// 封装一个自定义的 useEffect Hook，用于获取数据
function useFetch(url) {
    const [data, setData] = useState(null);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);

    useEffect(() => {
        const fetchData = async () => {
            try {
                const response = await fetch(url);
                if (!response.ok) {
                    throw new Error('网络请求失败');
                }
                const result = await response.json();
                setData(result);
            } catch (err) {
                setError(err);
            } finally {
                setLoading(false);
            }
        };

        fetchData();
    }, [url]);

    return { data, loading, error };
}

function App() {
    // 使用自定义的 useFetch Hook 获取数据
    const { data, loading, error } = useFetch('https://jsonplaceholder.typicode.com/todos/1');

    if (loading) {
        return <p>加载中...</p>;
    }

    if (error) {
        return <p>出错了：{error.message}</p>;
    }

    return (
        <div>
            <p>{data.title}</p>
        </div>
    );
}

export default App;

在这个示例中，我们封装了一个 useFetch Hook，它接受一个 URL 作为参数，返回一个包含数据、加载状态和错误信息的对象。这样，我们在其他组件里就可以方便地使用这个 Hook 来获取数据了。

五、自定义 Hook 设计

5.1 自定义 Hook 的概念

自定义 Hook 其实就是一个函数，它可以调用其他的 Hook。自定义 Hook 可以把一些复用的逻辑封装起来，让代码更简洁、更易于维护。

5.2 自定义 Hook 的设计原则

• 复用性：自定义 Hook 应该是可以在多个组件里复用的。
• 单一职责：每个自定义 Hook 应该只负责一个特定的功能。
• 独立性：自定义 Hook 应该是独立的，不依赖于特定的组件。

5.3 自定义 Hook 示例

下面是一个自定义 Hook 的示例，用于监听窗口大小的变化，技术栈为 JavaScript + React：

import React, { useState, useEffect } from 'react';

// 自定义 Hook，用于监听窗口大小的变化
function useWindowSize() {
    const [windowSize, setWindowSize] = useState({
        width: window.innerWidth,
        height: window.innerHeight
    });

    useEffect(() => {
        const handleResize = () => {
            setWindowSize({
                width: window.innerWidth,
                height: window.innerHeight
            });
        };

        window.addEventListener('resize', handleResize);

        // 返回一个清理函数，在组件卸载时移除事件监听器
        return () => {
            window.removeEventListener('resize', handleResize);
        };
    }, []);

    return windowSize;
}

function App() {
    // 使用自定义的 useWindowSize Hook
    const { width, height } = useWindowSize();

    return (
        <div>
            <p>窗口宽度：{width}</p>
            <p>窗口高度：{height}</p>
        </div>
    );
}

export default App;

在这个示例中，我们封装了一个 useWindowSize Hook，它可以监听窗口大小的变化，并返回当前的窗口大小。这样，我们在其他组件里就可以方便地使用这个 Hook 来获取窗口大小了。

六、应用场景

6.1 表单处理

在表单处理中，我们可以使用 useState 来管理表单的状态。比如，一个简单的登录表单：

import React, { useState } from 'react';

function LoginForm() {
    const [username, setUsername] = useState('');
    const [password, setPassword] = useState('');

    const handleSubmit = (e) => {
        e.preventDefault();
        console.log('用户名：', username);
        console.log('密码：', password);
    };

    return (
        <form onSubmit={handleSubmit}>
            <input
                type="text"
                placeholder="用户名"
                value={username}
                onChange={(e) => setUsername(e.target.value)}
            />
            <input
                type="password"
                placeholder="密码"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
            />
            <button type="submit">登录</button>
        </form>
    );
}

export default LoginForm;

6.2 数据获取

在数据获取方面，我们可以使用 useEffect 和自定义的 useFetch Hook 来获取数据。比如，获取用户列表：

import React from 'react';
import useFetch from './useFetch';

function UserList() {
    const { data, loading, error } = useFetch('https://jsonplaceholder.typicode.com/users');

    if (loading) {
        return <p>加载中...</p>;
    }

    if (error) {
        return <p>出错了：{error.message}</p>;
    }

    return (
        <ul>
            {data.map(user => (
                <li key={user.id}>{user.name}</li>
            ))}
        </ul>
    );
}

export default UserList;

6.3 状态管理

在状态管理方面，我们可以使用自定义 Hook 来管理一些通用的状态。比如，前面提到的 useToggle Hook 就可以用来管理显示和隐藏的状态。

七、技术优缺点

7.1 优点

• 代码复用性高：自定义 Hook 可以把一些复用的逻辑封装起来，让代码更简洁、更易于维护。
• 代码结构清晰：使用 Hooks 可以让代码结构更清晰，避免了 class 组件里复杂的生命周期函数。
• 函数式编程：Hooks 采用函数式编程的思想，让代码更易于理解和测试。

7.2 缺点

• 学习成本较高：对于初学者来说，理解 Hooks 的概念和使用方法可能需要一些时间。
• 容易滥用：如果不合理地使用 Hooks，可能会导致代码变得复杂和难以维护。

八、注意事项

8.1 只能在顶层调用 Hook

Hook 只能在函数组件的顶层调用，不能在循环、条件语句或者嵌套函数里调用。否则，会导致 Hook 的调用顺序混乱，出现错误。

8.2 遵循 Hook 的调用规则

要遵循 Hook 的调用规则，比如 useState 和 useEffect 的使用方法。如果不遵循规则，也会导致代码出现错误。

8.3 清理副作用

在使用 useEffect 时，要记得返回一个清理函数，用于清理副作用。比如，移除事件监听器、取消订阅等等。

九、文章总结

通过本文，我们学习了 React Hooks 里的 useState 和 useEffect 的封装，以及自定义 Hook 的设计。我们了解了它们的基本使用方法，还通过示例展示了如何封装和使用这些 Hook。同时，我们也介绍了它们的应用场景、技术优缺点和注意事项。

总的来说，React Hooks 给我们带来了很多便利，让我们的代码更简洁、更易于维护。在实际开发中，我们可以根据具体的需求，合理地使用这些 Hook，提高开发效率。