如何在React函数组件props未变更时避免重复渲染？

当父组件state更新触发重渲染时，默认所有子组件都会跟着重渲染，哪怕子组件的props没变化。针对你这个场景，有两个关键优化点：

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

React.memo是React提供的高阶组件，它会对组件的props做浅比较，只有当props确实变化时，才会重新渲染子组件。

另外注意：React组件的首字母必须大写，否则会被当成普通HTML标签处理，所以先把你的child1改成Child1。

修改后的子组件代码：

const Child1 = React.memo(({ val }) => {
    console.log("CHILD1 RENDERED")
    return (
        <>
            {val}
        </>
    )
})

2. 给循环渲染的子组件设置唯一key #

列表渲染时必须给每个子组件设置唯一的key，这能让React准确识别每个组件的身份，避免不必要的组件销毁和重建，进一步优化渲染性能。

修改Main组件的循环部分：

loopArr.map((item) => <Child1 key={item} val={item} />)

完整优化后的代码 #

const Child1 = React.memo(({ val }) => {
    console.log("CHILD1 RENDERED")
    return (
        <>
            {val}
        </>
    )
})

const Main = () => {
    const [number, setNumber] = useState(0);
    const loopArr = [1, 2, 3, 4];

    return (
        <>
            {
                loopArr.map((item) => <Child1 key={item} val={item} />)
            }

            {number}

            <button onClick={() => setNumber(number + 1)}>Increment</button>
        </>
    )
}

现在点击按钮更新number时，子组件的val没有变化，就不会触发重复渲染了。

如果你的子组件props包含复杂类型（比如对象、数组），浅比较无法准确判断变化，可以给React.memo传入第二个参数，自定义props比较函数：

const Child1 = React.memo(({ val }) => {
    // 组件内容
}, (prevProps, nextProps) => {
    // 自定义比较逻辑，返回true表示不需要重渲染，false表示需要重渲染
    return prevProps.val === nextProps.val;
})

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