React建立元件的兩種常見方式

1.函式式定義(無狀態元件)

import react from 'react';

function mycomponent(props)
export default mycomponent;

import react,  from 'react';

class myconponent extends component
render() 
}export default myconponent;

函式式定義元件沒有state和生命週期函式且不能訪問this，而類定義中這些都可以有。

注意：無論使用哪種方式建立元件，元件名稱的首字母都必須大小，因為我們寫的是jsx，最後是需要通過babel轉義成es5的語法的，而babel在進行轉義jsx語法時，是呼叫了 react.createelement() 這個方法，這個方法需要接收三個引數：type, config, children。第乙個引數宣告了這個元素的型別，當建立自定義元件時沒有首字母小寫時， 而 babel 在轉義時把它當成了乙個字串 傳遞進去了；當首字母大寫時，babel 在轉義時傳遞了乙個變數進去。問題就在這裡，如果傳遞的是乙個字串，那麼在建立虛擬dom物件時，react會認為這是乙個原生的html標籤，但是這顯然不是乙個原生的html標籤，因此去建立乙個不存在的標籤肯定是會報錯的。如果首字母大寫，那麼就會當成乙個變數傳遞進去，這個時候react會知道這是乙個自定義元件，因此他就不會報錯了。

React 元件的兩種建立方式

1 使用函式建立元件 函式元件 使用js的函式 或箭頭函式 建立的元件 約定1 函式名稱必須以大寫字母開頭 約定2 函式元件必須有返回值，表示該元件的結構 如果返回值為null，表示不渲染任何內容 const component 哈羅啊 div 或者function component reactd...

React建立元件的兩種方式

function hello props class animal,作用是例項化物件時先執行建構函式的 this.name name this代表的是例項物件 this.age age say ji1 888 例項屬性 static 男 靜態屬性 static class cat extends a...

React元件的兩種建立方式

建立元素 const div react.createelement div 建立元件 const div react.createelement div 元件可以理解成，乙個建立元素集合的模板，當前我可能不需要它生成什麼東西，但我呼叫時，它能幫我生成我要的東西。在react中，元件的建立方式有兩種...