Please enable JavaScript.

Coggle requires JavaScript to display documents.

React - Coggle Diagram

- - - - Разделение кода на базе промисов
    - - Позволяет рендерить динамический импорт как обычный компонент
    - - Обёртка компонента с ленивой загрузкой. Позволяет показать альтернативное содержимое во время загрузки
  - - - позволяет дочерним компонентам, использующим этот контекст, подписаться на его изменения.
    - - React-компонент, который подписывается на изменения контекста
    - - может быть назначен объект контекста, созданный с помощью React.createContext()
  - - - передавайте посторонние пропсы оборачиваемому компоненту
      - Не используйте HOC внутри рендер-метода
      - Копируйте статические методы
  - - - Цвет иконки React Developer Tools
        
        красный - develop
        
        черный - production
  - - - Элементы различных типов всегда перемонтируются
      - DOM-элементы одного типа меняет атрибуты
      - Компоненты одного типа сохраняют состояние
      - Рекурсия по дочерним элементам
      - Ключи
  - - - React.createRef()
    - - current
        
        HTML-элемент
        
        DOM
        
        Классовый компонет
        
        Экземпляр
        
        Функциональный компонент
        
        Нельзя использовать
    - - React.forwardRef()
      - Позволяет взять ref из атрибутов компонента, и передать («перенаправить») его одному из дочерних компонентов
  - - - строковых ref
      - метода findDOMNode
      - контекста
    - - Путём вызова по 2 раза методов жизненного цикла
        
        Метод constructor, render, и shouldComponent классового компонента
        
        Статический метод классового компонента getDerivedStateFromProps
        
        Тело функционального компонента
        
        Функции обновления (первый аргумент setState)
        
        Функции, переданные в useState, useMemo, или useReducer
- - - - Выставлять значение напрямую можно только в конструкторе. В остальных случаях - через setState()
      - Асинхронные обновления
      - Обновления состояния объединяются
      - Однонаправленный поток данных
    - - Функциональный
      - Классовый
  - - - .bind()
      - Стрелочный фукнции
      - Синтаксис общедоступных полей классов
  - - - определяет, какие изменения необходимо произвести
      - Конкурентный режим
        
        делит работу на части, периодически останавливает и возобновляет работу, чтобы избежать блокировки браузера
      - Методы жизненного цикла
        
        constructor
        
        componentWillMount (или UNSAFE_componentWillMount)
        
        componentWillReceiveProps (или UNSAFE_componentWillReceiveProps)
        
        componentWillUpdate (или UNSAFE_componentWillUpdate)
        
        getDerivedStateFromProps
        
        shouldComponentUpdate
        
        render
        
        Функции обновления setState (первый аргумент)
    - - применяет любые изменения