React父组件管理大量子组件状态：如何避免全量重渲染？

解决这个问题需要从两个核心方向入手：稳定回调函数引用和避免子组件不必要重渲染，具体步骤如下：

1. 使用函数式更新+useCallback稳定回调引用 #

修改handleToggleCheck，利用React useState的函数式更新特性，不需要直接依赖checkedCodes状态，而是通过setState的回调参数获取最新的状态值。这样useCallback的依赖数组可以设为空，保证回调函数的引用始终不变。

修改后的父组件代码：

const Parent = (props) => {
    const { codes } = props // codes 是长度为1000的列表

    const [checkedCodes, setCheckedCodes] = useState(new Set())

    // 用useCallback包裹，依赖为空数组
    const handleToggleCheck = useCallback((code) => {
        // 使用函数式更新，获取最新的checkedCodes状态
        setCheckedCodes(prevChecked => {
            const newChecked = new Set(prevChecked)
            if (newChecked.has(code)) {
                newChecked.delete(code)
            } else {
                newChecked.add(code)
            }
            return newChecked
        })
    }, []) // 依赖为空，回调引用稳定

    return (
        codes.map(code => (
            <Child 
                key={code} 
                checked={checkedCodes.has(code)} 
                onCheck={handleToggleCheck} 
                code={code} 
            />
        ))
    )
}

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

子组件Child只有在props变化时才需要重渲染，因此用React.memo包裹它，避免父组件重渲染时所有子组件跟着无意义更新。

修改后的子组件代码：

// 用React.memo包裹，浅比较props变化
const Child = React.memo((props) => {
    const { checked, code, onCheck } = props

    return (
        <input 
            type="checkbox" 
            checked={checked} 
            onChange={() => onCheck(code)} 
        />
    )
})

额外优化：用对象代替Set（可选） #

如果觉得Set的处理不够直观，也可以用普通对象存储选中状态（键为code，值为布尔值），同样配合函数式更新和useCallback，效果一致：

const Parent = (props) => {
    const { codes } = props
    const [checkedMap, setCheckedMap] = useState({})

    const handleToggleCheck = useCallback((code) => {
        setCheckedMap(prev => ({
            ...prev,
            [code]: !prev[code]
        }))
    }, [])

    return (
        codes.map(code => (
            <Child 
                key={code} 
                checked={!!checkedMap[code]} 
                onCheck={handleToggleCheck} 
                code={code} 
            />
        ))
    )
}

原理说明 #

• 函数式更新：让我们能基于最新状态修改，不需要直接依赖状态变量，从而让useCallback的依赖数组为空，保证回调引用稳定。
• React.memo：对组件的props进行浅比较，只有当props真正变化时才重新渲染子组件，避免全量更新。

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