簡單明了的 hooks 函數(shù)原理。
我們在開發(fā)react組件時秸应，用 useState 創(chuàng)建用戶的狀態(tài)虑凛，并且在組件重復(fù)渲染時，useState 總能記錄返回上一次的狀態(tài)软啼，而不是像常規(guī)的調(diào)用普通函數(shù)那樣桑谍，每一次都是新的一次的調(diào)用。
拋開鉤子祸挪，react組件渲染以及相關(guān)概念锣披，鉤子函數(shù)的描述如下：
A函數(shù)內(nèi)部調(diào)用B函數(shù)。B函數(shù)可以記錄由A函數(shù)修改的上一次的狀態(tài)贿条，而不是表現(xiàn)的像普通函數(shù)那樣雹仿，每一次都是一個全新的調(diào)用。雖然B函數(shù)每次都會因為A函數(shù)的調(diào)用而調(diào)用整以，但是B函數(shù)能記錄上一次的狀態(tài)胧辽。
A 函數(shù)就是組件。
A 函數(shù)調(diào)用就是組件渲染公黑。
B 函數(shù)就是 useState 鉤子函數(shù)邑商。
知道了鉤子函數(shù)的本質(zhì)，實現(xiàn)起來就很簡單了凡蚜。
function createState () {
let isCalled = false, value = null
return function (initValue) {
if (isCalled === false) {
// 記錄是否是第一次調(diào)用
value = initValue
isCalled = true
}
function setValue (newVal) {
// updateDom --> 在這個更新dom結(jié)構(gòu)人断。
value = newVal
}
return [value, setValue]
}
}
const useStateHook = createState()
function App2 () {
const [name, setName] = useStateHook('jack')
console.log(name)
setName(name + '!!')
}
App2() // jack
App2() // jack!!
App2() // jack!!!!
