foundation

Components

Моделируйте UI как почти чистые функции компонентов с явными входами, локальным state и границами композиции.

Компонент React — функция (или класс), которая по props и state описывает UI. Компонент должен быть достаточно мал, чтобы его можно было понять целиком, с чёткой границей между отображением и координацией. Они собираются в деревья, а не в глубокие иерархии наследования.

Хорошие компоненты принимают явные входы, не полагаются на скрытые глобальные переменные и не выполняют побочные эффекты в render. Именование и совместное размещение файлов помогают ориентироваться в больших кодовых базах. На интервью часто спрашивают, как разбить экран на переиспользуемые части и где хранить state.

					function Greeting({ name, onDismiss }) {
  return (
  <section>
    <h1>Привет, {name}</h1>
    <button type="button" onClick={onDismiss}>Закрыть</button>
  </section>
  );
}

На интервью объясняйте концепцию на конкретном примере и называйте поведение, которое проверяют.

Типовые ошибки: скрывать поток данных, дробить компоненты чрезмерно и выполнять побочные эффекты в render.

Компромисс часто между ясностью и переиспользованием или между явными props и удобством.

Чеклист:

Одна понятная ответственность на компонент.
Props описывают публичный контракт.
Render остаётся чистым и предсказуемым.