День 9: Done React

Fyeamn tehcinuqe syas taht taecinhg a sbujcet makes you better at it, what is what I’m trying to do here. Вы можете поправить меня, если увидели ошибки в этом сообщении

Компоненты жизненного цикла

  • componentDidMount()

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

class Cupcake extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      flour: 200
    };
  }
  componentDidMount() {
    let newFlourMass = delayedApiCall(); // I should learn how to call an API lol
    this.setState({
      flour: newFlourMass
    });
  }
  render() {
    return (
      <div>
        <p>Flour amount: {this.state.flour}</p>
      </div>
    );
  }
}
Войти в полноэкранный режим Выйти из полноэкранного режима

Кроме того, именно здесь большинство людей размещают свои слушатели событий, так что записывайте, друзья 🗒️.

  • componentWillUnmount()

Допустим, у вас есть временный компонент (например, поздравление Duolingo).

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

Для этого можно использовать данную функцию:

class Cupcake extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      flour: 200
    };
  }
  componentWillUnmount() {
    document.removeEventListener("old-event", eventHandler);
  }
  render() {
    return (
      <div>
        <p>Flour amount: {this.state.flour}</p>
      </div>
    );
  }
}
Войти в полноэкранный режим Выйти из полноэкранного режима
  • shouldComponentUpdate()

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

И вашим пользователям, вероятно, не понравится такая «фича» 🥴.

Вместо этого, вы можете указать React, когда нужно повторно рендерить компонент:

class justTens extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }
  shouldComponentUpdate() {
    return this.state.count % 10 === 0
  }
  render() {
    return (
      <div>
        <p>Multiples of 10: {this.state.count}</p>
      </div>
    );
  }
}
Войти в полноэкранный режим Выходить из полноэкранного режима

Только когда shouldComponentUpdate() вернет true, компонент будет перерендерирован. Разве это не мило 🍬?

Инлайн CSS

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

Однако синтаксис немного отличается:

<p style={{backgroundColor: "purple", fontSize: 70}}>Life sucks.</p>
Войти в полноэкранный режим Выйти из полноэкранного режима

Заметили эти camelCasing? JSX не принимает здесь стандартный CSS, поэтому мы должны использовать литерал объекта (фигурные скобки), со значениями ключевых пар.

Также числа без единиц измерения по умолчанию имеют значение px. Вам нужно использовать строку, чтобы передать число с единицей измерения, например: "7em".

Возврат компонентов с условием

Да, оператор if может сделать это (и тернары тоже, для тех людей), но это решение просто элегантно:

<div>
  <p>Number of Children Captured: {childCount}</p>
  {childCount === 0 && <h3>Dang it.</h3>}
</div>
Войти в полноэкранный режим Выйти из полноэкранного режима

Если выражение возвращает true, то возвращается JSX.

Ранний рендер 🕊️

Если у вас есть соблазн, вы можете написать все свое приложение на React.

Проблема в том, что пользователю потребуется больше времени, чтобы увидеть, как загружается сайт. Другая проблема заключается в том, что JS не понятен гусеницам Google (мне тоже), поэтому вы лишаете себя SEO-возможностей.

Убейте двух зайцев одним выстрелом, отобразив часть из них на сервере (если вы используете Node).

ReactDOMServer.renderToString(<h1>Render pls.</h1>);
Вход в полноэкранный режим Выход из полноэкранного режима

После слов

Итак, это все о React в FreeCodeCamp 🎉. Следующим нашим приключением будет Redux, который является библиотекой управления состояниями (я понятия не имею, что это такое) 👀.

Всем счастливого обучения!

Следите за мной на Github!
А также в Twitter!

Оставьте комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *