Переменные (Состояния и пропсы)

Переменные (состояния)

В React переменные называются состояния (англ. state).

Состояния создаются через хук useState().

import { useState } from 'react';

export default function App() {
  // создание состояний name, age и size
  const [name, setName] = useState("React"); // "React" значение по умолчанию
  const [age, setAge] = useState("20");
  const [size, setSize] = useState("10");

  return (
    <>
      <p>Приложение: {name}</p>
    </>
  );
}

Пример кода на Playcode

При изменении значения состояния, они автоматически изменятся в самом DOM.

В результате будет сгенерирован HTML:

<p>Приложение: React</p>

Состояния доступны в пределах текущего компонента.

Следует отметить, что useState() (как и любой хук) можно вызывать только внутри компонента или внутри кастомного хука. Например, код ниже будет некорректен:

export default function App() {
  // верно, хук вызывается внутри компонента
  const [name, setName] = useState("React");

  // неверно, хук не должен вызываться внутри методов (функций)
  const handleClick = e => {
    const [name, setName] = useState("React");
  }

  // неверно, хук нельзя создавать внутри условий
  if (isSuccess) {
    const [name, setName] = useState("React");
  }
}

Хук useState() появился в версии React 16.8.

React экранирует переменные (например, <h1> преобразуется в <h1>). Это сделано для предотвращения атак XSS.

Параметры (пропсы)

При создании React-приложения можно передавать параметры, например <App param="value">.

import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App title="React" />);

И код в компоненте:

// App.js
export default function App({title="Значение по умолчанию"}) {
  return (
      <p>Приложение: {title}</p>
  );
}

Пример кода на Playcode

Если надо передать параметр с другим типом данных (число, массив, булево значение), то делается это через фигурные скобки.

<App isActive={true} data={['js', 'react', 'redux']} />

// или через объект
let appProps = {
  isActive: true,
  data: ['js', 'react', 'redux']
}

<App {...appProps} />

Также есть альтернативный вариант через параметр props. в котором находятся все переданные атрибуты.

// App.js
export default function App(props) {
  return (
      <p>Приложение: {props.title}</p>
  );
}

Для каждого компонента можно передавать свой параметр:

<Item title="React" />
<Item title="JavaScript" />
<Item title="jQuery" />

// Приложение: React
// Приложение: JavaScript
// Приложение: jQuery

В пропсы также можно передавать HTML.

<Dialog title={<>Квартира 30м<sup>2</sup></>} />