區(qū)別：1、函數(shù)式定義無狀態(tài)組件不能訪問生命周期方法，而es5和es6的方法定義的是有狀態(tài)的組件并且可以訪問生命周期方法；2、es5方法中的函數(shù)this可以自動(dòng)綁定，而es6方法中的函數(shù)this不能自動(dòng)綁定，需要手動(dòng)綁定。

本教程操作環(huán)境：Windows10系統(tǒng)、react17.0.1版、Dell G3電腦。

react三種定義組件方法有什么區(qū)別

React推出后，出于不同的原因先后出現(xiàn)三種定義react組件的方式，殊途同歸；具體的三種方式：

• 函數(shù)式定義的無狀態(tài)組件

• es5原生方式React.createClass定義的組件

• es6形式的extends React.Component定義的組件

1、無狀態(tài)函數(shù)式組件

它是為了創(chuàng)建純展示組件，這種組件只負(fù)責(zé)根據(jù)傳入的props來展示，不涉及到state狀態(tài)的操作

組件不會被實(shí)例化，整體渲染性能得到提升，不能訪問this對象，不能訪問生命周期的方法

2、ES5 原生方式 React.createClass // RFC

React.createClass會自綁定函數(shù)方法，導(dǎo)致不必要的性能開銷，增加代碼過時(shí)的可能性。

3、E6繼承形式 React.Component // RCC

目前極為推薦的創(chuàng)建有狀態(tài)組件的方式，最終會取代React.createClass形式；相對于 React.createClass可以更好實(shí)現(xiàn)代碼復(fù)用。

無狀態(tài)組件相對于于后二者的區(qū)別

與無狀態(tài)組件相比，React.createClass和React.Component都是創(chuàng)建有狀態(tài)的組件，這些組件是要被實(shí)例化的，并且可以訪問組件的生命周期方法。

React.createClass****與React.Component區(qū)別

函數(shù)this自綁定

React.createClass創(chuàng)建的組件，其每一個(gè)成員函數(shù)的this都有React自動(dòng)綁定，函數(shù)中的this會被正確設(shè)置。

React.Component創(chuàng)建的組件，其成員函數(shù)不會自動(dòng)綁定this，需要開發(fā)者手動(dòng)綁定，否則this不能獲取當(dāng)前組件實(shí)例對象。

組件屬性類型propTypes及其默認(rèn)props屬性defaultProps配置不同

React.createClass在創(chuàng)建組件時(shí)，有關(guān)組件props的屬性類型及組件默認(rèn)的屬性會作為組件實(shí)例的屬性來配置，其中defaultProps是使用getDefaultProps的方法來獲取默認(rèn)組件屬性的

React.Component在創(chuàng)建組件時(shí)配置這兩個(gè)對應(yīng)信息時(shí)，他們是作為組件類的屬性，不是組件實(shí)例的屬性，也就是所謂的類的靜態(tài)屬性來配置的。

組件初始狀態(tài)state的配置不同

React.createClass創(chuàng)建的組件，其狀態(tài)state是通過getInitialState方法來配置組件相關(guān)的狀態(tài)；

React.Component創(chuàng)建的組件，其狀態(tài)state是在constructor中像初始化組件屬性一樣聲明的。

最后總結(jié)

只要有可能，盡量使用無狀態(tài)組件創(chuàng)建形式。

能用React.Component創(chuàng)建的組件的就盡量不用React.createClass形式創(chuàng)建組件，以增強(qiáng)復(fù)用性和提高性能。

推薦學(xué)習(xí)：《react視頻教程》