面试题：React 中自定义Hooks如何实现数据的共享与复用

1. 自定义Hooks实现逻辑共享与复用

假设获取用户登录信息是通过一个异步函数 fetchUserLoginInfo 来实现，大致代码结构如下：

import { useState, useEffect } from'react';

// 自定义Hook
const useUserLoginInfo = () => {
    const [userLoginInfo, setUserLoginInfo] = useState(null);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);

    useEffect(() => {
        const fetchData = async () => {
            try {
                const response = await fetchUserLoginInfo();
                setUserLoginInfo(response);
            } catch (error) {
                setError(error);
            } finally {
                setLoading(false);
            }
        };
        fetchData();
    }, []);

    return { userLoginInfo, loading, error };
};

// 使用自定义Hook的组件
const ComponentA = () => {
    const { userLoginInfo, loading, error } = useUserLoginInfo();
    if (loading) return <div>Loading...</div>;
    if (error) return <div>Error: {error.message}</div>;
    return <div>User Login Info: {JSON.stringify(userLoginInfo)}</div>;
};

const ComponentB = () => {
    const { userLoginInfo, loading, error } = useUserLoginInfo();
    if (loading) return <div>Loading...</div>;
    if (error) return <div>Error: {error.message}</div>;
    return <div>Component B - User Login Info: {JSON.stringify(userLoginInfo)}</div>;
};

2. 自定义Hooks相比于普通函数的优势

状态管理：普通函数无法直接管理和更新React组件的状态。而自定义Hook可以利用React的 useState 等状态钩子来管理状态，在不同组件中复用状态逻辑时，能方便地维护和更新状态。
副作用处理：自定义Hook能够通过 useEffect 来处理副作用，如上述代码中的异步数据获取。普通函数则难以在函数调用时，像Hook那样与React的副作用处理机制紧密集成。
组件生命周期关联：自定义Hook在组件的生命周期内执行和管理逻辑，能根据组件的挂载、更新、卸载等阶段进行相应的操作。普通函数没有这种与组件生命周期的内在联系，难以在不同组件复用逻辑时处理好生命周期相关的行为。
代码组织和复用：自定义Hook遵循React的设计原则，使得逻辑复用更加清晰和符合React的开发模式。它可以在不同组件之间共享复杂的状态逻辑，提高代码的可维护性和复用性，而普通函数可能需要额外的参数传递和复杂的逻辑封装来适应不同组件的需求。

面试题：React 中自定义Hooks如何实现数据的共享与复用

知识考点

面试题答案

1. 自定义Hooks实现逻辑共享与复用

2. 自定义Hooks相比于普通函数的优势