react三種定義元件方法有什麼差別

區別：1、函數式定義無狀態元件不能存取生命週期方法，而es5和es6的方法定義的是有狀態的元件並且可以存取生命週期方法；2、es5方法中的函數this可以自動綁定，而es6方法中的函數this不能自動綁定，需要手動綁定。

本教學操作環境：Windows10系統、react17.0.1版、Dell G3電腦。

react三種定義元件方法有什麼差別

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中文網其他相關文章！