Понятие стейта и пропсов

#description

Стейт (state) и пропсы (props) - это две базовые концепции в React, которые помогают выстраивать интерфейсы пользовательских приложений.

Пропсы (props) - это объект, который передается из родительского компонента в дочерний компонент. Он содержит данные (например, текст, изображение, массив) и настройки (например, стиль, класс). Пропсы - это данные, которые получает компонент для отображения и передачи в другие компоненты. Они неизменяемы, то есть не могут быть изменены внутри компонента.

                    
import React from 'react';

function User(props) {
  return (
    <div>
      <h3>{props.name}</h3>
      <p>Age: {props.age}</p>
      <p>Email: {props.email}</p>
    </div>
  );
}

function App() {
  return (
    <div>
      <User name="John" age={30} email="john@example.com" />
      <User name="Jane" age={25} email="jane@example.com" />
    </div>
  );
}

export default App;

В этом примере компонент User принимает пропсы name, age и email. Они передаются в компоненты из компонента App.

Стейт (state) - это объект, который содержит данные, отображаемые на странице. Стейт может изменяться и обновляться внутри самого компонента. Он используется для перерисовки страницы при изменениях.

                    
import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  
  function handleIncrement() {
    setCount(count + 1);
  }
  
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleIncrement}>Increment</button>
    </div>
  );
}

export default Counter;

В этом примере компонент Counter использует state, чтобы хранить значение count. setCount - это функция обновления состояния. Кнопка вызывает handleIncrement, который увеличивает значение count на 1.

Понимание стейта и пропсов является ключевым для разработки компонентов React и создания динамических пользовательских интерфейсов.

March 25, 2023

Если вам не совсем понятен какой-то абзац текста из лекции, просто нажмите на него и сможете задать уточняющие вопросы по нему.

Если же непонятен весь вопрос, то нажмите на кнопки внизу, чтобы получить новый вариант объяснения, практические примеры или критически оценить сам вопрос.

Developer learning path

Понятие стейта и пропсов в React

Понятие стейта и пропсов