React - шпаргалка.

Шпаргалка по React.js в картинках.

См. этот пост на gitHub                                                                                                                                                              

Телеграм канал - Full Stack JavaScript Developer

Методы жизненного цикла React 16 на русском.

//  React 16 Lifecycle Methods

class ComponentWithLifecycle extends React.Component {
  //  Часто используемые методы ЖЦ (Жизненного цикла)
  constructor() {
    //  - ЖЦ: Mounting  - Монтаж ( до рендера )
    //  - Цель: Инициализация состояния
  }

  componentDidMount() {
    //  - ЖЦ: Mounting - Монтаж ( немедленно после рендера )
    //  -Цель: Инициализация состояний требующее существование ДОМ узлов
    //    Сетевые запросы и побочный эффекты.
  }
   componentDidUpDate() {
    //  - ЖЦ:  Updating - Обновление 
( yнемедленно после построения - обновления)
    //  -Цель: Управление обновлением ДОМ или поддержка сетевых запросов
   }
   componentWillUnmount() {
      //  - ЖЦ: Unmounting - Размонтирование
      // -Цуль: Убрать такие вещи как обработчики событий,
 отмена сетевых запросов и т.д.
   }

  //  Редко используемые методы жизненного цикла
  static static getDerivedStateFromProps(props, state) {
    //  -ЖЦ: Mounting  Монтирование и размонтирование -  Unmounting
( немедленно до рендера )
    //  -Цель: Когда state - состояние зависит от свойств - props 
( следует избегать )
  }

  shouldComponentUpdate(nextProps, nextState) {
    //  -ЖЦ: Updating -Обновление (немедленно до рендера )
    //  -Цель: Позволяет разработчику предотвращать рендеринг
  }

  getSnapshotBeforeUpdate(prevProps, prevState) {
    //  -ЖЦ: Updating - Обновление 
( непосредственно перед подтверждением вывода рендера )
    //  -Цель Захват информации ДОМ, такой как данные скролла - 
scroll position которые могут меняться.
  }

  // Особые случаи использования
  componentDidCatch() {
    //  - Создает границы ошибок для захвата их от дочерних компонентов
  }

  // Необходимый - обязательный
  render() {
    // -Выводит код компонента на экран
  }

  // Объяснение жизненного цикла:
  // Mounting -  монтаж: Вызывается до того как ваш компонент 
отображается в пользовательском интерфейсе - UI
  // Updating - обновление: Вызывается изменением  
state-состояния или props и повторный рендеринг UI
  // Unmounting - Размонтирование: Вызывается когда ваш 
компонент больше не будет отображаться в UI
}

React Lifecycle Methods - on GitHub                                                                                                                                                              

Телеграм канал - Full Stack JavaScript Developer