Реагировать Является ли библиотека JavaScript для постройки пользовательских интерфейсов. В этом руководстве целей реагируют V15 на V16.
Компоненты
import React from 'react' import ReactDOM from 'react-dom'
class Hello extends React.Component { render () { returnHello {this.props.name}} }
const el = document.body ReactDOM.render(, el)
Используйте Ract.js jsfiddle начать взлом. (или неофициальный jsbin Несомненно
Импортировать несколько экспорт
import React, {Component} from 'react' import ReactDOM from 'react-dom'
class Hello extends Component { ... }
Характеристики
render () { this.props.fullscreen const { fullscreen, autoplay } = this.props ··· }
Использовать Это .proops
Для доступа к свойствам передается компонент.
Смотрите: Характеристики
состояния
constructor(props) { super(props) this.state = { username: undefined } }
this.setState({ username: 'rstacruz' })
render () { this.state.username const { username } = this.state ··· }
Использовать состояния ( it.state
) для управления динамическими данными.
С Бабел Вы можете использовать Предложение-класс-поля и избавиться от конструктора
class Hello extends Component { state = { username: undefined }; ... }
Смотрите: состояния
Получить книгу: Производительность оптимизирована ACC
Гнездо
class Info extends Component { render () { const { avatar, username } = this.props return} }
Поскольку Rect V16.2.0, фрагменты могут быть использованы для возврата нескольких детей без добавления дополнительных оберточных узлов в DOM.
import React, { Component, Fragment } from 'react' class Info extends Component { render () { const { avatar, username } = this.props return () } }
Гнездо компоненты для отдельных проблем.
Смотрите: Сочинение компонентов
Дети
You have pending notifications
class AlertBox extends Component { render () { return{this.props.children}} }
Дети прошли как дети
имущество.
По умолчанию
Настройка реквизита по умолчанию
Hello.defaultProps = { color: 'blue' }
Смотрите: defaultproops.
Настройка состояния по умолчанию
class Hello extends Component { constructor (props) { super(props) this.state = { visible: true } } }
Установите состояние по умолчанию в Конструктор ()
Отказ
И без конструктора, используя Бабел с Предложение-класс-поля Отказ
class Hello extends Component { state = { visible: true } }
Смотрите: Установка состояния по умолчанию
Другие компоненты
Функциональные компоненты
function MyComponent ({ name }) { returnHello {name}}
Функциональные компоненты не имеют государства. Кроме того, их реквизит
передаются как первый параметр на функцию.
Смотрите: Функциональные и классовые компоненты
Чистые компоненты
import React, {PureComponent} from 'react' class MessageBox extends PureComponent { ··· }
Оптимизированная производительностью версия Реагировать. Компонент
Отказ Не Rerender, если реквизит/состояние не изменилось.
Смотрите: Чистые компоненты
Компонент API
this.forceUpdate()
this.setState({ ... }) this.setState(state => { ... })
this.state this.props
Эти методы и свойства доступны для Компонент
экземпляры.
Смотрите: Компонент API
Жизненный цикл
Монтаж
Конструктор (реквизит) | Перед рендерингом # |
ComponentWillMount () | Не используйте это # |
оказывать() | Оказывать # |
componentdidmount () | После рендеринга (Дом доступны) # # |
— | — |
ComponentWillunmount () | До удаления DOM # |
— | — |
ComponentDidcatch () | Уловить ошибки (16+) # |
Установите начальное состояние на Конструктор ()
Отказ Добавить обработчики событий DOM, таймеры (и т. Д.) ComponentDidMount ()
Затем удалите их на ComponentWillunmount ()
Отказ
Обновление
ComponentDidupdate (Prevprops, Prevstate, Snapshot) | Используйте SetState () здесь, но не забудьте сравнить реквизиты |
ToComponentupdate (NewProps, NewState) | Пропускает визуализацию (), если возвращает false |
оказывать() | Оказывать |
ComponentDidupdate (Prevprops, Prevstate) | Работать на доме здесь |
Называется, когда родители меняют свойства и .SetState ()
. Они не вызываются для начальных он.
Смотрите: Спецификация компонентов
Крючки (новые)
Государственный крючок
import React, { useState } from 'react'; function Example() { // Declare a new state variable, which we'll call "count" const [count, setCount] = useState(0); return (); }You clicked {count} times
Крючки – это новое дополнение в реакции 16.8.
Смотрите: Крючки на первый взгляд
Объявление нескольких переменных состояний
function ExampleWithManyStates() { // Declare multiple state variables! const [age, setAge] = useState(42); const [fruit, setFruit] = useState('banana'); const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]); // ... }
Эффект крюка
import React, { useState, useEffect } from 'react'; function Example() { const [count, setCount] = useState(0); // Similar to componentDidMount and componentDidUpdate: useEffect(() => { // Update the document title using the browser API document.title = `You clicked ${count} times`; }, [count]); return (); }You clicked {count} times
Если вы знакомы с методами жизненного цикла RACT Class, вы можете подумать useffect.
Крюк как ComponentDidmount
, ComponentDidupdate
и ComponentWillunmount
в сочетании.
По умолчанию RECT управляет эффектами после каждого визуализации – включая первый визуализацию.
Создание ваших собственных крючков
Определить дружбу
import React, { useState, useEffect } from 'react'; function FriendStatus(props) { const [isOnline, setIsOnline] = useState(null); useEffect(() => { function handleStatusChange(status) { setIsOnline(status.isOnline); } ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange); return () => { ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange); }; }, [props.friend.id]); if (isOnline === null) { return 'Loading...'; } return isOnline ? 'Online' : 'Offline'; }
Эффекты могут также необязательно указать, как «убирать» после них, возвращая функцию.
Использовать дружбу
function FriendStatus(props) { const isOnline = useFriendStatus(props.friend.id); if (isOnline === null) { return 'Loading...'; } return isOnline ? 'Online' : 'Offline'; }
Смотрите: Создание ваших собственных крючков
Крючки API Ссылка
Также см.: Cloots FAQ
Основные крючки
Успешность (инициация) | |
UseFeffect (() => {…}) | |
USECOTTEXT (MYCONTEXT) | Значение, возвращенное из raction.createContext |
Полная информация: Основные крючки
Дополнительные крючки
Успенский (Редуктор, Италарг, init) | |
USECallback (() => {…}) | |
УСЭММО (() => {…}) | |
УСЭРЕФ (INTINATIONVALUE) | |
UseiMperaticHandle (Ref, () => {…}) | |
Uselayouteffect. | идентичный для использования exeffect, но он сжигает синхронно ведь DOM мутации |
Useebugvalue (значение) | Показать ярлык для пользовательских крючков в React Devtools |
Полная информация: Дополнительные крючки
Узлы DOM
использованная литература
class MyComponent extends Component { render () { returnthis.input = el} />} componentDidMount () { this.input.focus() } }
Позволяет доступ к узлам DOM.
Смотрите: Refs and Dom
Дом События
class MyComponent extends Component { render () { this.onChange(event)} /> } onChange (event) { this.setState({ value: event.target.value }) } }
Пропускать функции для атрибутов, таких как Onchange
Отказ
Смотрите: События
Другие преимущества
Передача опоры
class VideoPlayer extends Component { render () { return} }
Распространяется SRC = "... "
до подкомпонента.
Посмотреть Передача опоры
API верхнего уровня
React.createClass({ ... }) React.isValidElement(c)
ReactDOM.render(, domnode, [callback]) ReactDOM.unmountComponentAtNode(domnode)
ReactDOMServer.renderToString() ReactDOMServer.renderToStaticMarkup( )
Есть больше, но они наиболее распространены.
Смотрите: React API верхнего уровня
JSX шаблоны
Стиль сокращение
const style = { height: 10 } return
return
Смотрите: Встроенные стили
Внутренний HTML
function markdownify() { return "...
"; }
Смотрите: Опасно установить innerhtml.
Списки
class TodoList extends Component { render () { const { items } = this.props return
-
{items.map(item =>
Всегда поставляйте ключ
имущество.
Условные условные
{showMyComponent ? : }
Оценка короткого замыкания
{showPopup && } ...
Новые особенности
Возвращая нескольких элементов
Вы можете вернуть несколько элементов в качестве массивов или фрагментов.
Массива
render () { // Don't forget the keys! return [
Фрагменты
render () { // Fragments don't require keys! return () } First item Second item
Смотрите: Фрагменты и струны
Возвращая строки
render() { return 'Look ma, no spans!'; }
Вы можете вернуть только строку.
Смотрите: Фрагменты и струны
Ошибки
class MyComponent extends Component { ··· componentDidCatch (error, info) { this.setState({ error }) } }
Поймать ошибки через ComponentDidcatch
Отказ (Rect 16+)
Смотрите: Обработка ошибок в реакции 16
Порталы
render () { return React.createPortal( this.props.children, document.getElementById('menu') ) }
Это делает This.props.children
в любое место в доме.
Смотрите: Порталы
Гидратация
const el = document.getElementById('app') ReactDOM.hydrate(, el)
Использовать Reactom.hydrate
вместо использования Reactom.runder
Если вы рендерируете на выходе ReactomServer Отказ
Смотрите: Гидрат
Валидация свойства
Пропорция
import PropTypes from 'prop-types'
Смотрите: TypeChecking с проптипами
Любые | Что-нибудь |
Базовый
нить | |
количество | |
функция | Функция |
бол | Правда или ложь |
Порицать
Oneof (любой) | Типы Enum. |
oneoftype (тип массива) | Союз |
Множество
множество | |
Arrayof (…) |
Объект
объект | |
Объект (…) | Объект со значениями определенного типа |
случай(…) | Экземпляр класса |
форма(…) |
Элементы
элемент | Реактивный элемент |
узел | Дом узла |
Необходимый
(···).требуется для | Необходимый |
Основные типы
MyComponent.propTypes = { email: PropTypes.string, seats: PropTypes.number, callback: PropTypes.func, isClosed: PropTypes.bool, any: PropTypes.any }
Требуемые типы
MyCo.propTypes = { name: PropTypes.string.isRequired }
Элементы
MyCo.propTypes = { // React element element: PropTypes.element, // num, string, element, or an array of those node: PropTypes.node }
Перечислители (ONEOF)
MyCo.propTypes = { direction: PropTypes.oneOf([ 'left', 'right' ]) }
Массивы и объекты
MyCo.propTypes = { list: PropTypes.array, ages: PropTypes.arrayOf(PropTypes.number), user: PropTypes.object, user: PropTypes.objectOf(PropTypes.number), message: PropTypes.instanceOf(Message) }
MyCo.propTypes = { user: PropTypes.shape({ name: PropTypes.string, age: PropTypes.number }) }
Использовать .array [из]
, .Object [из]
, .instanceof
, .shape
Отказ
Пользовательская проверка
MyCo.propTypes = { customProp: (props, key, componentName) => { if (!/matchme/.test(props[key])) { return new Error('Validation failed!') } } }
Дополнительные ресурсы для изучения реагирования:
Complete React Native + Cooks Course [2020 Edition]
Современный React Bootcamp (крючки, контекст, Nextjs, маршрутизатор)
Справочный сайт: https://devhints.io/reage.
Оригинал: “https://dev.to/bricourse/the-most-powerful-react-js-cheat-sheet-4ipd”