面试题：React Hooks 性能优化与自定义钩子

Question

在使用 React Hooks 开发应用时，如何进行性能优化？请结合 useMemo、useCallback 等钩子说明。另外，请实现一个自定义钩子 useDebounce，用于处理输入框的防抖逻辑。

Answer 1

1. 使用 React Hooks 进行性能优化

• useMemo：
  • 作用：useMemo 用于缓存一个值，只有当它的依赖项发生变化时才会重新计算。它接受两个参数，第一个是一个函数，该函数返回要缓存的值，第二个是依赖项数组。
  • 示例：

  import React, { useMemo } from'react';
  
  const expensiveCalculation = (a, b) => {
    // 模拟复杂计算
    for (let i = 0; i < 1000000; i++);
    return a + b;
  };
  
  const MyComponent = ({ a, b }) => {
    const result = useMemo(() => expensiveCalculation(a, b), [a, b]);
    return <div>{result}</div>;
  };
  

  • 原理：在组件渲染时，useMemo 会记住上一次计算的值和依赖项。如果依赖项没有变化，就直接返回上一次缓存的值，避免了不必要的计算。
• useCallback：
  • 作用：useCallback 用于缓存一个函数，只有当它的依赖项发生变化时才会重新创建函数。它接受两个参数，第一个是要缓存的函数，第二个是依赖项数组。
  • 示例：

  import React, { useCallback } from'react';
  
  const MyChildComponent = ({ onClick }) => {
    return <button onClick={onClick}>点击</button>;
  };
  
  const MyParentComponent = () => {
    const handleClick = useCallback(() => {
      console.log('按钮被点击');
    }, []);
    return <MyChildComponent onClick={handleClick} />;
  };
  

  • 原理：在函数组件每次渲染时，普通函数都会重新创建。而 useCallback 会确保只有依赖项变化时才重新创建函数，这样可以避免子组件因为父组件传递的函数引用变化而不必要的重新渲染。

2. 实现自定义钩子 useDebounce

import { useState, useEffect } from'react';

const useDebounce = (value, delay) => {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const timer = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    return () => {
      clearTimeout(timer);
    };
  }, [value, delay]);

  return debouncedValue;
};

export default useDebounce;

在上述代码中，useDebounce 钩子接受两个参数：要防抖的值 value 和延迟时间 delay。通过 useState 来保存防抖后的值 debouncedValue，通过 useEffect 来设置定时器，当 value 或 delay 变化时，会清除之前的定时器并重新设置新的定时器，在定时器到期后更新 debouncedValue。最后返回 debouncedValue 供组件使用。