为何React组件参数未变仍重渲染？列表组件卡顿排查

你的核心认知误区 #

React组件的默认行为并不是“props不变就不重渲染”——只要父组件重渲染，所有子组件都会跟着无条件重渲染，不管子组件的props有没有变化。你提到的“仅更新DOM变化部分”是diff阶段的优化行为，但重渲染本身（重新执行子组件代码、生成新虚拟DOM）已经会消耗性能，尤其是大型列表，这个过程的计算量就是卡顿的根源。

为什么TableRows会跟着重渲染？ #

看你的代码，父组件ExistingMargins的状态（isModalOpen/marginBeingEdited）更新时会触发重渲染，此时：

• 传给TableRows的onEditButtonClicked是一个每次父组件重渲染都会重新创建的箭头函数，这意味着这个props的引用每次都不一样。
• 哪怕margins的引用没变化，但因为onEditButtonClicked这个props变了，作为普通组件的TableRows会跟着父组件一起重渲染。
• 大型列表的margins.map会生成大量的<tr>和<button>虚拟DOM，这个过程的计算量直接导致了卡顿。

解决思路（验证你的memoization想法） #

要避免不必要的重渲染，需要两步配合：

1. 用useCallback缓存事件函数 #

把onEditButtonClicked用useCallback包裹，确保父组件重渲染时它的引用保持稳定：

const ExistingMargins = ({ margins }) => {
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [marginBeingEdited, setMarginBeingEdited] = useState();

    // 缓存编辑点击函数，依赖项为空（useState返回的set函数是稳定的）
    const handleEditClick = useCallback((marginToEdit) => {
        setMarginBeingEdited(marginToEdit);
        setIsModalOpen(true);
    }, []);

    return (
        <>
            <TableRows
                margins={margins}
                onEditButtonClicked={handleEditClick}
            />
            <EditModal
                isModalOpen={isModalOpen}
                closeModal={() => setIsModalOpen(false)}
                margin={marginBeingEdited}
            />
        </>
    );
};

2. 用React.memo包裹TableRows组件 #

让TableRows仅在props真正变化时才重渲染：

import { memo } from 'react';

const TableRows = memo(({ margins, onEditButtonClicked }) => {
    return (
        <table>
            {margins.map(margin => (
                <tr key={margin.Id}>
                    <td>{margin.Name}</td>
                    <td>
                        <button onClick={() => onEditButtonClicked(margin)}>Edit</button>
                    </td>
                </tr>
            ))}
        </table>
    );
});

这样，只有当margins的引用变化，或者handleEditClick的引用变化时，TableRows才会重渲染，彻底避免了模态框弹出时的不必要重渲染卡顿。

额外提醒 #

重渲染和DOM更新是两回事：重渲染是组件重新执行并生成虚拟DOM的过程，哪怕最后diff后DOM没有变化，这个过程依然会消耗性能。大型列表的卡顿大多源于此，而不是DOM更新的开销。

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