Несколько вопросов и ответов по концепции 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 уничтожает состояние, когда удаляет компонент из дерева.