Состояние (State)

Состояние – это данные, которые компонент хранит и управляет ими. Когда состояние компонента меняется, React перерисовывает компонент, чтобы отразить эти изменения в UI. Состояние позволяет компонентам быть динамическими и реагировать на действия пользователя.

**Использование состояния в функциональных компонентах с хуками:**

Для управления состоянием в функциональных компонентах используется хук `useState`.

javascript
import React, { useState } from ‘react’;

function Counter() {
const [count, setCount] = useState(0);

return (

);
}

export default Counter;

В этом примере `useState(0)` создает переменную состояния `count` и функцию `setCount` для ее обновления. Начальное значение `count` равно 0. Когда пользователь нажимает на кнопку, функция `setCount` вызывается с новым значением `count + 1`, и React перерисовывает компонент, чтобы отобразить новое значение `count`.

**Использование состояния в классовых компонентах:**

В классовых компонентах состояние хранится в свойстве `state` и обновляется с помощью метода `setState`.

javascript
import React from ‘react’;

class Counter extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}

handleClick() {
this.setState({ count: this.state.count + 1 });
}

render() {
return (

);
}
}

export default Counter;

В этом примере состояние `count` инициализируется в конструкторе. Метод `handleClick` вызывает `this.setState` для обновления состояния `count`. React перерисовывает компонент при каждом изменении состояния.

Пропсы (Props)

Пропсы – это способ передачи данных от родительского компонента к дочернему. Пропсы – это неизменяемые данные, то есть дочерний компонент не может изменять пропсы, которые ему передал родительский компонент.

javascript
function Greeting(props) {
return

Привет, {props.name}!

;
}

function App() {
return ;
}

export default App;

В этом примере компонент `Greeting` принимает пропс `name` и отображает его в приветствии. Компонент `App` передает пропс `name` со значением “Иван” компоненту `Greeting`.

Хуки (Hooks)

Хуки – это функции, которые позволяют использовать состояние и другие возможности React в функциональных компонентах. Хуки были добавлены в React 16.8 и значительно упростили разработку React-приложений.

Наиболее часто используемые хуки:

* **`useState`:** Управление состоянием компонента.
* **`useEffect`:** Выполнение побочных эффектов, таких как запросы к API или подписка на события.
* **`useContext`:** Доступ к контексту React.
* **`useReducer`:** Управление сложным состоянием с помощью редьюсера.
* **`useCallback`:** Мемоизация функций, чтобы предотвратить ненужные перерисовки компонентов.
* **`useMemo`:** Мемоизация значений, чтобы предотвратить ненужные вычисления.
* **`useRef`:** Доступ к DOM-элементам или сохранение значений между перерисовками.

**Пример использования `useEffect` для выполнения запроса к API:**

javascript
import React, { useState, useEffect } from ‘react’;

function DataFetcher() {
const [data, setData] = useState(null);

useEffect(() => {
async function fetchData() {
const response = await fetch(‘https://jsonplaceholder.typicode.com/todos/1’);
const json = await response.json();
setData(json);
}

fetchData();
}, []);

if (!data) {
return

Загрузка…

;
}

return (

);
}

export default DataFetcher;

В этом примере хук `useEffect` вызывается один раз при монтировании компонента (благодаря пустому массиву `[]` в качестве второго аргумента). Внутри `useEffect` выполняется запрос к API и полученные данные сохраняются в состоянии `data`. React перерисовывает компонент, когда данные загружены.

Жизненный цикл компонентов (Component Lifecycle)

Жизненный цикл компонентов – это последовательность этапов, которые проходит компонент от момента создания до момента удаления из DOM. В классовых компонентах существуют методы жизненного цикла, которые позволяют выполнять код на определенных этапах жизни компонента.

Основные методы жизненного цикла (в классовых компонентах):

* **`constructor`:** Вызывается при создании компонента. Здесь обычно инициализируется состояние и привязываются обработчики событий.
* **`render`:** Вызывается при каждой перерисовке компонента. Возвращает JSX, который описывает структуру UI.
* **`componentDidMount`:** Вызывается после того, как компонент был добавлен в DOM. Здесь обычно выполняются запросы к API или подписка на события.
* **`componentDidUpdate`:** Вызывается после того, как компонент был обновлен. Здесь можно выполнять код на основе изменений в состоянии или пропсах.
* **`componentWillUnmount`:** Вызывается перед тем, как компонент будет удален из DOM. Здесь необходимо отписываться от событий и освобождать ресурсы.

В функциональных компонентах хук `useEffect` заменяет большинство методов жизненного цикла. `useEffect` может выполнять код как при монтировании компонента, так и при его обновлении и удалении.

Условный рендеринг (Conditional Rendering)

Условный рендеринг позволяет отображать разные части UI в зависимости от определенных условий. В React существует несколько способов условного рендеринга:

* **`if/else`:** Самый простой способ условного рендеринга.
* **Тернарный оператор:** Более компактный способ условного рендеринга.
* **Оператор `&&`:** Отображает элемент только если условие истинно.

**Пример использования `if/else`:**

javascript
function Greeting(props) {
if (props.isLoggedIn) {
return

Добро пожаловать, {props.name}!

;
} else {
return

Пожалуйста, войдите в систему.

;
}
}

export default Greeting;

**Пример использования тернарного оператора:**

javascript
function Greeting(props) {
return props.isLoggedIn ? (

Добро пожаловать, {props.name}!

) : (

Пожалуйста, войдите в систему.

);
}

export default Greeting;

**Пример использования оператора `&&`:**

javascript
function Message(props) {
return (

);
}

export default Message;

Списки и ключи (Lists and Keys)

При рендеринге списков элементов в React необходимо указывать уникальный ключ (`key`) для каждого элемента списка. Ключи помогают React эффективно обновлять DOM при изменении списка.

javascript
function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>

);
return (

{listItems}

);
}

const numbers = [1, 2, 3, 4, 5];

function App() {
return ;
}

export default App;

В этом примере ключ устанавливается равным значению элемента списка. В реальных приложениях лучше использовать уникальные идентификаторы, например, ID из базы данных.

**Важно:** Ключи должны быть уникальными среди соседних элементов списка.

Обработка событий (Event Handling)

React предоставляет механизм для обработки событий DOM, таких как клики, нажатия клавиш и изменения в полях ввода. Обработчики событий передаются элементам как пропсы.

javascript
function MyButton() {
function handleClick(event) {
alert(‘Кнопка была нажата!’);
event.preventDefault(); // Предотвращает действие по умолчанию
}

return (
Нажми меня
);
}

export default MyButton;

В этом примере функция `handleClick` вызывается при нажатии на кнопку. Аргумент `event` содержит информацию о событии.

**Важно:** Обработчики событий в React пишутся в camelCase, например, `onClick` вместо `onclick`.

Формы (Forms)

React предоставляет два способа управления формами:

* **Неконтролируемые компоненты:** Значения полей формы хранятся в DOM и доступны через `refs`.
* **Контролируемые компоненты:** Значения полей формы хранятся в состоянии компонента и обновляются с помощью обработчиков событий.

Рекомендуется использовать контролируемые компоненты, так как они позволяют лучше контролировать состояние формы и упрощают валидацию данных.

**Пример контролируемого компонента:**

javascript
import React, { useState } from ‘react’;

function MyForm() {
const [name, setName] = useState(”);

function handleChange(event) {
setName(event.target.value);
}

function handleSubmit(event) {
alert(‘Имя: ‘ + name);
event.preventDefault();
}

return (

);
}

export default MyForm;

В этом примере значение поля ввода `name` хранится в состоянии компонента и обновляется при каждом изменении в поле ввода.

Маршрутизация (Routing)

Маршрутизация позволяет создавать многостраничные приложения с разными URL-адресами. Для маршрутизации в React часто используют библиотеку React Router.

**Установка React Router:**

bash
npm install react-router-dom

**Пример использования React Router:**

javascript
import React from ‘react’;
import { BrowserRouter as Router, Route, Link } from ‘react-router-dom’;

function Home() {
return

Главная страница

;
}

function About() {
return

О нас

;
}

function App() {
return (

);
}

export default App;

В этом примере React Router используется для определения двух маршрутов: `/` (главная страница) и `/about` (страница о нас). Компоненты `Home` и `About` отображаются в зависимости от текущего URL-адреса.

Управление состоянием (State Management)

Для управления состоянием в больших React-приложениях часто используют библиотеки, такие как Redux или Context API.

* **Redux:** Централизованное хранилище состояния, которое позволяет компонентам получать доступ к состоянию и обновлять его.
* **Context API:** Позволяет передавать данные между компонентами, не передавая их через каждый уровень компонентов.

Выбор библиотеки для управления состоянием зависит от сложности вашего приложения. Для небольших приложений Context API может быть достаточно, а для больших приложений Redux может быть более подходящим.

Тестирование (Testing)

Тестирование – важная часть разработки React-приложений. Существует несколько библиотек для тестирования React-компонентов:

* **Jest:** Фреймворк для тестирования, разработанный Facebook.
* **Enzyme:** Библиотека для тестирования React-компонентов, разработанная Airbnb.
* **React Testing Library:** Библиотека для тестирования React-компонентов, которая фокусируется на тестировании поведения пользователя.

**Пример тестирования React-компонента с использованием React Testing Library:**

javascript
import React from ‘react’;
import { render, screen } from ‘@testing-library/react’;
import MyComponent from ‘./MyComponent’;

test(‘renders hello world’, () => {
render();
const linkElement = screen.getByText(/hello world/i);
expect(linkElement).toBeInTheDocument();
});

Заключение

React – это мощная и гибкая JavaScript-библиотека для создания пользовательских интерфейсов. Благодаря компонентному подходу, виртуальному DOM и большому сообществу, React стал одним из самых популярных инструментов для веб-разработки. В этой статье мы рассмотрели основные концепции React и дали практические примеры кода. Надеемся, что эта статья поможет вам начать свой путь в мир React и создавать потрясающие веб-приложения.

Дополнительные ресурсы

* **Официальный сайт React:** [https://reactjs.org/](https://reactjs.org/)
* **Create React App:** [https://create-react-app.dev/](https://create-react-app.dev/)
* **React Router:** [https://reactrouter.com/](https://reactrouter.com/)
* **Redux:** [https://redux.js.org/](https://redux.js.org/)
* **React Testing Library:** [https://testing-library.com/](https://testing-library.com/)