react的元件建立的方式

2021-09-24 09:25:18 字數 684 閱讀 7261

相對vue來說,react的元件的建立方式,不再安裝全域性和區域性劃分。大致分為:

函式式定義的無狀態元件es5原生方式react.createclass定義的元件

es6形式的extends react.component定義的元件

建立純展示元件,只負責根據傳入的props來展示,不涉及到要state狀態的操作,是乙個只帶有乙個render方法的元件類

建立的方式如下所示:

function hello()
ps:

使用function定義元件的時候需要乙個返回值,返回值為頁面顯示的內容

在新版本的react中function定義的元件也可以有區域性狀態和生命週期  對於區域性狀態的設定用的是

用function定義元件就不需要考慮this問題

通過usestate可以在function中定義乙個區域性狀態,接收乙個引數為狀態的預設值

返回值為兩個

第乙個為定義的狀態的名字

第二個為改變狀態的方法

優點:

react建立元件的方式

react建立元件的方式 工廠 無狀態 函式 最簡潔,推薦使用 function component es6語法,複雜元件,推薦使用 定義的元件類component必須繼承react的核心元件類component,extends是繼承的意思,render 方法是react最常用的方法 class c...

React的元件建立

在react中,元件分為兩種,類元件和函式式元件 簡單的共呢個使用函式式元件複雜功能使用類元件元件名首字母都必須大寫 使用es6建立的方式實現乙個元件 import react,from react export default class classcomponent extends compon...

react元件的建立

最近專案接觸react和rn,之前會一些vue和小程式,起初寫react是很難受的,尤其是jsx的寫法,不過2周過後感覺寫起來有點舒服了。這是早期react元件的建立方式,如果你看的文章是幾年之前寫的,很多都是這種方式 比如阮老師這篇react 入門例項教程 var likebutton react...