React 4 函式式元件

函式式元件中，沒有 state 和 生命週期，所以又被稱為 無狀態元件

在react16.7(beta測試)版本中，函式元件一直當作純渲染元件來使用

1.元件的第0個引數,是props,接收父級傳遞過來的資訊

2.元件中的 return(必須寫) 定義該元件要渲染的內容

3.沒有生命週期(只在類式元件中),沒有this,沒有state

import react from

'react'
;function()
function
child
(props)
<
/h1>
}export

優點：1.簡化元件邏輯

2.復用狀態邏輯

3.無需使用元件類編寫

常用hook:usestate,useeffect,useref

使用規則:

1.只在最頂層使用 hook

2.所有的 hook 必須 以 use開頭

3.只在react函式中呼叫hook

1.usestate

let [狀態的值,修改狀態的方法] = usestate(狀態的初始值)

import react,

from
'react'
;function()
);return
(}>變身<
/button>
<
/div>)}
export

類似於componentdidmount、componentdidupdate和componentwillunmount的集合體

import react,

from
'react'
function
children()
,);//元件解除安裝後觸發,需要解除安裝return
useeffect((
)=>},
);//任何資料更新時觸發,不設定第二個引數時,表示監聽所有資料
useeffect((
)=>);
return
(<
/h1>
}>+1
<
/button>
<
/div>)}
export
default children

使用：1.引入：import react, from 'react'

2.建立：let box = useref()

3.繫結：

4.使用：box

import react,

from
'react'
function
children()
);let message =
'哇哈哈哈哈'
return
(的繫結
>
<
/h1>
}>+1
<
/button>
'text' value=
onchange=
)=>}/
>
<
/h1>
<
/div>)}
export
default children

React 4課 react初識元件

npm init y npm i babel standalone d npm i react react dom d 安裝完成後我們開始學習下面知識 react初識元件title head div src node modules babel standalone babel.js script ...

後端開發學React 4 父子元件傳值

這裡將之前的註冊球隊應用進行拆分 拆為兩個模組 暫時去掉互相傳值呼叫 父模組 premierleagueregister.js子模組 premierleagueregisteritem.jsimport react,from react import premierleagueregisterite...

react 函式式元件使用 傳參

1 基於腳手架環境 2 function 首字母大寫 3 使用 首字母大寫 4 傳參 首字母大寫 鍵值對,變數需要 解析 5 函式式元件接收 function 首字母大寫 props 示例 index.js檔案 port react from react import reactdom from r...