React
Реагировать жизненный цикл компонентов

Вступление

Создание компонентов

Когда компонент React создается, вызывается целый ряд функций:

• Если вы используете React.createClass (ES5), вызывается 5 пользовательских функций
• Если вы используете class Component extends React.Component (ES6), вызывается 3 пользовательских функции

getDefaultProps() (только для ES5)

Это первый вызванный метод.

Значения Prop, возвращаемые этой функцией, будут использоваться как значения по умолчанию, если они не определены при создании экземпляра компонента.

В следующем примере this.props.name будет по умолчанию для Bob если не указано иное:

getDefaultProps() {
  return {
    initialCount: 0,
    name: 'Bob'
  };
}

getInitialState() (только для ES5)

Это второй метод.

Возвращаемое значение getInitialState() определяет начальное состояние компонента React. Структура React вызовет эту функцию и назначит возвращаемое значение this.state .

В следующем примере this.state.count будет проиндексирован со значением this.props.initialCount :

getInitialState() {
  return {
    count : this.props.initialCount
  };
}

componentWillMount() (ES5 и ES6)

Это третий вызванный метод.

Эта функция может быть использована для внесения окончательных изменений в компонент до его добавления в DOM.

componentWillMount() {
  ...
}

render() (ES5 и ES6)

Это четвертый метод.

Функция render() должна быть чистой функцией состояния компонента и реквизита. Он возвращает один элемент, который представляет компонент во время процесса рендеринга, и должен быть либо представлением собственного компонента DOM (например, <p /> ), либо составного компонента. Если ничего не нужно сделать, он может вернуть значение null или undefined .

Эта функция будет вызвана после любого изменения реквизита или состояния компонента.

render() {
  return (
    <div>
      Hello, {this.props.name}!
    </div>
  );
}

componentDidMount() (ES5 и ES6)

Это пятый метод.

Компонент смонтирован, и теперь вы можете получить доступ к узлам DOM компонента, например, посредством refs .

Этот метод следует использовать для:

• Подготовка таймеров
• Получение данных
• Добавление прослушивателей событий
• Манипулирование элементами DOM

componentDidMount() {
  ...
}

Синтаксис ES6

Если компонент определен с использованием синтаксиса класса ES6, функции getDefaultProps() и getInitialState() не могут использоваться.

Вместо этого мы объявляем наши defaultProps как статическое свойство в классе и объявляем форму состояния и начальное состояние в конструкторе нашего класса. Они устанавливаются в экземпляре класса во время построения, до того, как вызывается любая другая функция жизненного цикла React.

Следующий пример демонстрирует этот альтернативный подход:

class MyReactClass extends React.Component {
  constructor(props){
    super(props);

    this.state = {
      count: this.props.initialCount
    };
  }
  
  upCount() {
    this.setState((prevState) => ({
      count: prevState.count + 1
    }));
  }
  
  render() {
    return (
      <div>
        Hello, {this.props.name}!<br />
        You clicked the button {this.state.count} times.<br />
        <button onClick={this.upCount}>Click here!</button>
      </div>
    );
  }
}

MyReactClass.defaultProps = {
  name: 'Bob',
  initialCount: 0
};

Замена getDefaultProps()

Значения по умолчанию для реквизита компонента определяются установкой свойства defaultProps класса:

MyReactClass.defaultProps = {
  name: 'Bob',
  initialCount: 0
};

Замена getInitialState()

Идиоматическим способом настройки начального состояния компонента является установка this.state в конструкторе:

constructor(props){
  super(props);

  this.state = {
    count: this.props.initialCount
  };
}

Обновление компонента

componentWillReceiveProps(nextProps)

Это первая функция, называемая изменением свойств .

Когда свойства компонента изменяются , React вызовет эту функцию с новыми свойствами . Вы можете получить доступ к старым реквизитам с помощью this.props и к новым реквизитам с nextProps .

С помощью этих переменных вы можете выполнять некоторые операции сравнения между старым и новым реквизитом или функцией вызова, потому что изменение свойства и т. Д.

componentWillReceiveProps(nextProps){
  if (nextProps.initialCount && nextProps.initialCount > this.state.count){
    this.setState({
      count : nextProps.initialCount
    });
  }
}

shouldComponentUpdate(nextProps, nextState)

Это вторая функция, называемая изменением свойств, и первая смена состояния .

По умолчанию, если другой компонент / ваш компонент изменяет свойство / состояние вашего компонента, React отобразит новую версию вашего компонента. В этом случае эта функция всегда возвращает true.

Вы можете переопределить эту функцию и выбрать более точно, если ваш компонент должен обновить или нет .

Эта функция в основном используется для оптимизации .

В случае, если функция возвращает false , конвейер обновлений останавливается немедленно .

componentShouldUpdate(nextProps, nextState){
  return this.props.name !== nextProps.name ||
    this.state.count !== nextState.count;
}

componentWillUpdate(nextProps, nextState)

Эта функция работает как componentWillMount() . Изменения не внесены в DOM , поэтому вы можете внести некоторые изменения непосредственно перед обновлением.

/! \: вы не можете использовать this.setState () .

componentWillUpdate(nextProps, nextState){}

render()

Есть некоторые изменения, поэтому повторно отрисуйте компонент.

componentDidUpdate(prevProps, prevState)

Тот же материал, что и componentDidMount() : DOM обновлен , поэтому вы можете выполнить некоторую работу над DOM здесь.

componentDidUpdate(prevProps, prevState){}

Удаление компонентов

componentWillUnmount()

Этот метод вызывается до того, как компонент будет удален из DOM.

Это хорошее место для выполнения операций очистки, таких как:

• Удаление прослушивателей событий.
• Очистка таймеров.
• Остановка гнезд.
• Очистка состояний редукции.

componentWillUnmount(){
  ...
}

Пример удаления подключенного прослушивателя событий в componentWillUnMount

import React, { Component } from 'react';

export default class SideMenu extends Component {

  constructor(props) {
    super(props);
    this.state = {
        ...
      };
    this.openMenu = this.openMenu.bind(this);
    this.closeMenu = this.closeMenu.bind(this);
  }

  componentDidMount() {
    document.addEventListener("click", this.closeMenu);
  }

  componentWillUnmount() {
    document.removeEventListener("click", this.closeMenu);
  }

  openMenu() {
    ...
  }

  closeMenu() {
    ...
  }

  render() {
    return (
      <div>
        <a
          href      = "javascript:void(0)"
          className = "closebtn"
          onClick   = {this.closeMenu}
        >
          ×
        </a>
        <div>
          Some other structure
        </div>
      </div>
    );
  }
}

Контейнер для реактивов

При создании приложения React часто желательно разделить компоненты на основе их основной ответственности, в компоненты Presentation и Container.
Презентационные компоненты касаются только отображения данных - их можно рассматривать и часто реализуются как функции, которые преобразуют модель в представление. Обычно они не поддерживают никакого внутреннего состояния. Контейнерные компоненты связаны с управлением данными. Это может быть сделано внутренне через их собственное государство, или действуя как посредники с государственной административной библиотекой, такой как Redux. Контейнерный компонент не будет отображать данные напрямую, а передает данные в презентационный компонент.

// Container component
import React, { Component } from 'react';
import Api from 'path/to/api';

class CommentsListContainer extends Component {
    constructor() {
        super();
        // Set initial state
        this.state = { comments: [] }
    }

    componentDidMount() {
        // Make API call and update state with returned comments
        Api.getComments().then(comments => this.setState({ comments }));
    }

    render() {
        // Pass our state comments to the presentational component
        return (
            <CommentsList comments={this.state.comments} />;
        );
    }
}

// Presentational Component
const CommentsList = ({ comments }) => (
    <div>
        {comments.map(comment => (
            <div>{comment}</div>
        )}
    </div>
);

CommentsList.propTypes = {
    comments: React.PropTypes.arrayOf(React.PropTypes.string)
}

Метод вызова жизненного цикла в разных состояниях

Этот пример служит дополнением к другим примерам, в которых рассказывается о том, как использовать методы жизненного цикла и когда будет вызван метод.

В этом примере суммировать, какие методы (componentWillMount, componentWillReceiveProps и т. Д.) Будут вызываться и в какой последовательности будет отличаться для компонента в разных состояниях :

Когда компонент инициализируется:

1. getDefaultProps
2. getInitialState
3. componentWillMount
4. оказывать
5. componentDidMount

При изменении состояния компонента:

1. shouldComponentUpdate
2. componentWillUpdate
3. оказывать
4. componentDidUpdate

Когда компонент имеет реквизиты, изменилось:

1. componentWillReceiveProps
2. shouldComponentUpdate
3. componentWillUpdate
4. оказывать
5. componentDidUpdate

Когда компонент размонтирует:

1. componentWillUnmount