如何阻止React组件因下拉框重复渲染？50次重渲染问题求助

核心问题 #

你的组件重渲染50次是因为父组件的location状态更新时，整个组件会重新渲染，导致locations.map重新生成所有50个MenuItem。以下是几个可行的优化方案：

1. 用React.memo包裹MenuItem #

将MenuItem封装成独立的记忆化组件，只有当它的props发生变化时才会重渲染。因为你的locations是固定的50个州，每个MenuItem的value和to属性都是静态的，记忆化后能避免不必要的重渲染。

import React, { memo } from 'react';
import { MenuItem } from '@mui/material';
import { Link } from 'react-router-dom';

// 记忆化MenuItem组件
const MemoizedStateMenuItem = memo(({ stateName }) => {
  const value = stateName.toLowerCase();
  return (
    <MenuItem 
      value={value} 
      component={Link} 
      to={`${value}/home`}
    >
      {stateName}
    </MenuItem>
  );
});

// 在原组件中使用
<FormControl>
  <InputLabel>Select a State</InputLabel>
  <Select value={location} onChange={selectionChangeHandler}>
    {locations.map((state) => (
      <MemoizedStateMenuItem 
        key={state.toLowerCase()} 
        stateName={state} 
      />
    ))}
  </Select>
</FormControl>

2. 用useCallback稳定事件处理函数 #

如果你的selectionChangeHandler是在组件内部定义的，每次父组件重渲染都会创建一个新的函数实例，这会导致Select组件的onChange prop变化，间接触发子组件重渲染。用useCallback缓存这个函数，保证它的引用稳定。

import { useCallback } from 'react';
import { useNavigate } from 'react-router-dom';

const navigate = useNavigate();

const selectionChangeHandler = useCallback((event) => {
  const selectedValue = event.target.value;
  setlocation(selectedValue);
  navigate(`${selectedValue}/home`);
}, [navigate]); // 依赖仅保留navigate，setlocation由useState生成，自带稳定性

3. 用useMemo缓存locations数组（可选） #

如果locations是动态获取的（比如从API请求），或者是通过计算生成的，用useMemo缓存这个数组，避免每次重渲染都生成新的数组实例，导致map重新执行。

import { useMemo } from 'react';

// 假设locations是固定数组或仅在特定条件下更新
const memoizedLocations = useMemo(() => locations, []);

// 使用缓存后的数组进行map渲染
<Select value={location} onChange={selectionChangeHandler}>
  {memoizedLocations.map((state) => (
    <MemoizedStateMenuItem 
      key={state.toLowerCase()} 
      stateName={state} 
    />
  ))}
</Select>

效果说明 #

这几个方案组合使用后，当你选择选项更新location状态时，只有Select本身会重渲染，而50个MenuItem因为props没有变化，不会重复渲染。

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