Повторно отображать только определенные дочерние компоненты в функции карты JSX

Question

Я отображаю через массив, который возвращает компоненты JSX для каждого из элементов массива. Во время выполнения я хочу передать значения. Если они соответствуют стоимости отдельных элементов, их индивидуальный компонент изменяется.

Я пытаюсь найти способ добиться этого без повторной визуализации всех компонентов, что в настоящее время происходит из-за изменения свойств

Я пробовал использовать shouldComponentUpdate в компоненте класса, но, похоже, таким образом я могу сравнивать prevState и prevProps только с соответствующими изменениями. Я также рассмотрел useMemo в функции Map, которая не работала, потому что была вложена внутри функции карты.

const toParent=[1,2,4,5]

Родительский компонент:

function parent({ toParent }) {

const [myNumbers] = useState([1,2,3,4, ..., 1000]);

return (
   <div>
      {myNumbers.map((number, index) => (
         <Child toChild = { toParent } number = { number } 
          index= { index } key = { number }/>
      ))}
   </div>
  )
}

Дочерний компонент:

function Child({toChild, number, index}){
   const [result, setResult] = useState(() => { return number*index }

   useEffect(()=> {
      if (toChild.includes(number)) {
         let offset = 10
         setResult((prev)=> { return { prev+offset }})
      }
   }, [toChild])

   return ( 
      <div style={{width: result}}> Generic Div </div> )
}

Answer 1

Решением моей проблемы было использование React.memo HOC и сравнение свойств друг с другом и его экспорт какReact.memo(Child, propsAreEqual).

Спектакль

Таким образом можно избежать использования других методов, таких как findElementbyId (ни в коем случае не рекомендуется) и shouldComponentUpdate для нацеливания на определенные элементы в функции карты. Производительность тоже неплохая. Используя этот метод, можно сократить время рендеринга с 40 мс каждые 250 мс до примерно 2 мс.

Реализация

В дочернем компоненте:

function Child(){...}
function propsAreEqual(prev, next) {
   //returning false will update component, note here that nextKey.number never changes.
   //It is only constantly passed by props
    return !next.toChild.includes(next.number)

}
export default React.memo(Child, propsAreEqual);

или, альтернативно, если нужно проверить и другие утверждения:

function Child(){...}
function propsAreEqual(prev, next) {

   if (next.toChild.includes(next.number)) { return false }
   else if ( next.anotherProperty === next.someStaticProperty ) { return false }
   else { return true }
  }

export default React.memo(Key, propsAreEqual);