React (p.2)
Алина Орлова
Как работает React?
Как работает React?
Как работает 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?
Жизненный цикл классовых компонентов
Методы жизненного цикла
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
Пример
Hooks
- добавляют состояние и жизненный цикл в функциональные компоненты
- useState вместо state
- useEffect вместо componentDidMount, componentDidUpdate, componentWillUnmount
Пример
Стили
- Inline Styles
-
CSS
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
);1.
2.
Ship (koa-react-starter)
08 - React (p.2)
By Startup Summer
