Props & State

Table of Contents

Компоненты

Компоненты позволяют разбить интерфейс на независимые части, про которые легко думать в отдельности. Их можно складывать вместе и использовать несколько раз

Все в реакте это компонент. Существует 2 типа компонентов

  • функциональные
  • классовые

Проще всего объявить React-компонент как функцию:

function Hello(props) {
  return <h1>Hello, {props.name}</h1>;
}

Эта функция — компонент, потому что она получает данные в одном объекте («пропсы») в качестве параметра и возвращает React-элемент. Мы будем называть такие компоненты «функциональными», так как они буквально являются функциями.

Если вы используете классовые компоненты, то вы создаете дочерний класс от React-Component класса.

class Hello extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

Далее, мы определяем методы для компонента. В нашем примере, у нас только один — это метод render(). Внутри render() мы возвращаем описание того, что хотим, чтобы показал React на странице. В нашем примере выше мы просто хотим вывести <h1> тег с текстом Hello World!.

С точки зрения React, эти два компонента эквивалентны.

Props

Значимая часть при работе с React это его многократное использование, означающее возможность написать компонент один раз и затем использовать его в разных случаях, для примера — показывать разные сообщения. Чтобы достигнуть такого рода повторного использования, мы сейчас добавим props. Это то, как мы передадим props компоненту

ReactDOM.render(<Hello name="World!" />, document.getElementById("root"));

Мы можем получить доступ к этому prop внутри компонента Hello, ссылаясь props.name, как тут:

function Hello(props) {
  return <h1>Hello, {props.name}</h1>;
}

Причина по которой мы пишем в фигурных скобках заключается в том, что нам нужно сказать JSX, что мы хотим добавить JavaScript выражение. Это называется экранированием.

Практика 👩‍💻👨‍💻

Greeting component

Написать комопнетен Greeting, который получует следующие props

  • name
  • message

и выводит на екран значение пропсов.

AgeDetector component

Написать компонент AgeDetector который принимает age как пропс

и выводит следующее

  • если age < 18 too young.
  • если age <= 21 Welcome.
  • если age < 25 ok.
  • если age > 25 too old.

Главные правила при работе с React

  • Компонент никогда не должен что-то записывать в свои пропсы — вне зависимости от того, функциональный он или классовый
  • React-компоненты обязаны вести себя как чистые функции по отношению к своим пропсам.

State

Eсли нам нужен компонент способный менять свои же собственные данные? Тогда мы будем использовать state взамен!

Другой способ хранения данных в React это state компонента, то есть его внутренне состояние. И в отличие от props — который не может быть изменен напрямую компонентом — state это умеет.

Так что, если вы хотите изменить данные в вашем приложении — для примера основываясь на взаимодействиях пользователя — то это должно находиться в state компонента внутри приложения.

Инициализируем state

Чтобы инициализировать state, просто выставите this.state в constructor() методе класса. Наш state это по факту объект, который в нашем случае имеет только один ключ под названием count.

Перед тем, как выставлять state, нам нужно вызвать super() в конструкторе. Это потому, что this — неинициализирован перед вызовом super() .

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }
  render() {
    return <div>{this.state.count}</div>;
  }
}

Чтобы изменить state, просто вызовите this.setState(), передав новое состояние объекту как аргумент. Мы это сделаем внутри метода, который мы назовем increment.

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }
  increment = () => {
    this.setState((prevState) => ({
      count: prevState.count + 1,
    }));
  };
  render() {
    return (
      <div>
        {this.state.count}
        <button onClick={this.increment}>+</button>
      </div>
    );
  }
}

increment метод вызывает this.setState(), который изменяет значение this.state.count.

Практика 👩‍💻👨‍💻

1 Counter

  • добавить функцию decrement
  • добавить возможность указывать шаг.
  • добавить возможность указаывать нгачальное значение count

2 Композиция компонентов Разделить комопонент Counter на классовый и функциональный Классовый компонент должен инициализировать state и сожержать методы increment & decrement

Функциональный комопненты должны быть следующими

  • Count - принимает текущий count в пропсах
  • Button - Принимает обработчик события и назавние increment or decrement

ДЗ 🏡

Создать компонент Accordion

Accordion props:

  • children
  • expanded

Пример кода

<Accordion expanded={false}>
Hidden text
</Accordion>
<Accordion expanded={true}>
sample text
</Accordion>

expnded = false

expnded = true

Почитать

Edit this page on GitHub

Prev

JSX

Next

Life cycles