在構造函數中定義狀態還是使用屬性初始值設定項更好？

據this通天文檔，使用ES6 +用正確的方式作出反應是這樣的初始組件：在構造函數中定義狀態還是使用屬性初始值設定項更好？

class Video extends React.Component { 
    static defaultProps = { 
    autoPlay: false, 
    maxLoops: 10, 
    } 
    static propTypes = { 
    autoPlay: React.PropTypes.bool.isRequired, 
    maxLoops: React.PropTypes.number.isRequired, 
    posterFrameSrc: React.PropTypes.string.isRequired, 
    videoSrc: React.PropTypes.string.isRequired, 
    } 
    state = { 
    loopsRemaining: this.props.maxLoops, 
    } 
}

但一些官方的例子，像丹·阿布拉莫夫自己React DnD模塊，使用ES6 +，但仍然定義內的狀態構造函數：

constructor(props) { 
    super(props); 
    this.moveCard = this.moveCard.bind(this); 
    this.state = { 
     // state stuff 
    } 
}

現在丹阿布拉莫夫，是一個顯著貢獻者反應，大概知道他可以在構造函數外定義狀態，但仍選擇只在構造函數中做到這一點。

所以我只是想知道哪種方式更好，爲什麼？

來源

2016-06-13 abustamam

沒有什麼不好或好，它們是等價的，它是一個優先事項 –

類屬性是一個**建議**。它們不是** ES7的一部分。請至少閱讀標籤說明：[tag：ecmascript-7]。 –

我相信這是個人喜好的問題。他們轉變成完全相同的東西。

來源

2016-06-13 11:18:08 ctrlplusb

嗯，整齊。感謝您的REPL！ – abustamam

丹的代碼實際上有個微妙的問題這就是爲什麼我建議使用初始化只要有可能。 React組件構造函數有兩個參數 - 道具和上下文。他沒有將它傳遞給父構造函數，並且很容易被其他需要的開發人員忽略。

~~有時你沒有選擇，比如當初始化器依賴構造函數參數時，所以只要記得將所有參數傳遞給父項。~~

嘗試了幾件事情之後，看起來像React沒有我想到的問題。你可以將你想要的任何東西傳遞給父構造函數，這樣可以。例如： -

class MyComponent extends React.Component { 
    constructor(props) { 
    super({}) 
    } 

    render() { 
    // this.props will still be set correctly here 
    } 
}

我還是建議使用初始化爲不具有調用父類的構造是一個思考少的事情。

來源

2016-06-14 02:41:43 Gunchars

我不知道React構造函數有兩個參數。什麼是上下文？ – abustamam

這是一種將數據傳遞給層次結構中較深的組件的方法，無需在所有中介中設置道具。我試了一些測試，看起來像React沒有我提到的問題。不過，點仍然有效。 – Gunchars

「你可以把你想要的任何東西傳遞給父構造函數，它會很好」 - NOPE。 https://facebook.github.io/react/docs/react-component.html#constructor以及：https：//facebook.github.io/react/docs/state-and-lifecycle.html – Tomasz

在構造函數中定義狀態還是使用屬性初始值設定項更好？

回答

相關問題