Чистые компоненты в React

Чистый компонент в React — это компонент, который всегда рендерит одно и то же при одних и тех же значениях пропсов. Это серьезно улучшает производительность. React будет использовать результат последнего рендера, избегая повторного рендеринга.

React.memo

React.memo — это компонент высшего порядка (higher-order component, HOC). Когда компонент отображает тот же вывод при одних и тех же пропсах, вы можете обернуть свой функциональный компонент этой функцией React.memo. За счет этого улучшится производительность и оптимизируется рендеринг. React.memo работает только при изменении пропсов компонента. Это означает, что если вы используете состояние, используя хук useState, то для каждого изменения состояния он будет ререндерить компонент. С React.memo выполняется поверхностное сравнение пропсов.

Рассмотрим компонент CustomLabel и Counter, внутри которого используется CustomLabel.

// CustomLabel.jsx

import React from "react";

export const CustomLabel = ({ name }) => {
  return (
    <>
      {console.log("CustomLabel component render")}
      <label>
        <b>{name}</b>
      </label>
    </>
  );
};

// Counter.jsx

import React, { useState } from "react";
import CustomLabel from "./CustomLabel";

export const Counter = () => {
  const [counter, setCounter] = useState(0);

  return (
    <div>
      <CustomLabel name="Simple Counter app" />
      <p>Counter is: {counter}</p>
      <button onClick={() => setCounter(counter + 1)}>Click</button>
    </div>
  );
};

Компонент CustomLabel принимает name в качестве пропса и отображает его в теге label. В компонент CustomLabel мы добавили console.log(), чтобы мы могли видеть, сколько раз компонент ререндерится. Всякий раз, когда вы нажимаете кнопку, чтобы увеличить счетчик, он повторно рендерит компонент CustomLabel.

Теперь поработаем с React.memo. Обернем компонент CustomLabel в React.memo и снова будем нажимать счетчик. Увидим, что он отрендерил компонент CustomLabel только один раз, потому что проп name остается неизменным при каждом нажатии кнопки.

// CustomLabel.jsx

import React, {memo} from "react";

export const CustomLabel = memo(({ name }) => {
  return (
    <>
      {console.log("CustomLabel component render")}
      <label>
        <b>{name}</b>
      </label>
    </>
  );
});

Чистые компоненты названы так по аналогии с чистыми функциями.

Что такое чистые функции?

В Javascript функции, которые возвращают один и тот же вывод при одних и тех же входных данных, называются чистыми функциями. Таким образом, результат чистой функции зависит только от ее входных аргументов. Чистые функции также не вызывают никаких побочных эффектов. Рассмотрим чистую функцию add.

function Add(num1, num2){
  return num1 + num2;
}

Если мы вызовем вышеуказанную функцию add(2,2), она всегда будет возвращать 4. Если вызвать ее несколько раз с параметрами 2 и 2, она всегда будет возвращать 4. Благодаря тому что функция чистая можно оптимизировать и улучшить производительность приложения. Еще подробнее о чистых функциях можно прочитать в статье Чистые функции. Функциональное программирование.

React - одна из самых популярных библиотек для разработки пользовательского интерфейса. Одной из важных задач при работе с React является обработка событий. В этой статье мы рассмотрим, как обрабатывать события в компонентах-функциях. React предоставляет простой и эффективный способ обрабатывать события. Для этого нужно использовать атрибуты JSX, которые начинаются с префикса on. Например, чтобы обработать клик на кнопке, мы можем использовать атрибут onClick:

<button onClick={handleClick}>Нажми меня</button>

В этом примере мы передаем функцию handleClick в атрибут onClick. Когда пользователь нажимает на кнопку, вызывается эта функция. Теперь давайте рассмотрим, как определить функцию handleClick:

function handleClick() {
  console.log('Кнопка была нажата');
}

Функция handleClick может выполнять любую задачу, которую вы хотите выполнить при клике на кнопку. В данном случае мы просто выводим сообщение в консоль.

Кроме того, React также предоставляет доступ к объекту события, который содержит информацию о событии. Например, мы можем получить значение введенное в поле ввода при событии onChange:

function handleChange(event) {
  console.log(event.target.value);
}

<input type="text" onChange={handleChange} />

В этом примере мы передаем функцию handleChange в атрибут onChange поля ввода. Когда пользователь изменяет значение в поле ввода, вызывается эта функция, и мы можем получить значение через event.target.value. Кроме обычных событий, таких как клик или изменение значения, React также предоставляет возможность обрабатывать события клавиатуры, фокуса и другие. Например, чтобы обработать нажатие клавиши, мы можем использовать атрибут onKeyDown:

function handleKeyDown(event) {
  if (event.key === 'Enter') {
    console.log('Нажата клавиша Enter');
  }
}

<input type="text" onKeyDown={handleKeyDown} />

В этом примере мы проверяем, является ли нажатая клавиша клавишей "Enter". Если это так, то выводим сообщение в консоль. Также можно обрабатывать события фокуса, например, когда элемент получает или теряет фокус:

function handleFocus() {
  console.log('Элемент получил фокус');
}

function handleBlur() {
  console.log('Элемент потерял фокус');
}

<input type="text" onFocus={handleFocus} onBlur={handleBlur} />

В этом примере мы передаем функции handleFocus и handleBlur в атрибуты onFocus и onBlur соответственно. Когда элемент получает или теряет фокус, вызываются соответствующие функции. Обработка событий в компонентах-функциях в React довольно проста и интуитивно понятна. Мы использовали атрибуты JSX, начинающиеся с префикса on, чтобы указать, какие функции должны быть вызваны при возникновении событий. Также мы рассмотрели примеры обработки различных типов событий, таких как клик, изменение значения, нажатие клавиши и фокус. Надеюсь, эта статья была полезной для новичков, которые только начинают изучать React. Удачи в вашей разработке!