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

Question

Я недавно писал компоненты в React.js. Мне никогда не приходилось использовать такие методы, как componentWillMount и componentDidMount.

render является незаменимым. getInitialState и другие вспомогательные методы, которые я написал, также пригождаются. Но не два вышеупомянутых метода жизненного цикла.

Мое последнее предположение, что они используются для отладки? Я могу утешать их внутри:

componentWillMount: function() { 
    console.log('component currently mounting'); 
}, 

componentDidMount: function() { 
    console.log('component has mounted'); 
} 

Есть ли другие виды использования?

Answer 1

componentDidMount полезен, если вы хотите использовать некоторые плагины, не связанные с реакцией. Например, в 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, чтобы подключить к нему и componentDidMount крючок позволяет вам крюк в это точное событие.

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

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

Answer 2

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

От Facebook, React Страница

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 здесь, так как он попытается запустить на сервере без причины.

Answer 3

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

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

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

Answer 4

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

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

Answer 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 
    } 
} 

Почему Реагировать хочет сделать это?

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