React-компоненты

В React компоненты (React components) — это независимые, переиспользуемые строительные блоки внутри React-приложения, которые определяют, что отображается в пользовательском интерфейсе (UI, user interface). Они принимают входные данные, называемые props (свойства), и возвращают React-элементы, описывающие UI.

В этой статье мы рассмотрим основы React-компонентов, props, state (состояния) и процесса рендеринга (rendering).

Что такое React-компоненты?

Компонент — это строительный блок, инкапсулирующий часть пользовательского интерфейса. Он определяет структуру и поведение UI, управляя собственным состоянием или принимая данные через props и отображая соответствующий контент. Компоненты переиспользуемы и могут объединяться для создания сложных UI модульным способом.

• Компоненты можно использовать повторно в разных частях приложения для обеспечения единообразия и снижения дублирования кода.
• Компоненты управляют тем, как их вывод отображается в DOM, основываясь на своем состоянии и props.
• React загружает только необходимые компоненты, что обеспечивает оптимизированную производительность.
• Обновляется только конкретный компонент, а не вся страница целиком.

Виды React-компонентов

Существует два основных типа React-компонентов:

1. Функциональные компоненты

Функциональные компоненты проще и предпочтительны для большинства задач. Это JavaScript-функции, которые возвращают React-элементы. С появлением React Hooks функциональные компоненты могут также управлять состоянием и жизненным циклом.

• Без состояния или со состоянием: могут управлять состоянием с помощью React Hooks.
• Простой синтаксис: идеально подходят для маленьких и переиспользуемых компонентов.
• Производительность: обычно работают быстрее, так как не требуют использования ключевого слова this.

function Greet(props) {
    // Возвращаем заголовок с приветствием и именем из props
    return <h1>Hello, {props.name}!</h1>;
}

2. Классовые компоненты

Классовые компоненты — это ES6-классы, которые наследуют React.Component. Они обладают дополнительными возможностями, такими как управление состоянием и методы жизненного цикла.

• Управление состоянием: состояние хранится в свойстве this.state.
• Методы жизненного цикла: включают методы вроде componentDidMount, componentDidUpdate и другие.

class Greet extends React.Component {
    render() {
        // Возвращаем заголовок с приветствием и именем из props
        return <h1>Hello, {this.props.name}!</h1>;
    }
}

Props в React-компонентах

Props (сокращение от properties — свойства) — это входные, только для чтения данные, передаваемые от родительского компонента к дочернему. Они обеспечивают динамическую передачу данных и позволяют переиспользовать компоненты.

• Props неизменны (immutable).
• Они позволяют компонентам взаимодействовать друг с другом.

function Greet(props) {
    // Отображаем приветствие с именем пользователя из props
    return <h2>Welcome, {props.username}!</h2>;
}

// Использование
<Greet username="Ани́л" />

Состояние (State) в React-компонентах

State — это JavaScript-объект, управляющийся внутри компонента, который позволяет хранить и изменять данные во времени. В отличие от props, состояние изменяемо (mutable) и полностью контролируется компонентом.

• Обновление состояния вызывает повторный рендер компонента.
• Функциональные компоненты используют хук useState для управления состоянием.

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

    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={() => setCount(count + 1)}>Increment</button>
        </div>
    );
}

Рендеринг компонента

Рендеринг — это процесс отображения компонента в браузере. React-компоненты можно отрисовывать с помощью метода ReactDOM.render() или включать их в другие компоненты.

• Перед рендерингом компонент должен быть импортирован.
• Метод ReactDOM.render обычно используется в корневом файле приложения.

ReactDOM.render(<Greeting name="Пуджа" />, document.getElementById('root'));

Компоненты внутри компонентов

В React можно вкладывать компоненты друг в друга, создавая модульную и иерархическую структуру.

• Компоненты можно использовать многократно внутри одного или разных компонентов.
• Для вложенных компонентов можно передавать props для динамического контента.

function Header() {
    return <h1>Welcome to My Site</h1>;
}

function Footer() {
    return <p>© 2024 My Company</p>;
}

function App() {
    return (
        <div>
            <Header />
            <p>This is the main content.</p>
            <Footer />
        </div>
    );
}

export default App;

Рекомендации по работе с React-компонентами

• Делайте компоненты небольшими: каждый компонент должен выполнять одну задачу хорошо.
• Используйте функциональные компоненты: если не нужны методы жизненного цикла или обработка ошибок с помощью error boundaries.
• Валидация props: применяйте PropTypes для проверки корректности типов props.
• Управление состоянием: поднимайте состояние (lifting state up) к ближайшему общему предку, если доступ к состоянию нужен нескольким компонентам.

Для получения дополнительной информации о компонентах смотрите – Component Set 2