В этой статье мы узнаем о лучших методах вызова компонента и причинах этого.
Начиная с ReactJS, мы изучаем различные подходы к определению и использованию компонентов в наших приложениях. Однако крайне важно понимать важность использования синтаксиса JSX для вызова компонентов при разработке ReactJS.
- В приведенном ниже коде мы определили и визуализировали компонент приложения, используя синтаксис JSX (способ, подобный HTML). Так что это работает нормально.
import { useState } from "react";
const EmailComponent = () => {
const [email, setEmail] = useState("");
return (
<input
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
);
};
export default function App() {
return (
<div className="App">
<h2>Invoking Component Function Directly</h2>
<EmailComponent/>
</div>
);
}
3. В приведенном ниже GIF-файле мы видим иерархию компонентов и соответствующие им состояния и хуки из инструмента ReactDev.
4 . Теперь давайте попробуем другой подход к рендерингу компонента, т. е. тип обычная функция, и изучим его поведение с помощью инструмента ReactDev.
5. Мы замечаем какое-то странное поведение, верно? Даже React не распознает его как компонент. По сути, мы объединили App и EmailComponent в один суперкомпонент и превратили поле ввода в настраиваемый хук.
6. EmailComponent по-прежнему работает, как и в случае компонента стиля JSX. Однако этот подход вызывает ненужную повторную визуализацию компонента App при каждом обновлении EmailComponent. Это нарушает принцип encapsulation of re-render (Первая причина 🟢).
7. В ReactJS encapsulation of re-render относится к поведению, при котором рендеринг компонентов оптимизирован для обновления только необходимых частей пользовательского интерфейса. Это означает, что при изменении состояния или свойств компонента React будет разумно определять, какие части пользовательского интерфейса необходимо обновить, и обновлять только эти конкретные части, а не повторно отображать весь компонент.
8. Хорошо, давайте создадим сценарий условного рендеринга EmailComponent. Здесь мы добавили один флажок. При установке этого флажка мы показываем и скрываем поле ввода.
9. Итак, когда App загружается изначально, есть один хук. Однако, когда пользователь устанавливает флажок, App имеет два хука в условии во время рендеринга, что выдает ошибку Визуализировано больше хуков, чем во время предыдущего рендеринга (2-я причина 🟢).
10. Таким образом, когда EmailComponent вызывается как обычная функция, React не распознает ее как экземпляр компонента и не может должным образом управлять ее жизненным циклом или состоянием. Это приводит к неожиданному поведению и проблемам при работе с их состояниями, перехватчиками и методами жизненного цикла.
11. Мы можем решить эту проблему, используя синтаксис JSX <EmailComponent /> ✌🏽.
Зеленая точка указывает на причину, по которой мы должны предпочесть синтаксис JSX компонента. И Вы можете попробовать исправленный код в этой песочнице.
