React元件的兩種建立方式

建立元素

const div = react.

createelement
('div'
,...
)

const

div=()
=>react.
createelement
('div'
,...
)

class

aextends
react.component
<
/h1>;}
}

import react from

"react"
;import reactdom from
"react-dom"
;import
'./styles.css'
;function()
class
sonextends
react.component
}add()
})}render()
<
/span>
son-n:
}>+1
<
/button>
<
/div>)}
}const rootelement = document.
getelementbyid
("root");
reactdom.
render
(>
, rootelement)

類元件使用state，設定：this.state=，修改：this.setstate(state=>return )；

setstate（非同步，等一會兒觸發ui更新prop）——資料不可變原則，每次設定prop，是把乙個新值給prop，而不是在原來的值上做修改。

當state比較複雜（含有多個prop）時，setstate修改乙個屬性，會自動將修改部分合併到state，僅限第一層全部屬性，第二層及以後的都不會被合併（置空）

functiona(

)<
/h1>
;}

import react from

"react"
;import reactdom from
"react-dom"
;import
'./styles.css'
;function()
const
son=
(props)
=>
<
/span>
son-n:
>+1
<
/button>
<
/div>)}
const rootelement = document.
getelementbyid
("root");
reactdom.
render
(>
, rootelement)

函式元件使用state，設定：[prop（讀）, setprop（寫）] = react.usestate(initvalue)，修改：setprop(newvalue)

setprop永遠不會改變prop！

對於state比較複雜的情況，只修改一處，其他處的屬性不會被自動合併（置空）。

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建立元件的兩種方式

react元件化開發 1.類元件 1 類元件需要繼承自react.component 2 類元件必須執行render函式，當render函式被呼叫時，它會檢查this.props和this.state的變化，並開始渲染 3 constructor是可選的 4 this.state維護的是元件內部的資...