useEffect補充與自定義hooks

2021-10-23 09:04:03 字數 2026 閱讀 2428

需求:通過useeffect獲取到監聽值的舊值與新值

準備一組資料可以被監聽到

import react,

from

'react'

;function

child

(props)

onchange=

)=>}/

>

}export

default child

通過useref實現繫結

import react,

from

'react'

;function

child

(props)

,[txt]);

return

type=

"text"

value=

onchange=

)=>}/

>

}export

default child

通過useeffect實現監聽

import react,

from

'react'

;function

child

(props)

,[txt]);

return

type=

"text"

value=

onchange=

)=>}/

>

}export

default child

瀏覽器反饋

我們這個時候已經可以獲取到值了,但是每次我們修改完txt,也就是我們的新值出現後,我們的txtref.current也就是老值是不會發生改變的

瀏覽器反饋

4. 所以我們還需要最後一步,將新值輸出後,儲存在老值內,已達成下一次輸出時老值是上乙個新值新值是修改後的值

...

useeffect((

)=>

,[txt]);

...

瀏覽器反饋

只在頂層調⽤hooks hooks的調⽤,盡量只在頂層作⽤域進行呼叫不要在迴圈,條件或者是巢狀函式中調⽤hook,否則可能會⽆ ,確保每次元件渲染時都以相同的順序調⽤hook。

只在函式元件調⽤hooks,react hooks目前只支援函式元件,所以⼤大家別在class元件或者普通的函式⾥面調⽤hook鉤⼦函式

react hooks的應用場景在函式元件,自定義hooks

在自定義hooks中還有一條規則,就是定義時,名字必須以use開頭

案例

//自定義hooks元件

import react,

from

'react'

;function

usetitle

(title)

export

;// 顯示頁面

import react,

from

'react'

;import

from

'./hooks'

function()

)=>}/

>

}export

hql補充 自定義函式操作

檢視資料庫 show create database hive test 檢視表show create table page view 表結構desc formatted page view 載入資料到表 load data local inpath home test hive 2.3.7 dat...

SpringMVC自定義日誌框架 待補充

spring預設使用自帶的commons logging門面框架,此框架會搜尋具體的日誌實現類,原始碼如下 public abstract class logfactory catch classnotfoundexception ex1 catch classnotfoundexception e...

c Attribute與自定義

using system using system.reflection public class demo public class myfieldattributes static void displayfield object obj,fieldinfo f attributes f.nam...