React中兄弟组件传值如何避免主应用及所有子组件重渲染？

以下是无需引入Redux、Zustand等高级状态管理工具的优化方案，核心是通过React内置API控制组件重渲染范围：

1. 用React.memo包裹无状态依赖的组件 #

对不依赖收藏状态的组件，用React.memo包裹，确保只有当组件props变化时才会重渲染：

• 比如Footer组件，完全和收藏功能无关，直接包裹：

import React from 'react';

const Footer = () => {
  return <footer>游戏商城 © 2024</footer>;
};

// 只有props变化时才重渲染，这里无props，所以只会渲染一次
export default React.memo(Footer);

• Header组件如果仅需传递收藏数量给Favorites，也可以用React.memo包裹，避免因父组件重渲染而触发自身无意义的更新。

2. 用useCallback稳定回调函数引用 #

你之前尝试useCallback未成功，大概率是依赖项处理不当。将操作收藏的回调函数用useCallback包裹，保证其引用在组件生命周期内稳定，避免子组件因函数引用变化而重渲染：

// App组件内
import { useState, useCallback } from 'react';

const App = () => {
  const [favorites, setFavorites] = useState([]);

  // 用useCallback稳定引用，依赖项仅保留setFavorites（React保证其引用不变）
  const addToFavorites = useCallback((game) => {
    // 用函数式更新获取最新状态，避免闭包问题
    setFavorites(prev => [...prev, game]);
  }, [setFavorites]);

  return (
    <div>
      {/* 只传递Favorites需要的最小数据：收藏数量，而非整个数组 */}
      <Header favoritesCount={favorites.length} />
      <ListGames addToFavorites={addToFavorites} />
      <Footer />
    </div>
  );
};

之后给ListGames也套上React.memo，它就只会在addToFavorites引用变化时重渲染（而现在这个函数引用已经稳定）：

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

const ListGames = ({ addToFavorites }) => {
  return (
    <div className="games-list">
      {games.map(game => (
        <Card key={game.id} game={game} addToFavorites={addToFavorites} />
      ))}
    </div>
  );
};

export default React.memo(ListGames);

3. 给子组件也做重渲染控制 #

对Card和ButtonSendFavorites这类深层子组件，同样用React.memo包裹，确保只有自身依赖的props变化时才更新：

// Card组件
import React from 'react';
import ButtonSendFavorites from './ButtonSendFavorites';

const Card = ({ game, addToFavorites }) => {
  const isFavorite = favorites.some(item => item.id === game.id);
  
  return (
    <div className="game-card">
      <h3>{game.name}</h3>
      <ButtonSendFavorites 
        onClick={() => addToFavorites(game)} 
        isFavorite={isFavorite}
      />
    </div>
  );
};

// 仅当game或addToFavorites变化时重渲染
export default React.memo(Card);

4. 避免传递不稳定的引用类型props #

如果给子组件传递数组、对象这类引用类型数据，要用useMemo包裹，保证其引用稳定：
比如ListGames需要的游戏列表如果是经过处理的，就用useMemo缓存：

// App组件内
const processedGames = useMemo(() => {
  return rawGames.map(game => ({ ...game, price: game.price.toFixed(2) }));
}, [rawGames]);

// 传递给ListGames的是稳定引用的数组
<ListGames games={processedGames} addToFavorites={addToFavorites} />

关键注意点 #

• 只传递组件需要的最小数据：比如给Header传favorites.length而非整个favorites数组，减少props变化的概率；
• 避免在组件内部每次渲染时创建新的对象/数组：这类临时变量会导致React.memo失效；
• 函数式更新状态：操作收藏时用setFavorites(prev => ...)的形式，避免闭包捕获旧状态的问题。

内容的提问来源于stack exchange，提问作者Alan Ferreira