Рубрики
Без рубрики

Наиболее мощные реагирующие JS Cheat лист

РЕАКТ – это библиотека JavaScript для построения пользовательских интерфейсов. Это направляющие цели реагируют на V15 на V16 …. С меткой inventj, javascript.

Реагировать Является ли библиотека JavaScript для постройки пользовательских интерфейсов. В этом руководстве целей реагируют V15 на V16.

Компоненты

import React from 'react'
import ReactDOM from 'react-dom'
class Hello extends React.Component {
  render () {
    return 
Hello {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 }) {
  return 
Hello {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 () {
    return 
this.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 [
    
  • First item
  • ,
  • Second item
  • ] }

    Фрагменты

    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”