React建立類元件的兩種方式

2021-10-03 11:30:51 字數 752 閱讀 9478

各個元件維護自己的狀態和 ui,當狀態變更,自動重新渲染整個元件。

基於這種方式的乙個直觀感受就是我們不再需要不厭其煩地來回查詢某個 dom 元素,然後操作 dom 去更改 ui。

react 大體包含下面這些概念:

元件

jsxvirtual dom

data flow

index.js

import react from

'react'

import

from

'react-dom'

render

(這是乙個類元件<

/p>

,document.

queryselector

('#root'

)//模板html檔案的id為root

)

index.js

import react from

'react'

import render from

'react-dom'

class

extends

react.component

(render()

)render

(>

,document.

queryselector

('root'

))

兩者是同樣的結果

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