Какова цель getSnapshotBeforeUpdate()метода жизненного цикла? в REACT кратко

Привет, Вы узнаете о том , что такое Какова цель getSnapshotBeforeUpdate()метода жизненного цикла? в REACT, Разберем основные их виды и особенности использования. Еще будет много подробных примеров и описаний. Для того чтобы лучше понимать что такое Какова цель getSnapshotBeforeUpdate()метода жизненного цикла? в REACT , настоятельно рекомендую прочитать все из категории Выполнение скриптов на стороне клиента JavaScript, jqvery, JS фреймворки (Frontend).

Новый getSnapshotBeforeUpdate() метод жизненного цикла вызывается непосредственно перед обновлением DOM. Возвращаемое значение из этого метода будет передано в качестве третьего параметра

class MyComponent extends React.Component {
  getSnapshotBeforeUpdate(prevProps, prevState) {
    // ...
  }
}

Этот метод жизненного цикла, а также componentDidUpdate()

охватывает все

случаи использования componentWillUpdate().

getSnapshotBeforeUpdate(prevProps, prevState) {
// Are we adding new items to the list?
// Capture the scroll position so we can adjust scroll later.
if (prevProps.list.length < this.props.list.length) {
  const list = this.listRef.current;
  return list.scrollHeight - list.scrollTop;
}
return null;
}

componentDidUpdate(prevProps, prevState, snapshot) {
    // If we have a snapshot value, we've just added new items.
   // Adjust scroll so these new items don't push the old ones out of view.
   // (snapshot here is the value returned from getSnapshotBeforeUpdate)
   if (snapshot !== null) {
      const list = this.listRef.current;
       list.scrollTop = list.scrollHeight - snapshot;
    }
  }

В приведенном выше примере componentWillUpdate используется для чтения свойства DOM. Об этом говорит сайт https://intellect.icu . Однако при асинхронном рендеринге могут быть задержки между жизненными циклами фазы «рендеринга» (например, componentWillUpdate и render) и жизненными циклами фазы «фиксации» (например, componentDidUpdate). Если пользователь сделает что-то вроде изменения размера окна в это время, значение scrollHeight, считанное из componentWillUpdate, будет устаревшим.

Решение этой проблемы заключается в использовании нового жизненного цикла фазы «фиксации», getSnapshotBeforeUpdate. Этот метод вызывается непосредственно перед внесением изменений (например, перед обновлением DOM). Он может возвращать значение, которое React передает в качестве параметра в componentDidUpdate, который вызывается сразу после мутаций.

Другими словами: React 16.6 представил новую функцию под названием «Приостановка» . Эта функция включает асинхронный рендеринг — рендеринг поддерева компонентов реакции может быть отложен (например, для ожидания загрузки сетевого ресурса). Он также используется внутри React, чтобы отдавать предпочтение важным обновлениям DOM по сравнению с другими , чтобы повысить воспринимаемую производительность рендеринга. Это может, как и следовало ожидать, вызвать существенные задержки между рендерингом виртуального DOM на стороне реакции (который запускает componentWillUpdateи render(), но может содержать некоторое поддерево асинхронного компонента, которое нужно ожидать) и фактическим отражением в DOM (которое запускаетcomponentDidUpdate). В более старых версиях React до Suspense эти хуки жизненного цикла всегда вызывались с очень небольшой задержкой, потому что рендеринг был полностью синхронным, что оправдывало шаблон для сбора информации DOM componentWillUpdateи использования ее в componentDidUpdate, что больше не так.

Исследование, описанное в статье про Какова цель getSnapshotBeforeUpdate()метода жизненного цикла? в REACT, подчеркивает ее значимость в современном мире. Надеюсь, что теперь ты понял что такое Какова цель getSnapshotBeforeUpdate()метода жизненного цикла? в REACT и для чего все это нужно, а если не понял, или есть замечания, то не стесняйся, пиши или спрашивай в комментариях, с удовольствием отвечу. Для того чтобы глубже понять настоятельно рекомендую изучить всю информацию из категории Выполнение скриптов на стороне клиента JavaScript, jqvery, JS фреймворки (Frontend)