什麼是React生命週期方法的典型用例，例如componentWillReceiveProps

Question

componentWillReceiveProps和其他生命週期方法似乎具有欺騙性的誘惑，爲沒有經驗的React編碼器的代碼帶來不必要的複雜性和噪音。他們爲什麼存在？他們最典型的用例是什麼？在不確定的時刻，我如何知道答案是否存在於生命週期方法中？

Answer 1

我一直在使用幾個月的反應，而我的大部分工作是從頭開始創建一個大型應用程序。因此，一開始就提出了同樣的問題。

下面的信息是基於學習，同時發展和通過多個文檔在那裏得到它的權利。

至於問這裏的問題是在生命週期方法夫婦的用途的情況下反應

1. componentWillMount()

   • 這是在服務器端調用一次，如果服務器端渲染存在，並曾經是客戶端。
   • 我個人使用它只是做它沒有對成分直接作用API調用，例如獲取OAuth憑證

2. componentDidMount()

   • 該功能主要用於調用API的(here是爲什麼要在componentDidMount中調用它，而不是在componentWillMount中）
   • 組件state初始化基於父母通過的道具。

3. componentWillReceiveProps(nextProps,nextState)

   • 這個函數被調用每一個道具都收到除了第一渲染
   • 最常見的用法我曾經遇到過的時間來更新我的電流分量的狀態這我無法在componentWillUpdate中做到這一點。

4. shouldComponentUpdate(nextProps, nextState)

   • 之前，當接收到新的道具或狀態呈現發生這種方法被調用。如果不需要重新渲染，我們可以返回false。
   • 我認爲這是一個性能優化工具。在父組件的頻繁的重新渲染的情況下，應使用此方法，以避免不必要的更新，以電流分量

5. componentWillUpdate(nextProps,nextState)

   • 這個函數被調用每一個組件被更新時，它不在部件安裝時調用
   • 在此處執行任何數據處理。例如，當一個API獲取收益數據，原始數據模擬成道具要傳遞給孩子
   • this.setState()不允許在此功能，它是在componentWillReceiveProps做或componentDidUpdate

6. componentDidUpdate(prevProps,prevState)

   • 後調用權的變化都推到DOM
   • 我已經用它的時候所需要的數據是不是在第一渲染（等待API調用來通過）和DOM要求是陳基於數據GED收到
   • 例如，根據收到的年齡顯示給用戶，如果他有資格申請的事件

7. componentWillUnmount()

   • 作爲官方文檔中提到的任何事件在組件中使用監聽器或定時器這裏要清潔

---

在不確定的時刻，我將如何知道答案在於生命週期方法的 ？

我建議什麼比喻

1. 變化是組件本身

   • 例觸發，啓用字段編輯在編輯按鈕
   • 在同一個函數的點擊組件更改狀態不涉及生命週期功能
2. 變更被觸發組件
   • 實施例之外，API調用完成時，需要顯示所接收的數據
   • 爲勝生命週期方法。

---

這裏有一些更多的場景 -

1. 處於狀態/道具的變化需要修改的DOM？

   • 例如，如果當前的電子郵件已存在，給輸入類一個錯誤類。
   • componentDidUpdate

2. 處於狀態/道具的變化，需要對數據進行更新？

   • 例如，在api調用後接收格式數據並將格式化數據傳遞給子級的父容器。
   • componentWillUpdate

3. 道具被傳遞到一個子被改變，孩子需要更新

   • 實施例，
   • shouldComponentUpdate

4. 添加一個事件監聽器

   • 示例，根據窗口大小添加監聽器來監視DOM。
   • componentDidMount
   • 'componentWillMount'，摧毀聽者

5. 調用API

   • 'componentDidMount'

來源 -

個

1. 文檔 - https://facebook.github.io/react/tips/dom-event-listeners.html

Answer 2

一些典型使用案例中最常用的生命週期方法：

componentWillMount：初始渲染之前調用。對於進行AJAX調用很有用。例如，如果您需要獲取用戶信息以填充視圖，那麼這是一個很好的選擇。如果您確實有AJAX調用，那麼在AJAX調用完成之前呈現不確定的加載欄將會很好。我還使用componentWillMount調用setInterval並在頁面呈現前禁用Chrome的拖放功能。

componentDidMount：在組件呈現後立即調用。如果您需要訪問DOM元素，這很有用。例如，我用它來禁用複製並粘貼到密碼輸入字段中。非常適合調試，如果您需要知道組件的狀態。

componentWillReceiveProps：組件接收新道具時調用。用於在不重新渲染的情況下使用新道具設置狀態。

Answer 3

componentWillReceiveProps是更新lifce週期方法的一部分和渲染開始之前被稱爲 - 這掃清了生命週期概念

事件監聽器https://facebook.github.io/react/docs/component-specs.html

this scotch.io文章。最明顯的例子是當新的道具被傳遞給組件時。例如，我們有一個表單組件和一個人員組件。表單組件有一個允許用戶通過在輸入中鍵入來更改名稱的單個表單組件。輸入綁定到onChange事件並設置窗體上的狀態。狀態值然後作爲道具傳遞給Person組件。

import React from 'react'; 
import Person from './Person'; 

export default class Form extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state  = { name: '' } ; 
    this.handleChange = this.handleChange.bind(this); 
    } 

    handleChange(event) { 
    this.setState({ name: event.currentTarget.value }); 
    } 

    render() { 
    return (
     <div> 
     <input type="text" onChange={ this.handleChange } /> 
     <Person name={ this.state.name } /> 
     </div> 
    ); 
    } 
} 

任何時候用戶鍵入到這裏，都會開始更新Person組件。在Component上調用的第一個方法是componentWillReceiveProps（nextProps）傳入新的prop值。這使得我們可以將傳入的道具與我們當前的道具進行比較，並根據價值做出合理的決定。我們可以通過調用this.props來獲得我們當前的道具，並且新值是傳遞給該方法的nextProps參數。