區別：1、函數式定義無狀態元件不能存取生命週期方法，而es5和es6的方法定義的是有狀態的元件並且可以存取生命週期方法；2、es5方法中的函數this可以自動綁定，而es6方法中的函數this不能自動綁定，需要手動綁定。
本教學操作環境：Windows10系統、react17.0.1版、Dell G3電腦。
React推出後，出於不同的原因先後出現三種定義react元件的方式，殊途同歸；具體的三種方式：
函數式定義的無狀態元件
es5原生方式React.createClass定義的元件
es6形式的extends React.Component定義的元件
#1、無狀態函數式元件
它是為了創建純展示元件，這種組件只負責根據傳入的props來展示，不涉及到state狀態的操作
組件不會被實例化，整體渲染性能得到提升，不能訪問this對象，不能訪問生命週期的方法
2、ES5 原生方式React.createClass // RFC
#React.createClass會自綁定函數方法，導致不必要的效能開銷，增加程式碼過時的可能性。
3、E6繼承形式React.Component // RCC
目前極為推薦的創建有狀態元件的方式，最終會取代React.createClass形式；相對於React.createClass可以更好實現程式碼重複使用。
無狀態元件相對於後二者的差異
#與無狀態元件相比，React.createClass和React.Component都是建立有狀態的元件，這些元件是要被實例化的，並且可以存取元件的生命週期方法。
React.createClass****與React.Component區別
函數this自綁定
React.createClass所建立的元件，其每個成員函數的this都有React自動綁定，函數中的this會被正確設定。
React.Component建立的元件，其成員函數不會自動綁定this，需要開發者手動綁定，否則this不能取得目前元件實例物件。
元件屬性類型propTypes及其預設props屬性defaultProps配置不同
React.createClass在建立元件時，有關元件props的屬性類型及元件預設的屬性會作為元件實例的屬性來配置，其中defaultProps是使用getDefaultProps的方法來取得預設元件屬性的
React.Component在建立元件時配置這兩個對應資訊時，他們是作為元件類的屬性，不是組件實例的屬性，也就是所謂的類別的靜態屬性來配置的。
元件初始狀態state的配置不同
React.createClass所建立的元件，其狀態state是透過getInitialState方法來設定元件相關的狀態；
React.Component所建立的元件，其狀態state是在constructor中像初始化元件屬性一樣宣告的。
最後總結
只要有可能，盡量使用無狀態元件建立形式。
能用React.Component建立的元件的就盡量不用React.createClass形式建立元件，以增強復用性和提高效能。
推薦學習：《react影片教學》
以上是react三種定義元件方法有什麼差別的詳細內容。更多資訊請關注PHP中文網其他相關文章！
