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

Question

Assuming I have a memoized child component:

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

The Child component only gets rerender if the number props is changed.

Now, I put the Child component inside the Parent component. The parent component is as of following:

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

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

So, in this case, the Child components are generated inside a loop over the numbers array. However, the child components are memoized. In case when only one number is changed in the array, for example, if we change [1,2,3,4,5,6] to [ 1,2,111111,4,5,6] . The third number goes from 3 to 111111. Now, does the every child element get rerendered, or only the third child elements get rerender?

Answer 1

In this case, only the third child will be re-rendered , as the props for the other children will be the same

You can check this for yourself using the following example:

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>
    </>
  )
}