Несколько вопросов и ответов по концепции REACT для моих собственных ссылок

Рендеринг и повторный рендеринг

  • Как реагировать на обновление реального DOM?

React использует библиотеку DOM реакции для обновления фактической модели DOM. Он использует DOM API браузера, например getElementById и т. д., для фактического обновления.

  • В чем польза библиотеки React-DOM?

Библиотека react-dom является особой частью более крупной экосистемы React и играет решающую роль в рендеринге компонентов React в фактическую DOM (объектную модель документа) веб-страницы.

React просто создает виртуальный DOM в памяти, который не является частью DOM браузера.

Библиотека react-dom устраняет разрыв между виртуальным DOM и реальным DOM.

  • Как библиотека react-dom обновляет настоящий DOM?

React-Dom предоставляет такой метод, как ReactDOM.render(), который принимает компонент реакции и элемент html, где компонент должен отображаться.

  • Что происходит, когда вы вызываете setState для обновления состояния?

React планирует повторную визуализацию компонента с новым обновленным состоянием. Он не сразу обновляет состояние и не запускает обновление DOM; вместо этого он ставит обновление в очередь для последующего применения.

  • Что вызывает повторный рендеринг и что происходит во время повторного рендеринга?

Изменение реквизита или состояние повторного рендеринга тирггеров. Но это делается не сразу, каждое обновление пакетно и обрабатывается только один раз.

  • Когда происходит повторный рендеринг?

React перерисовывает компонент, когда завершает обработку текущего цикла событий и до входа в фазу рисования браузера. На данный момент реагировать выполняет операции. как этап рендеринга, так и этап фиксации.

Сохранение и очистка состояний

  • Где хранятся состояния в React?

Вопреки тому, как это выглядит, реакция не хранит значение состояния в компоненте, а поддерживается в дереве реакции, которое является представлением DOM.

  • Пример сохранения состояния реакции, даже если это не предполагается
export default function App() {
  const [isFancy, setIsFancy] = useState(false);
  return (
    <div>
      {isFancy ? (
        <Counter isFancy={true} /> 
      ) : (
        <Counter isFancy={false} /> 
      )}
      <label>
....
}

В приведенном выше коде счетчик всегда рассматривается как один и тот же компонент в реакции, и его состояние всегда сохраняется независимо от обновления в состоянии isFancy в родительском элементе. Это потому, что положение <Counter/> никогда не меняется.

  • Как это можно исправить?

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

{isFancy && 
        <Counter isFancy={true} /> }
{!isFancy && 
        <Counter isFancy={false} /> }
  • Что происходит, когда два разных компонента находятся в одном месте? (условная визуализация)

Согласно предыдущему объяснению, когда вы переключаетесь между двумя разными компонентами в одной и той же позиции, состояние теряется.

<div>
      {isFancy ? (
        <p>This is fancy</p> 
      ) : (
        <Counter isFancy={false} /> 
      )}
 </div>

Как правило, если вы хотите сохранить состояние между повторными рендерингами, структура вашего дерева должна «соответствовать» от одного рендеринга к другому. Если структура отличается, состояние уничтожается, потому что React уничтожает состояние, когда удаляет компонент из дерева.