是否有人更喜歡使用React組件的構造函數而不是componentWillMount的原因？

我發現，使用生命週期方法componentWillMount設置初始狀態...是否有人更喜歡使用React組件的構造函數而不是componentWillMount的原因？

componentWillMount() { 
    this.state = { 
    comments: [] 
    }; 
}

...比使用構造稍微簡單一些。這是因爲當你使用構造函數時致電super()。

constructor() { 
    super(); 
    this.state = { 
    comments: [] 
    }; 
}

不僅如此，但如果你的組件傳遞props和/或state，那麼你必須通過以及手動傳遞這些。

constructor(props, state) { 
    super(props, state); 
    ... 
}

我沒有使用componentWillMount任何問題，但我幾乎從來沒有看到使用它的人設立的狀態（除非他們避免ES6和不上課）。我得到我們可以訪問es6類中的構造函數，但是爲什麼在必須將手動傳遞連接到父構造函數時使用它，並且有一個完美的生命週期方法已準備好並等待，因此您不必這樣做？

只是好奇，如果有實際的實際原因，或者如果它大多隻是偏好。

來源

2017-12-02 Chev

你也可以只使用類的屬性，並避免在任何一個初始化狀態 – linasmnew

親愛的親密選民：這不是「基於意見」，除非答案字面意思是「基於意見」，因爲我的實際問題是是否存在**實際**選擇其中一個的理由。 – Chev

@LinasMickevicius我不確定你的意思。心理擴展？ – Chev

構造函數是初始化（直接分配給）state唯一「正確」的地方。即this.state = {...}

您在組件中定義的其他功能（componentWillMount等）稱爲React引擎調用的「生命週期回調」。預計state應該在組件的整個生命週期中不可改變，並且絕不能直接分配給組件。相反，您必須this.setState({...})才能對構造函數外部的任何位置的state進行任何更改。

儘管您目前的做法可能尚未引起任何問題，但不保證以相同的方式繼續工作。如果由於某種原因，React在生命週期回調之間讀取state，並且您在componentWillMount回調中發生了變異，這可能會產生意想不到的後果。

我的建議是隻在您的構造函數中直接初始化state，並在其他地方使用setState。

如果冗長是一個問題，你有沒有其他目的的構造不是初始化你state，你不需要props來初始化你state，只是聲明和初始化您的國家財產：

class MyComponent extends React.Component { 
    state = {} 
}

來源

2017-12-02 22:15:58

好的，這是有道理的。我讚賞徹底的答案。 – Chev

re：你的編輯 - >似乎在類屬性初始值設定項裏引用'this.props'確實有效。 'state = {showing：this.props.showing}'我剛剛測試過它。我很驚訝它雖然tbh。 – Chev

有趣！我仍然遠離這樣做。我的猜測是'this.props'可用的原因是因爲'super（）'構造函數被首先調用並將其添加到實例中，並且在'state'初始化過程中它可用。現在，如果最終創建自己的構造函數，屬性初始化的順序可能會改變，並且'props'可能不再在構造函數之外被初始化。儘可能保持您的代碼可預測。假設並訪問另一個屬性的構造函數屬性初始化聽起來有風險並容易出錯:) –

那麼根據DOCS：

一般情況下，我們建議使用構造函數（）代替。

它還提到：

這就是所謂的在服務器上呈現的唯一的生命週期掛鉤。

所以我想這可能是原因的一部分。

來源

2017-12-02 22:15:38

是否有人更喜歡使用React組件的構造函數而不是componentWillMount的原因？

回答

相關問題