Чистые компоненты в React
2 года назад·2 мин. на чтение
В этой статье рассмотрим чистые компоненты в функциональных компонентах ReactJS.
Чистый компонент в 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
месяц назад·2 мин. на чтение
В этой статье мы научимся обрабатывать различные события, такие как клики и изменения значений, в React компонентах.
React - одна из самых популярных библиотек для разработки пользовательского интерфейса. Одной из важных задач при работе с React является обработка событий. В этой статье мы рассмотрим, как обрабатывать события в компонентах-функциях.
React предоставляет простой и эффективный способ обрабатывать события. Для этого нужно использовать атрибуты JSX, которые начинаются с префикса
Кроме того, React также предоставляет доступ к объекту события, который содержит информацию о событии. Например, мы можем получить значение введенное в поле ввода при событии
on
. Например, чтобы обработать клик на кнопке, мы можем использовать атрибут onClick
:
В этом примере мы передаем функцию<button onClick={handleClick}>Нажми меня</button>
handleClick
в атрибут onClick
. Когда пользователь нажимает на кнопку, вызывается эта функция.
Теперь давайте рассмотрим, как определить функцию handleClick
:
Функцияfunction handleClick() { console.log('Кнопка была нажата'); }
handleClick
может выполнять любую задачу, которую вы хотите выполнить при клике на кнопку. В данном случае мы просто выводим сообщение в консоль.
onChange
:
В этом примере мы передаем функциюfunction handleChange(event) { console.log(event.target.value); } <input type="text" onChange={handleChange} />
handleChange
в атрибут onChange
поля ввода. Когда пользователь изменяет значение в поле ввода, вызывается эта функция, и мы можем получить значение через event.target.value
.
Кроме обычных событий, таких как клик или изменение значения, React также предоставляет возможность обрабатывать события клавиатуры, фокуса и другие.
Например, чтобы обработать нажатие клавиши, мы можем использовать атрибут onKeyDown
:
В этом примере мы проверяем, является ли нажатая клавиша клавишей "Enter". Если это так, то выводим сообщение в консоль. Также можно обрабатывать события фокуса, например, когда элемент получает или теряет фокус:function handleKeyDown(event) { if (event.key === 'Enter') { console.log('Нажата клавиша Enter'); } } <input type="text" onKeyDown={handleKeyDown} />
В этом примере мы передаем функцииfunction handleFocus() { console.log('Элемент получил фокус'); } function handleBlur() { console.log('Элемент потерял фокус'); } <input type="text" onFocus={handleFocus} onBlur={handleBlur} />
handleFocus
и handleBlur
в атрибуты onFocus
и onBlur
соответственно. Когда элемент получает или теряет фокус, вызываются соответствующие функции.
Обработка событий в компонентах-функциях в React довольно проста и интуитивно понятна. Мы использовали атрибуты JSX, начинающиеся с префикса on
, чтобы указать, какие функции должны быть вызваны при возникновении событий. Также мы рассмотрели примеры обработки различных типов событий, таких как клик, изменение значения, нажатие клавиши и фокус.
Надеюсь, эта статья была полезной для новичков, которые только начинают изучать React. Удачи в вашей разработке!