面试题：React Server Components中Hooks的性能优化

可能出现性能问题的场景

在 React Server Components 项目中，若在一个频繁渲染的父组件中使用了一个依赖于父组件 props 的 Hook，且该 Hook 内部执行了较为复杂的计算或副作用操作。例如，使用 useEffect Hook 依赖了父组件传递的数组类型的 prop，每当父组件重新渲染，即使数组内容未改变，由于数组引用变化，useEffect 也会重新执行，导致不必要的性能开销。

优化方法

使用 useMemo 缓存计算结果：对于 Hook 内部复杂的计算，可以使用 useMemo 来缓存计算结果，只有当依赖项发生变化时才重新计算。例如：

import React, { useMemo } from'react';

const ChildComponent = ({ data }) => {
  const processedData = useMemo(() => {
    // 复杂计算操作
    return data.filter(item => item > 10).map(item => item * 2);
  }, [data]);

  return <div>{/* 使用 processedData 进行渲染 */}</div>;
};

使用 useCallback 稳定函数引用：如果在 Hook 中传递函数给子组件，使用 useCallback 来确保函数引用稳定，避免不必要的子组件重新渲染。例如：

import React, { useCallback } from'react';

const ParentComponent = () => {
  const [count, setCount] = React.useState(0);
  const handleClick = useCallback(() => {
    setCount(count + 1);
  }, [count]);

  return <ChildComponent onClick={handleClick} />;
};

减少不必要的依赖：仔细检查 useEffect 或其他 Hook 的依赖数组，确保只依赖真正需要的变量，避免因无关变量的变化导致 Hook 不必要的重新执行。例如，若 useEffect 中只需要某个对象的特定属性，而非整个对象，那就只将该属性放入依赖数组。

import React, { useEffect } from'react';

const Component = ({ user }) => {
  useEffect(() => {
    // 只依赖 user.id
    console.log('Effect ran for user id change', user.id);
  }, [user.id]);

  return <div>{/* 组件渲染 */}</div>;
};

星途面试题库

面试题：React Server Components中Hooks的性能优化

知识考点

面试题答案

可能出现性能问题的场景

优化方法