當您使用#extend時，React組件中發生了什麼？

Question

這裏發生了什麼，我知道你正在構建你自己的render方法，它將呈現h1的html。這個render方法被React.DOM調用以找出給虛擬dom的東西。對於componentDidMount等方法也是一樣的嗎？如果你使用了這些生命週期方法或者render，React會相應地調用它們以適應它們的代碼，但是如果創建其他函數，那麼這些函數將只是輔助函數，供你使用，對吧？

我想我只是想了解Component類的哪個部分正在被React.DOM使用，以及我正在構建哪個部分。看起來很奇怪，有些方法用於「配置」組件，而另一些則用作助手。 Component課程中的哪些代碼是React.DOM正在使用？是不是想找出什麼時候放棄東西的差異？

class Greeting extends React.Component { 
    render() { 
    return <h1>Hello, {this.props.name}</h1>; 
    } 
} 

Answer 1

以下是需要考慮的事項：在很久以前的很久以前，React和React-DOM都是相同的。 React完全針對webapps。所以我們可以使用h1,div,span,img，所有這些都只使用React。

現在讓我問你這個問題。假設他們想要使用React，並且使其不僅可以呈現給網頁的DOM，還可以呈現原生移動應用程序的不同組件？你會在那種情況下做什麼？

顯然，上述所有HTML DOM元素，如h1 s等都是完全無用的！ Android和iOS內部不知道這些是什麼。

所以合乎邏輯的解決方法是將其抽象出來。而不是讓這些DOM節點成爲React的固有部分，而是使其成爲React可以在任何地方渲染的東西！

您會發現，React引擎在React Native（移動開發）和標準的基於Web的React with React-DOM中的工作方式幾乎相同。生命週期方法，設計原則，和解，整個引擎是一樣的。由於React不是關於HTML或本地應用程序，而是關於從應用程序狀態到UI狀態的數據流範例。

---

那麼，React-DOM如何處理組件？沒有很多東西，真的。所有的差異，數據流等都由React處理。

React-DOM所做的是什麼知道如何將由React元素提供的數據呈現爲DOM節點。它知道如何更新它們，如何刪除它們，以及所有這些。你看，把所有這些能力作爲React核心的一部分現在都不會很理想，因爲React的目標是那些能力無用的平臺。他們只會膨脹包裝。

Answer 2

您需要提供的類中唯一的方法是渲染。正如你所提到的，其他組件生命週期方法在這些生命週期方法發揮作用時被調用。如果你不需要進入其他生命週期方法（組件只是返回一些基於提供給它的道具的標記），並且你的組件不需要它自己的狀態，那麼我強烈推薦使用無狀態的功能組件。通過陣營團隊提供的文檔是很好的說明這一點 -

https://facebook.github.io/react/docs/components-and-props.html

由於作爲「輔助方法」你提到遠，是的，你可以爲你在你的類需要定義儘可能多的方法。將一些更復雜的渲染邏輯分成更小更容易讀取代碼可讀性的函數是很常見的。