如果没有更改 props，如何防止重新渲染 React 功能组件

Question

说明： 我在主组件的循环中导入了一个组件，每当我更新状态时，循环组件也会重新渲染。那么，如果没有对组件的 props 进行任何更改，我怎样才能阻止它们渲染呢？

例如：

const child1 = ({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 val={item}/>)
            }

            {number}

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

Answer 1

像这样使用

React.memo

：

import { memo } from "react";

const Child2 = () => {
  console.log("CHILD2 RENDERED");

  return <div>Child2</div>;
};

export const MemoizedChild = memo(Child2);

这是一个示例：Codesandbox。