React Hooks 常用鉤子及基本原理

在以往的react16.8前，我們react元件建立方式基本包含兩種方式：類元件，純函式元件。 react 團隊希望元件最佳寫法應該是函式，而不是類。

然而常規的純函式元件有以下特點：

因存在如上特點，使得純函式元件只能做ui展示的功能，涉及到狀態的管理與切換就不得不用到類元件或這redux。但因為簡單的頁面也是用類元件，同時要繼承乙個react例項，使得**會顯得很重。

『hooks』單詞意思為：鉤子。

react hooks 意思是：元件盡量寫成純函式，如果需要外部功能和***，就用鉤子把外部**「鉤」進來。

react hooks常用鉤子有如下四種：

使用hooks 我們會發現沒有了繼承，渲染邏輯，生命週期等， **看起來更加的輕便簡潔了。

react 約定，鉤子一律使用 use 字首命名（自定義鉤子都命名為：u******）

usestate 狀態鉤子

官方示例：

import react,  from 'react'
const addcount = () =>  
return (
<>
count++
)}

原理：

// 我們實現乙個簡易版的usestate
let memoizedstates = [ ]  // 多個usestate 時需要使用陣列來存
let index = 0
function usestate (initialstate) 
return [memoizedstates[index++], setstate]
}

usecontext 共享狀態鉤子

該鉤子的作用是，在元件之間共享狀態。可以解決react逐層通過porps傳遞資料。

import react, from 'react'
const sharecontext= () => 我是a的子元件
)}const b =() => 
)}return (
)}export default sharecontext

usecontext（context）是針對 context (上下文) 提出的api。它接受react.createcontext()的返回結果作為引數（也就是context物件並返回最近的context）。使用usecontext將不再需要provider 和 consumer。當最近的context更新時，那麼使用該context的hook將會重新渲染。

usereducer(): action 鉤子

react本身不提供狀態管理。而usereducer() 提供了狀態管理。其基本原理是通過使用者在頁面中發起action, 從而通過reducer方法來改變state, 從而實現頁面和狀態的通訊。

import react, from 'react'
const myreducer= () => 
}else 
}const addcount = () => )
}const [state, dispatch] = usereducer(reducer, )
return (
<>
count++)}
export default myreducer

使用usereducer() 代替了redux的功能，但usereducer 無法提供中介軟體等功能。

useeffect(): ***鉤子

react常規開發中，我們習慣將一些處理***的操作，如：非同步請求等放在特定的生命週期中。 useeffect 則是為函式元件提供了***的鉤子。

useeffect() ：接收兩個引數，第乙個是進行的非同步操作，第二個是陣列，用來給出effect的依賴項。第二個引數（陣列）發生變化， ==useeffect()==就會執行。第二項不填時， useeffect（）會在每次元件渲染時執行。

import react,  from 'react'
const asyncpage = () => )
//  useeffect 類似compomnetdidmount 初始化會執行，更新時會執行
useeffect(() => )
},3000)
},[name])
return (
}    )
}const personpage = () =>
return (
<>
}>名字1
}>名字2
)}export default personpage

建立自己的hooks

有時候我們需要建立自己想要的hooks，來滿足更便捷的開發。

import react,  from 'react'
const useperson = (name) => )
useeffect(() => )
},2000)
},[name])
return [loading,person]
}const asyncpage = () => 
}      
)}const personpage = () =>
return (
}>名字1
}>名字2
)}export default personpage

上面自定義了乙個hooks, 它接受乙個字串，返回乙個陣列，陣列中的兩個狀態在使用useperson() 時，會根據傳入的不同反而返回不同的狀態。

react hooks 概要及未來

根據官方文件的說法：

鉤子技術介紹及函式使用

當你建立乙個鉤子時，windows系統會建立乙個資料結構，該結構包含了您建立的鉤子的資訊，安裝鉤子則是把該結構體插入到系統鉤子列表中去，注意新插入的放置到舊的前面。當指定的鉤子事件被觸發後，區域性鉤子只需要呼叫程序中的鉤子函式來預處理事件，全域性鉤子則需要把處理插入到其他位址空間，要做到這一點，就...

React Hooks 常用鉤子及基本原理

鉤子技術介紹及函式使用

鉤子技術介紹及函式使用

鉤子技術介紹及函式使用

相關推薦