React Flashcards
Что такое React и его особенности?
React - библиотека js, используется для создания UI с виртуальным DOM, подходит для создания SPA.
Особенности React:
1) работает с виртуальным DOM
2) компонентная структура
3) использование JSX (js + XML)
4) необходим компилятор Babel:
Виртуальный DOM
Виртуальный DOM - легковесная копия обычного DOM с которой работает React, изменения сначала вносятся в него, а затем React находит минимальное количество манипуляций, которые необходимы для обновления реального DOM и производит их:
- высокая производительность
- будут обновляться только конкретные html-узлы, а не весь DOM
Пример использования React
//1. html-элемент, в который будет рендериться виртуальный DOM
const rootNode = document.getElementById(“my_div”);
// 2. получаем корневой элемент
const root = ReactDOM.createRoot(rootNode);
//3. рендеринг в корневой элемент
root.render(<h1>Hello React</h1>);
//получим:
<div>
<h1>Hello React</h1>
</div>
JSX
JSX - необязательный способ описания визуального кода посредством комбинации кода js + XML, для компиляции используется Babel:
- похоже на движок Razor (C# + html)
//пример:
root.render(<h2>2 + 2 = {2 + 2}</h2>);
Подгрузка скрипта JSX из файла
Babel подгружает скрипты из файлов .jsx через AJAX-запросы => поэтому приложение React нужно поднять на сервере (например node.js), с которого можно будет запрашивать статические файлы.
//подключение скрипта .jsx
Валидация значений в формах
Валидация значений - производится с помощью дополнительных методов компонента.
Пример:
class AgeField extends React.Component {
constructor(props) {
super(props);
var isValid = this.validate(props.value);
this.state = {value: props.value, valid: isValid};
this.onChange = this.onChange.bind(this);
}
validate(val){
return val>=0;
}
onChange(e) {
var val = e.target.value;
var isValid = this.validate(val);
this.setState({value: val, valid: isValid});
}
render() {
var color = this.state.valid===true?”green”:”red”;
return <p>
<label>Возраст:</label><br></br>
<input type=”number” value={this.state.value} onChange={this.onChange} style={{borderColor:color}} />
</p>;
}
}
Компоненты React
Компоненты React - аналогичны функциям js, возвращают ReactElement, могут быть созданы как функции или классы.
- как функции:
function Hello() {
return <h1>Привет, Eugene</h1>;
}
- как классы (нужно наследовать React.Component):
class Hello extends React.Component {
render() {
return <h1>Привет, Eugene</h1>;
}
}
Использование компонентов:
root.render(<Hello></Hello>);
Props
Props - аргумент функции компонента, представляет собой коллекцию пар ключ-значение:
function Hello(props) {
return <div>
<p>Имя: {props.name}</p>
<p>Возраст: {props.age}</p>
</div>;
}
//использование:
root.render(<Hello></Hello>);
События компонентов
//В функциональных компонентах:
function ClickButton(props) {
function press(){
alert(“Hello React!”)
}
return <button onClick={press}>Click</button>;
}
//в компонентах-классах
class ClickButton extends React.Component {
press(){
alert(“Hello React from class-component!”);
}
render() {
return <button onClick={press}>Click</button>;
}
}
Webpack
Webpack - упаковщик модулей, позволяющий автоматизировать создание из нескольких файлов один.
React Маршрутизация с ReactRouterDOM.BrowserRouter
React имеет систему маршрутизации, сопоставляющую запросы с компонентами в порядке определения маршрутов (нужен веб-сервер).
ReactRouterDOM.BrowserRouter - позволяет задать сопоставление маршрутов в виде объектов Route.
Пример:
const Router = ReactRouterDOM.BrowserRouter;
const Route = ReactRouterDOM.Route;
const Routes = ReactRouterDOM.Routes;
//компоненты
function About(){
return <h2>О сайте</h2>;
}
function NotFound(){
return <h2>Ресурс не найден</h2>;
}
function Main(){
return <h2>Главная</h2>;
}
root.render(
<Router>
<div>
<Routes>
<Route path="/" element={<Main />} />
<Route path="/about" element={<About />} />
<Route path="*" element={<NotFound />} />
</Routes>
</div>
</Router> );
Дочерние маршруты
Дочерние маршруты - отсчитываются от родительского маршрута:
- определяются в родительском компоненте или вне с помощью Outlet.
function Products(){
return <div>
<h2>Товары</h2>
<Routes>
<Route path="/phones" element={<Phone />} />
<Route path="/tablets" element={<Tablet />} />
</Routes>
</div>;
}
Параметры маршрутов
Параметры маршрутов - могут быть получены в компоненте через хук useParams:
//компонент:
function Product(){
// получаем параметры
const params = useParams();
const prodId = params.id;
return <h2>Товар № {prodId}</h2>;
}
//маршрут
<Route path=”:id” element={<Product></Product>} />
Параметры строки запроса
Параметры строки запроса - могут быть получены в компоненте через хук useSearchParams:
//компонент
function Home(){
// получаем параметры маршрута
const params = useParams();
// получаем параметры строки запроса
const [searchParams, setSearchParams]
= useSearchParams();
return <div>
<h2>Главная</h2>
<p>Id: {params.id}</p>
<p>Name: {searchParams.get(“name”)}</p>
<p>Age: {searchParams.get(“age”)}</p>
</div>;
}
Переадресация с ReactRouterDOM.Navigate
<Router>
<div>
<nav>
<link></link>Home</Link> |
<link></link>Old</Link> |
<link></link>New</Link>
</nav>
<Routes>
<Route path="/" element={<Home></Home>} />
<Route path="/new" element={<New></New>} />
<Route path="/old" element={<Navigate></Navigate>} />
</Routes>
</div>
</Router>
Программная навигация
Программная навигация - через хук useNavigate:
//компонент:
function Old(){
const params = useParams();
const id = params.id;
const navigate = useNavigate();
return <div>
<h2>Old {id}</h2>
<button
onClick={async event => {
navigate(/new/${id});
}}
> Navigate</button>
</div>;
}
React Состояния компонентов
state - изменяемый объект, описывающий внутреннее состояние компонента, определяется внутри компонента и доступен только внутри компонента.
class Hello extends React.Component {
constructor(props) {
super(props);
this.state = {welcome: “Добро пожаловать на сайт!”};
}
render() {
return <h1>{this.state.welcome}</h1>;
}
}
Жизненный цикл компонента
Этапы жизненного цикла:
1) constructor(props): начальная инициализация компонента
2) static getDerivedStateFromProps(props, state): вызывается непосредственно перед рендерингом компонента. Этот метод должен возвращать объект для обновления объекта state или значениеnull, если нечего обновлять.
3) shouldComponentUpdate(nextProps, nextState): вызывается каждый раз при обновлении объекта props или state
4) render(): рендеринг компонента
5) getSnapshotBeforeUpdate(prevProps, prevState): вызывается непосредственно перед обновлением компонента, позволяет компоненту получить информацию из DOM перед возможным обновлением
6) componentDidUpdate(prevProps, prevState, snapshot): вызывается сразу после обновления компонента
7) componentDidMount(): вызывается после рендеринга компонента.
8) componentWillUnmount(): вызывается перед удалением компонента из DOM
React Хуки
Хуки - функции (позволяют определять и использовать состояние и другие возможности React без создания классов).
Встроенные хуки:
- useState: предназначен для управления состоянием компонентов
- useEffect: предназначен для перехвата различного рода изменений в компонентах, которые нельзя обработать внутри компонентов
- useContext: позволяет подписываться на контекст React
- useReducer: позволяет управлять локальным состоянием сложных компонентов
- useCallback: позволяет управлять функциями обратного вызова
- useMemo: предназначен для управления мемоизированными (грубо говоря кэшированными) значениями
- useRef: возвращать некоторое изменяемое значение, например, ссылку на html-элементы DOM, которыми затем можно управлять в коде JavaScript
- useImperativeHandle: настраивает объект, который передается родительскому компоненту при использовании ref
- useLayoutEffect: аналогичен хукуuseEffect(), но вызывается синхронно после всех изменений в структуре DOM
- useDebugValue: предназначен для отображения некоторого значения в целях отладки
- useId: предназначен для генерации уникального идентификатора
- useTransition: применяется для создания переходов при рендеринге
- useSyncExternalStore: предназначен для синхронизации данных с внешними хранилищами
- useInsertionEffect: предназначен для библиотек, которые используют CSS в JS, для оптимизации при внедрении стилей при рендеринге
Ограничения при использовании хуков
1) Хуки вызываются только на верхнем уровне компонента (не вызываются внутри вложенных блоков)
2) Хуки можно вызывать только из функциональных компонентов
