Самая мощная шпаргалка по React JS

Удивительные вещи, связанные с React Hooks 😍

16.02.2022

5 потрясающих проектов HTML и CSS для создания (с предварительным просмотром codepen)

18.02.2022

React — это библиотека JavaScript для создания пользовательских интерфейсов. Сегодня в статье рассмотрим руководство, предназначеное для React v15–v16.

Компоненты

import React from 'react'

import ReactDOM from 'react-dom'

class Hello extends React.Component {

render () {

return <div className='message-box'>

Hello {this.props.name}

</div>

}

const el = document.body

ReactDOM.render(<Hello name='John' />, el)

Используйте jsfiddle React.js , чтобы начать взлом. (или неофициальный jsbin )

Импорт нескольких экспортов

import React, {Component} from 'react'

import ReactDOM from 'react-dom'

class Hello extends Component {

...

}

Характеристики

render () {

this.props.fullscreen

const { fullscreen, autoplay } = this.props

···

}

Используйте this.propsдля доступа к свойствам, переданным компоненту.

См.: Свойства

Состояния

constructor(props) {

super(props)

this.state = { username: undefined }

}

this.setState({ username: 'rstacruz' })

render () {

this.state.username

const { username } = this.state

···

}

Используйте состояния ( this.state) для управления динамическими данными.

С Babel вы можете использовать поля класса предложений и избавиться от конструктора

class Hello extends Component {

state = { username: undefined };

...

}

См.: Штаты

Посмотреть книгу: Оптимизированные по производительности приложения React

Вложение

class Info extends Component {

render () {

const { avatar, username } = this.props

return <div>

</div>

}

Начиная с React v16.2.0, фрагменты можно использовать для возврата нескольких дочерних элементов без добавления дополнительных узлов-оболочек в DOM.

import React, {

Component,

Fragment

} from 'react'

class Info extends Component {

render () {

const { avatar, username } = this.props

return (

</Fragment>

)

}

Компоненты гнезда для разделения задач.

См.: Составление компонентов

Children

<h1>You have pending notifications</h1>

</AlertBox>

class AlertBox extends Component {

render () {

return <div className='alert-box'>

{this.props.children}

</div>

}

Children передаются как childrenсобственность.

Установка реквизита по умолчанию

Hello.defaultProps = {

color: 'blue'

}

См.: defaultProps

Настройка состояния по умолчанию

class Hello extends Component {

constructor (props) {

super(props)

this.state = { visible: true }

}

Установите состояние по умолчанию в файле constructor().

И без конструктора, использующего Babel с полем класса предложения .

class Hello extends Component {

state = { visible: true }

}

См.: Установка состояния по умолчанию

Функциональные компоненты

function MyComponent ({ name }) {

return <div className='message-box'>

Hello {name}

</div>

}

Функциональные компоненты не имеют состояния. Кроме того, propsони передаются в качестве первого параметра функции.

См.: Компоненты функций и классов .

Чистые компоненты

import React, {PureComponent} from 'react'

class MessageBox extends PureComponent {

···

}

Оптимизированная по производительности версия React.Component. Не перерисовывается, если реквизит/состояние не изменились.

См.: Чистые компоненты .

API компонентов

this.forceUpdate()

this.setState({ ... })

this.setState(state => { ... })

this.state

this.props

Эти методы и свойства доступны для Componentэкземпляров.

См. API компонентов .

Жизненный цикл

Монтаж

Метод	Описание
`constructor` (реквизит)	Перед рендерингом #
`componentWillMount()`	Не используйте этот #
`render()`	Рендер #
`componentDidMount()`	После рендеринга (доступен DOM) #
—	—
`componentWillUnmount()`	Перед удалением DOM #
—	—
`componentDidCatch()`	Отлов ошибок (16+) #

Установите начальное состояние на constructor().
Добавьте обработчики событий DOM, таймеры (и т. д.) на componentDidMount(), а затем удалите их на componentWillUnmount().

Обновление

Метод	Описание
`componentDidUpdate` (prevProps, prevState, моментальный снимок)	Используйте `setState()`здесь, но не забудьте сравнить реквизит
`shouldComponentUpdate` (новые реквизиты, новое состояние)	Пропускает `render()`, если возвращает false
`render()`	Оказывать
`componentDidUpdate` (предпропс, превстате)	Работайте с DOM здесь

Вызывается, когда родители изменяют свойства и .setState(). Они не вызываются для первоначальных рендеров.

См.: Спецификации компонентов .

Hooks (новые)

State Hook

import React, { useState } from 'react';

function Example() {

// Declare a new state variable, which we'll call "count"

const [count, setCount] = useState(0);

return (

<div>

<p>You clicked {count} times</p>

<button onClick={() => setCount(count + 1)}>

Click me

</button>

</div>

);

}

Хуки — это новое дополнение в React 16.8.

См.: Hooks at a Glance

Объявление нескольких переменных состояния

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 (

<div>

<p>You clicked {count} times</p>

<button onClick={() => setCount(count + 1)}>

Click me

</button>

</div>

);

}

Если вы знакомы с методами жизненного цикла класса React, вы можете думать о useEffectHook как о componentDidMount, componentDidUpdateи componentWillUnmountвместе взятых.

По умолчанию React запускает эффекты после каждого рендеринга, включая первый рендеринг.

Создание собственных Hooks

Определить статус друга

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 хуков

См. также: Часто задаваемые вопросы по хукам

Basic Hooks

Крюк	Описание
`useState`(начальное состояние)
`useEffect`(() => {…})
`useContext`(МойКонтекст)	значение, возвращенное из`React.createContext`

Полная информация: основные крючки

Additional Hooks

Крюк	Описание
`useReducer`(редуктор, начальный аргумент, инициализация)
`useCallback`(() => {…})
`useMemo`(() => {…})
`useRef`(Первоначальный значение)
`useImperativeHandle`(ссылка, () => { … })
`useLayoutEffect`	идентичен `useEffect`, но срабатывает синхронно после всех мутаций DOM
`useDebugValue`(стоимость)	отображать метку для пользовательских хуков в React DevTools

Полная информация: Дополнительные крючки

DOM-узлы

class MyComponent extends Component {

render () {

return <div>

<input ref={el => this.input = el} />

</div>

}

componentDidMount () {

this.input.focus()

}

Разрешает доступ к узлам DOM.

См.: Refs и DOM.

События ДОМ

class MyComponent extends Component {

render () {

<input type="text"

value={this.state.value}

onChange={event => this.onChange(event)} />

}

onChange (event) {

this.setState({ value: event.target.value })

}

Передайте функции атрибутам, таким как onChange.

См.: События

Другие преимущества

Перенос реквизита

class VideoPlayer extends Component {

render () {

return <VideoEmbed {...this.props} />

}

Распространяется src="..."на подкомпонент.

См. Перенос реквизита

API верхнего уровня

React.createClass({ ... })

React.isValidElement(c)

ReactDOM.render(<Component />, domnode, [callback])

ReactDOM.unmountComponentAtNode(domnode)

ReactDOMServer.renderToString(<Component />)

ReactDOMServer.renderToStaticMarkup(<Component />)

Их больше, но эти самые распространенные.

См. API верхнего уровня React .

Шаблоны JSX

Стенография стиля

const style = { height: 10 }

return <div style={style}></div>

return <div style={{ margin: 0, padding: 0 }}></div>

См.: Встроенные стили .

Внутренний HTML

function markdownify() { return "<p>...</p>"; }

См.: Опасно установить innerHTML

Списки

class TodoList extends Component {

render () {

const { items } = this.props

return <ul>

{items.map(item =>

<TodoItem item={item} key={item.key} />)}

</ul>

}

Всегда предлагайте keyнедвижимость.

Условные

{showMyComponent

? <MyComponent />

: <OtherComponent />}

</Fragment>

Оценка короткого замыкания

{showPopup && <Popup />}

...

</Fragment>

Новые возможности

Возврат нескольких элементов

Вы можете вернуть несколько элементов в виде массивов или фрагментов.

Массивы

render () {

// Don't forget the keys!

return [

<li key="A">First item</li>,

<li key="B">Second item</li>

]

}

Фрагменты

render () {

// Fragments don't require keys!

return (

<li>First item</li>

<li>Second item</li>

</Fragment>

)

}

См.: Фрагменты и строки .

Возвращаемые строки

render() {

return 'Look ma, no spans!';

}

Вы можете вернуть только строку.

См.: Фрагменты и строки .

Ошибки

class MyComponent extends Component {

···

componentDidCatch (error, info) {

this.setState({ error })

}

Отлов ошибок через componentDidCatch. (Реакция 16+)

См.: Обработка ошибок в React 16 .

Порталы

render () {

return React.createPortal(

this.props.children,

document.getElementById('menu')

)

}

Это отображается this.props.childrenв любом месте в DOM.

См.: Порталы

Hydration

const el = document.getElementById('app')

ReactDOM.hydrate(<App />, el)

Используйте ReactDOM.hydrateвместо использования ReactDOM.render, если вы выполняете рендеринг поверх вывода ReactDOMServer .

См.: Увлажнение .

Проверка свойства

PropTypes

import PropTypes from 'prop-types'

См.: Проверка типов с помощью PropTypes.

Ключ	Описание
`any`	Что-нибудь

Базовый

Ключ	Описание
`string`
`number`
`func`	Функция
`bool`	Правда или ложь

Перечисление

Ключ	Описание
`oneOf`(Любые)	Типы перечислений
`oneOfType`(массив типов)	Союз

Множество

Ключ	Описание
`array`
`arrayOf`(…)

Объект

Ключ	Описание
`object`
`objectOf`(…)	Объект со значениями определенного типа
`instanceOf`(…)	Экземпляр класса
`shape`(…)

Элементы

Ключ	Описание
`element`	Реагировать элемент
`node`	DOM-узел

Required

Ключ	Описание
`(···).isRequired`	Необходимый

Основные типы

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[Of], .object[Of], .instanceOf, .shape.

Пользовательская проверка

MyCo.propTypes = {

customProp: (props, key, componentName) => {

if (!/matchme/.test(props[key])) {

return new Error('Validation failed!')

}

Пользуйтесь и практикуйтесь! Все получится!

Источник статьи: http://dev.to/

Самая мощная шпаргалка по React JS

Удивительные вещи, связанные с React Hooks 😍

5 потрясающих проектов HTML и CSS для создания (с предварительным просмотром codepen)

Компоненты

Импорт нескольких экспортов

Характеристики

Состояния

Вложение

Children

Установка реквизита по умолчанию

Настройка состояния по умолчанию

Функциональные компоненты

Чистые компоненты

API компонентов

Жизненный цикл

Монтаж

Обновление

Hooks (новые)

State Hook

Объявление нескольких переменных состояния

Хук эффекта

Создание собственных Hooks

Определить статус друга

Использовать статус друга

Справочник API хуков

Basic Hooks

Additional Hooks

DOM-узлы

События ДОМ

Другие преимущества

Перенос реквизита

API верхнего уровня

Шаблоны JSX

Стенография стиля

Внутренний HTML

Списки

Условные

Оценка короткого замыкания

Новые возможности

Возврат нескольких элементов

Массивы

Фрагменты

Возвращаемые строки

Ошибки

Порталы

Hydration

Проверка свойства

PropTypes

Базовый

Перечисление

Множество

Объект

Элементы

Required

Основные типы

Требуемые типы

Элементы

Перечисления (oneOf)

Массивы и объекты

Пользовательская проверка

AnnaKvando

Related posts

Плохие привычки разработчиков React среднего уровня

(Неизвестно): ошибка сценария в JavaScript

Все, что вам нужно знать о React 18 RC

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