在 React 中，如果备忘录组件列表位于从列表 state 调用的 map function 中，是否会呈现它们？

Question

假设我有一个备忘的子组件：

function Child({number}){
     return <div> {number} </div>;
}
export React.memo(child)

如果更改了 number 属性，则 Child 组件只会重新渲染。

现在，我将 Child 组件放在 Parent 组件中。 父组件如下：

function Parents(){
    const [numbers, setNumbers] = useState([1,2,3,4,5,6]);

    return (
            <>
              numbers.map((number,index)=>{
               <Child key={index} number={number}> 
              }
            </>
        )
   }

因此，在这种情况下，子组件是在数字数组的循环内生成的。 但是，子组件会被记忆。 如果数组中只有一个数字发生变化，例如，如果我们将[1,2,3,4,5,6]更改为 [ 1,2,111111,4,5,6] 。 第三个数字从 3 到 111111。现在，是每个子元素都被重新渲染，还是只有第三个子元素被重新渲染？

Answer 1

在这种情况下，只有第三个孩子会被重新渲染，因为其他孩子的道具是一样的

您可以使用以下示例自行检查：

import {memo, useState} from 'react'



const Child = memo(({number}) => {
  console.log('re-render', number);
  return <div>{number}</div>;
})

export default function App() {
  const [numbers, setNumbers] = useState([1,2,3,4,5,6]);

  return (
    <>
      {numbers.map((number,index)=>
        <Child number={number} /> )
      }

      <button onClick={() => {
        setNumbers(prev => {
         prev[2] = 111;
         return [...prev];
        })
      }}>
        click
      </button>
    </>
  )
}