React (p.2)

Алина Орлова

Как работает React?

Реакту сообщается о том, что необходимо обновить данные на странице (setState)
Вызываются необходимые lifecycle-методы
Вызывается метод render
Render возвращает новый VDOM
Новое состояние VDOM сравнивается с предыдущим
Вычисляются необходимые изменения (diffing algorithm)
Эти изменения переносятся в реальный DOM

VDOM vs DOM

DOM (Document Object Model):
- способ представления структурного документа с помощью объектов
- соглашение для представления и взаимодействия с данными в HTML, XML и т.д.
- можем взаимодействовать с узлами документа, используя JS (createElement, appendChild и т.д.)
- медленно

VDOM:
- легковесная копия DOM

- обычный JS-объект
- быстрый, производительный

Как работает React?

Жизненный цикл классовых компонентов

https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

https://codesandbox.io/s/react-example-piiz7?file=/index.js

Методы жизненного цикла

Mounting - монтирование компонента (первый рендер)

- constructor() - метод-конструктор
- render() - генерация Virtual DOM
- componentDidMount() - после монтирования компонента в реальный DOM

Updating - обновление

- shouldComponentUpdate() - проверяет необходимость рендера
- render()
- componentDidUpdate() - после ререндера компонента

Методы жизненного цикла

Unmounting - размонтирование компонента (происходит, когда DOM-узел, созданный компонентом, удаляется)

- componentWillUnmount() - перед удалением компонента из реального DOM

Производительность

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

shouldComponentUpdate()

shouldComponentUpdate()

shouldComponentUpdate(nextProps, nextState) {
  if (this.props.color !== nextProps.color) {
    return true;
  }
  if (this.state.count !== nextState.count) {
    return true;
  }
  return false;
}

- по умолчанию всегда возвращается true
- пример, если меняются только цвет и счетчик:

React.PureComponent

class Counter extends React.PureComponent {
  ...
}

- shouldComponentUpdate определен за вас
- компонент будет обновляться только, если изменились props или state

https://codesandbox.io/s/naughty-agnesi-ofp6b?file=/src/App.js

Пример

Hooks

добавляют состояние и жизненный цикл в функциональные компоненты

useState вместо state
useEffect вместо componentDidMount, componentDidUpdate, componentWillUnmount

https://codesandbox.io/s/xenodochial-cartwright-tbnu9?file=/src/App.js

Пример

Стили

Inline Styles

import "./buttonStyles.css";

<button className="btn">Submit</button>

<button
  style={{ backgroundColor: '#4287f5', width: 120, height: '10%' }}
>
  Submit
</button>

Стили

CSS Modules - преобразует названия классов из CSS в поля объекта

import styles from "./buttonStyles.module.css";
import classnames from "classnames";

<button className={styles.btn}>Submit</button>

<button
  className={classnames([
    styles.btn,
    { [styles.disabled]: !!disabled }]
  )}
>
  Submit
</button>

Стили

import styled from "styled-components";

const Button = styled.button`
  background-color: #4287f5;
  width: 120px;
  opacity: ${props => props.disabled ? 0.5 : 1};
`;

<Button disabled={!!disabled}>Submit</Button>

CSS-in-JS

StyledComponents (💅🏻 ноготочки)

React Router

React позволяет создавать single-page приложения

ReactDOM.render((
  <Home />
), document.getElementById('root'));

При посещении домашней страницы в 'root' будет рендерится компонент Home.

React Router

ReactDOM.render((
  <Router>
    <Route path="/" component={Home} />
    <Route path="/users" component={Users} />
    <Route path="/widgets" component={Widgets} />
  </Router>
), document.getElementById('root'));

Много роутов

React Router

Exact

<Route path='/user' />

to=”/user”

to=”/user/something”

to=”/user/:id”

<Route exact path='/user' />

to=”/user”

React Router

<Link> вместо <a>

import { Link } from ‘react-router-dom’;

<ul>
  <li><Link to="/">Home</Link></li>
  <li><Link to="/users">Users</Link></li>
  <li><Link to="/widgets">Widgets</Link></li>
</ul>

React Router

<Route
  exact path="/home"
  component={() => <Home searchValue={searchValue} />}
/>

<Route
  exact path="/home"
  render={() => <Home searchValue={searchValue} />}
/>

👍

👎

❌

<Route exact path="/:id" component={PostPage}/>
  
const Issue = props => (
    <Link to={`/${item.id}`}>Post</Link>
);

const PostPage = ({ match }) => (
    // доступен match.params.id
);

Ship (koa-react-starter)

https://github.com/paralect/koa-react-starter