react建立元件的方式

2021-08-25 05:45:57 字數 760 閱讀 8998

react建立元件的方式:

(1)工廠(無狀態)函式(最簡潔,推薦使用)

function component()
(2)es6語法,(複雜元件,推薦使用)

//定義的元件類component必須繼承react的核心元件類component,extends是繼承的意思,render()方法是react最常用的方法

class component extends component

}共同點:在這兩種方法中,return的都是虛擬dom物件集合.

還有es5的老語法來建立元件,不過已經不推薦使用,在這裡就不再說了。

渲染元件標籤:

reactdom.render(, document.getelementbyid('root'));
注意點:

(1)用class定義的元件類必須首字母大寫

(2)虛擬dom元素必須只有乙個根元素

(3)虛擬dom元素必須有結束標籤

reactdom.render()渲染元件標籤的基本流程:

(1)react內部會建立元件例項物件

(2)元件例項物件呼叫render()方法,返回(即return)虛擬dom物件,reactdom.render()將虛擬dom物件轉化為真實dom物件

(3)將真實dom物件插入指定的頁面元素內部

react的元件建立的方式

相對vue來說,react的元件的建立方式,不再安裝全域性和區域性劃分。大致分為 函式式定義的無狀態元件es5原生方式react.createclass定義的元件 es6形式的extends react.component定義的元件 建立純展示元件,只負責根據傳入的props來展示,不涉及到要sta...

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...