這篇文章主要介紹“react三種定義組件方法是什么”，在日常操作中，相信很多人在react三種定義組件方法是什么問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”react三種定義組件方法是什么”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

創(chuàng)新互聯(lián)業(yè)務(wù)包括：成品網(wǎng)站、企業(yè)產(chǎn)品展示型網(wǎng)站建設(shè)、品牌網(wǎng)站制作、電子商務(wù)型網(wǎng)站建設(shè)、成都外貿(mào)網(wǎng)站制作(多語(yǔ)言)、商城網(wǎng)站定制開(kāi)發(fā)、按需定制設(shè)計(jì)、成都營(yíng)銷網(wǎng)站建設(shè)等。效率優(yōu)先，品質(zhì)保證，用心服務(wù)是我們的核心價(jià)值觀，我們將繼續(xù)以良好的信譽(yù)為基礎(chǔ)，秉承穩(wěn)固與發(fā)展、求實(shí)與創(chuàng)新的精神，為客戶提供更全面、更優(yōu)質(zhì)的互聯(lián)網(wǎng)服務(wù)！

區(qū)別：1、函數(shù)式定義無(wú)狀態(tài)組件不能訪問(wèn)生命周期方法，而es5和es6的方法定義的是有狀態(tài)的組件并且可以訪問(wèn)生命周期方法；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ù)式定義的無(wú)狀態(tài)組件

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

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

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

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

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

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

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

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

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

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

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

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

函數(shù)this自綁定

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

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

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

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

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

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

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

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

最后總結(jié)

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

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

到此，關(guān)于“react三種定義組件方法是什么”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！