react三種定義組件方法是什么

這篇文章主要介紹“react三種定義組件方法是什么”，在日常操作中，相信很多人在react三種定義組件方法是什么問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”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三種定義組件方法是什么”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！