Какова цель создания таких функций, как componentWillMount в React.js?

Ответ 1

componentDidMount полезен, если вы хотите использовать некоторые плагины, не связанные с React JavaScript. Например, в React отсутствует хороший выбор времени. Pickaday красив, и он просто работает из коробки. Поэтому мой компонент DateRangeInput теперь использует Pickaday для ввода даты начала и конца, и я подключил его так:

  componentDidMount: function() {
    new Pikaday({
      field: React.findDOMNode(this.refs.start),
      format: 'MM/DD/YYYY',
      onSelect: this.onChangeStart
    });

    new Pikaday({
      field: React.findDOMNode(this.refs.end),
      format: 'MM/DD/YYYY',
      onSelect: this.onChangeEnd
    });
  },

DOM необходимо отобразить для Pikaday, чтобы подключиться к нему, а hook componentDidMount позволяет вам подключиться к этому точному событию.

componentWillMount полезен, когда вы хотите сделать что-то программно прямо перед монтированием компонентов. Пример в одной кодовой базе, над которой я работаю, - это mixin, у которого есть куча кода, который в противном случае дублируется в нескольких различных компонентах меню. componentWillMount используется для установки состояния одного определенного общего атрибута. Другой способ componentWillMount можно использовать, чтобы установить поведение разветвления компонента с помощью prop (s):

  componentWillMount() {
    let mode;
    if (this.props.age > 70) {
      mode = 'old';
    } else if (this.props.age < 18) {
      mode = 'young';
    } else {
      mode = 'middle';
    }
    this.setState({ mode });
  }

Ответ 2

componentDidMount работает только один раз и на стороне клиента. Это важно, особенно если вы пишете изоморфное приложение (выполняется как на клиенте, так и на сервере). Вы можете использовать componentDidMount для выполнения задач, требующих наличия доступа к окну или DOM.

Страница отзыва Facebook Страница

If you want to integrate with other JavaScript frameworks, set timers using setTimeout or setInterval, or send AJAX requests, perform those operations in this method.

componentWillMount имеет меньше случаев использования (я его действительно не использую), но он отличается тем, что он работает как на стороне клиента, так и на стороне сервера. Вы, вероятно, не хотите размещать прослушиватели событий или манипуляции с DOM здесь, так как он попытается запустить на сервере без причины.

Ответ 3

Это пример изоморфного веб-приложения, использующего componentWillMount: https://github.com/coodoo/react-redux-isomorphic-example

Тем не менее, я на 99% уверен, что он запускает код внутри componentWillMount без всякой причины на стороне сервера (я думаю, что использование componentDidMount, чтобы убедиться, что он был только на стороне клиента, имел бы больше смысла), поскольку код, который гарантирует, что выборка promises выполняется до того, как страница будет в server.js не внутри отдельных компонентов.

Здесь обсуждается однонаправленная асинхронная выборка: https://github.com/facebook/react/issues/1739 Насколько я могу судить, нет хорошего варианта использования для componentWillMount насколько изоморфизм затронут по крайней мере.

Ответ 4

В моем проекте, который является инструментом панели инструментов, я использовал componentDidMount().

На домашней странице ранее сохраненные информационные панели отображаются на боковой панели. Я делаю вызов ajax внутри componentDidMount() для частичной рендеринга компонентов, чтобы асинхронно извлекать список информационных панелей после того, как страница была отображена.

Ответ 5

Зачем реагировать на методы жизненного цикла?

Предназначен для использования сторонней библиотеки (Ex D3.js) с компонентом React

class Example extends React.component{
  constructor(){
    // init state
    // will be called only once
  }  
  componentWillMount(){
    // will be called only once
    // will not be triggered when re-rendering
    // usually will fetch data that is needed in order 
    // to render properly from other API
  }
  shouldComponentUpdate(){
      return false
      // will not re-render itself after componentDidMount(){}
  }
  render(){
    return (
      <div id="chart"></div>
    )
  }
  componentDidMount(){
    d3.select(".chart")
      .selectAll("p")
      // d3.js ........
      // d3.js ........
      // Usually, this will trigger React to re-render itself,
      // but this time will not because we have set 
      // shouldComponentUpdate to false
  }
}

Почему React хочет сделать это?

Поскольку рендеринг DOM является дорогостоящей операцией, React использует слой виртуальной DOM для обновления только DOM/DOM, которые/отличаются от предыдущего состояния.