11-lifecycle-methods.html

<!doctype html>

<title>11 Методы жизненного цикла - React с нуля</title>

<script src="https://unpkg.com/react@16.4.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.4.0/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/create-react-class@15.6.3/create-react-class.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

<div id="app"></div>

<script type="text/babel">
// Если мы используем классы компонентов, наши компоненты наследуют
// кучу методов, которые в определённое время вызываются React, чтобы
// мы могли получить больше контроля над нашими компонентами,
// некоторые из них мы уже встречали в уроке 9
// Вот несколько новых. Не все из них, но самые важные из них.

var TRANSLATION_FROM_SOMEWHERE = "Текст из синхронного источника."

var MyComponent = createReactClass({
  // Этот метод для установки значений по умолчанию
  // Он вызывается до того, как свойства будут переданы компоненту
  // "реальные" свойства переопределяют их, если они есть
  getDefaultProps: function() {
    return {
      iGetOverriden: "default",
      iStayAsIAm: "default",
    }
  },

  // Этот метод вызывается до того, как компонент будет примонтирован к DOM
  // Он возвращает значения, которые используются this.state
  getInitialState: function() {
    return {serverData: null}
  },

  // Этот метод вызывается непосредственно перед монтированием компонента
  // Может использоваться для инициализации некоторой синхронной конфигурации,
  // которая должна быть доступна до того, как компонент отрисуется
  componentWillMount: function() {
    this.TEXT = TRANSLATION_FROM_SOMEWHERE
  },

  // Этот метод будет вызываться сразу после монтирования компонента,
  // это хорошее место для выполнения некоторых асинхронных задач.
  // Например, при первом монтировании отображается сообщение загрузки,
  // затем вызывается componentDidMount и получает некоторые данные с сервера.
  componentDidMount: function() {

    var component = this

    // Мы очищаем данные и получаем что-то новое
    function loadData() {

      component.setState({serverData: null})

      getServerData(function(data) {
        component.setState({serverData: data})
      })

    }

    // Начальная загрузка данных
    loadData()

    // Мы имитируем запрос к серверу каждые 4 секунды
    this.updateInterval = setInterval(loadData, 4000)

  },

  // Этот метод будет вызван до того, как компонент будет удалён из DOM
  // Немного похоже на деструктор, здесь мы можем сделать некоторую очистку.
  componentWillUnmount: function() {

    clearInterval(this.updateInterval)

  },

    // Этот метод вызывается перед отрисовкой при наличии новых свойств или состояний,
    // Он не будет вызван на первой отрисовке или если используется this.forceUpdate()
    // Его можно использовать, если какое-либо изменение состояния или свойства не требует повторной отрисовки
  shouldComponentUpdate: function(nextProps, nextState) {

    // мы хотим отрисовываем при каждом изменении, это поведение по умолчанию
    return true

  },

  render: function() {
    return (
      <h2 style={{width: 400, margin: "auto"}}>

        Overriden Prop: {this.props.iGetOverriden}<br/><br/>

        Default Prop: {this.props.iStayAsIAm}<br/><br/>

        {this.TEXT}<br/><br/>

        {this.state.serverData
          ? this.state.serverData
          : "Загрузка..."
        }
      </h2>
    )
  },

})

function getServerData(fn) {
  setTimeout(function() { fn("Данные загружены!") }, 700)
}

ReactDOM.render(<MyComponent iGetOverriden={"override"}/>, document.getElementById("app"))
</script>