性能优化

React.memo()

React 的默认行为是当父组件渲染时，React 会递归渲染其中的所有子组件！

xxxxxxxxxx
//pages/ProductChild.js
import React, { useEffect } from 'react';

function ProductChild() {
   
    useEffect(() => {
        console.log('子元素重新渲染')
    })
    return (
        <div>
            子元素
    </div>
    );
}
export default React.memo(ProductChild)

为了让子组件跳过没有必要的渲染，我们可以将 子组件包装在 React.memo() 中，这可以确保组件只有在 props 真正更改时才会重新渲染。

xxxxxxxxxx
//pages/ProductChild.js
export default React.memo(ProductChild)