面试题：自定义React Hook的最佳实践与性能优化

创建自定义 React Hook

基础结构：自定义 Hook 本质上是一个函数，其命名必须以 use 开头。例如，创建一个简单的用于追踪点击次数的自定义 Hook：

import { useState } from'react';

// 自定义 Hook
const useClickCount = () => {
    const [count, setCount] = useState(0);
    const incrementCount = () => {
        setCount(count + 1);
    };
    return { count, incrementCount };
};

使用自定义 Hook：在组件中使用该自定义 Hook 就像使用内置 Hook 一样。

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

const MyComponent = () => {
    const { count, incrementCount } = useClickCount();
    return (
        <div>
            <p>点击次数: {count}</p>
            <button onClick={incrementCount}>点击我</button>
        </div>
    );
};

export default MyComponent;

创建和使用自定义 Hook 的最佳实践

单一职责原则：每个自定义 Hook 应该只做一件事，例如，useClickCount 只负责追踪点击次数。这样使得 Hook 易于理解、维护和复用。
命名规范：以 use 开头命名，清晰地表明这是一个 Hook，并在命名中体现其功能，如 useFetchData。
抽象重复逻辑：将组件中重复的逻辑提取到自定义 Hook 中，提高代码的复用性。例如，多个组件都需要进行数据的获取，可创建 useFetch Hook。
避免副作用冲突：在自定义 Hook 内部处理副作用（如 useEffect）时，要确保不会与使用该 Hook 的组件产生副作用冲突。确保依赖数组设置正确，避免不必要的副作用触发。

自定义 Hook 的性能优化

依赖数组处理：
- 精确依赖：在 useEffect 或 useCallback 等 Hook 中，依赖数组应精确列出所有会影响副作用或回调函数行为的值。例如：

import { useEffect, useState } from'react';

const useDataFetch = (url) => {
    const [data, setData] = useState(null);
    useEffect(() => {
        const fetchData = async () => {
            const response = await fetch(url);
            const result = await response.json();
            setData(result);
        };
        fetchData();
    }, [url]); // 只有 url 变化时才重新获取数据
    return data;
};

- **避免遗漏依赖**：若遗漏依赖，可能导致副作用没有在正确的时机更新。例如，在上面的 `useDataFetch` 中，如果遗漏了 `url`，即使 `url` 变化，数据也不会重新获取。
- **使用 `useRef` 来稳定值**：对于不想作为依赖，但又需要在副作用中使用的值，可以使用 `useRef`。例如，一个定时器 ID，在 `useEffect` 中清理定时器时，不需要因为定时器 ID 的变化而重新触发副作用。

import { useEffect, useRef } from'react';

const useInterval = (callback, delay) => {
    const savedCallback = useRef();
    useEffect(() => {
        savedCallback.current = callback;
    }, [callback]);
    useEffect(() => {
        const tick = () => {
            savedCallback.current();
        };
        if (delay!== null) {
            const id = setInterval(tick, delay);
            return () => clearInterval(id);
        }
    }, [delay]);
};

避免不必要的渲染：
- 使用 React.memo 包裹组件：对于函数组件，可以使用 React.memo 进行浅比较，只有当 props 变化时才重新渲染。当使用自定义 Hook 的组件接受 props 时，这一点尤为重要。例如：

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

const MyMemoizedComponent = React.memo((props) => {
    const { count, incrementCount } = useClickCount();
    return (
        <div>
            <p>点击次数: {count}</p>
            <button onClick={incrementCount}>点击我</button>
        </div>
    );
});

export default MyMemoizedComponent;

- **减少 `useState` 更新频率**：避免在不必要的时候调用 `setState`。例如，可以将多个相关的状态更新合并，使用 `prevState` 来基于前一个状态进行更新，以减少渲染次数。

import { useState } from'react';

const MyComponent = () => {
    const [state, setState] = useState({ value1: 0, value2: 0 });
    const handleClick = () => {
        setState((prevState) => ({
           ...prevState,
            value1: prevState.value1 + 1,
            value2: prevState.value2 + 1
        }));
    };
    return (
        <div>
            <p>Value1: {state.value1}</p>
            <p>Value2: {state.value2}</p>
            <button onClick={handleClick}>点击更新</button>
        </div>
    );
};

export default MyComponent;

星途面试题库

面试题：自定义React Hook的最佳实践与性能优化

知识考点

面试题答案

创建自定义 React Hook

创建和使用自定义 Hook 的最佳实践

自定义 Hook 的性能优化