建站
咨詢
售后
建站咨詢
新聞中心
React Hooks就是用函數(shù)的形式代替原來的繼承類的形式，并且使用預(yù)函數(shù)的形式管理state，有Hooks可以不再使用類的形式定義組件了
成都創(chuàng)新互聯(lián)服務(wù)項(xiàng)目包括麻山網(wǎng)站建設(shè)、麻山網(wǎng)站制作、麻山網(wǎng)頁(yè)制作以及麻山網(wǎng)絡(luò)營(yíng)銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，麻山網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到麻山省份的部分城市，未來相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！
1. React Hooks VS 純函數(shù)
React Hook 說白了就是 React V18.6 新增的一些 API，API的本質(zhì)就是提供某種功能的函數(shù)接口。因此，React Hooks 就是一些函數(shù)，但是 React Hooks 不是純函數(shù)。
什么是純函數(shù)呢？就是此函數(shù)在相同的輸入值時(shí)，需產(chǎn)生相同的輸出，并且此函數(shù)不能影響到外面的數(shù)據(jù)。 簡(jiǎn)單理解就是函數(shù)里面不能用到在外面定義的變量，因?yàn)槿绻玫搅送饷娑x的變量，當(dāng)外面的變量改變時(shí)會(huì)影響函數(shù)內(nèi)部的計(jì)算，函數(shù)也會(huì)影響到外面的變量。
對(duì)于 React Hooks 提供的函數(shù) API，恰恰就不是純函數(shù)。來看一個(gè) useState 的使用語(yǔ)句 const [count, setCount] = useState(0)，使用 useState 函數(shù)得到的結(jié)果并不是全都一樣的，因?yàn)槿绻?useState(0) 每次得到的結(jié)果都是一樣的，那 count 值就永遠(yuǎn)不會(huì)改變了，那 count 所在的頁(yè)面就永遠(yuǎn)不會(huì)改變，和我們看到的結(jié)果就不一樣了。由此可知，React Hooks 都不是純函數(shù)，也就是說 Hooks 用到了函數(shù)外的變量。
那么是什么特性讓 React Hooks 一定不能是純函數(shù)呢？實(shí)際上是 React 框架和函數(shù)組件本身決定的。我們知道，React 頁(yè)面渲染的原理就是通過每次 render 得到新的虛擬 DOM ，然后進(jìn)行 DOM Diff 來渲染頁(yè)面。而 React 的函數(shù)組件是通過執(zhí)行整個(gè)函數(shù)得到一個(gè)虛擬 DOM。因此在每次頁(yè)面渲染 render 時(shí)，在函數(shù)組件內(nèi)部的所有語(yǔ)句都會(huì)重新執(zhí)行一次。如果在函數(shù)組件內(nèi)部使用的 React Hooks 是純函數(shù)的話，就不會(huì)在每次渲染后得到不同的虛擬 DOM 了。
React 規(guī)定： 所有 React 組件都必須是純函數(shù)，并禁止修改其自身 props 。
因此在 React V16.8 之前 React Hooks 還沒出來的時(shí)候，函數(shù)組件因?yàn)槭羌兒瘮?shù)，只能返回一個(gè)固定的虛擬 DOM，不能包含狀態(tài)，也不支持生命周期方法。因此，當(dāng)時(shí)僅僅是支持函數(shù)組件，但函數(shù)組件相比于類組件限制太多，函數(shù)組件無法取代類組件，也沒類組件好用。
React 希望組件是簡(jiǎn)單的而不是復(fù)雜的，React 認(rèn)為組件的最佳寫法應(yīng)該是函數(shù)，而不是類。因此 React 就新增了 React Hooks，Hook 就是鉤子的意思，是 React 提供給函數(shù)組件在需要外部功能和數(shù)據(jù)狀態(tài)時(shí)將其 “鉤” 進(jìn)去，從而完善函數(shù)組件，使其能完全代替類組件。
React 的函數(shù)組件只能是純函數(shù)，那么每次事件發(fā)生時(shí)重新 render 函數(shù)組件時(shí)得到不同的虛擬 DOM 的事就完全交給了 React Hooks，那么 React Hooks 是如何做到的呢？下面就手動(dòng)實(shí)現(xiàn)一個(gè) useState，useState 的具體細(xì)節(jié)肯定不是這樣的，但原理和思路是一樣的。
2. 簡(jiǎn)單 myUseState
React.useState 的第一次執(zhí)行是將初始值賦予給一個(gè) _state，之后的每次重新 render 時(shí)就是讀取 _state 的值。[state, setState] 中的 setState 做的事就是改變 _state 的值，然后重新渲染頁(yè)面。 根據(jù)這個(gè)原理實(shí)現(xiàn) myUseState 函數(shù)如下：
import React from 'react';
import ReactDOM from 'react-dom';
let _state
function myUseState(initialValue){
if(_state === undefined){
_state = initialValue
}
const setState = (newValue)=>{
_state = newValue
render()
}
return [_state, setState]
}
function render(){
ReactDOM.render(,document.getElementById('root'));
}
function App(){
const [n, setN] = myUseState(0)
return (
n: {n}
onClick={() => setN(n+1)}+1
)
}
ReactDOM.render(,document.getElementById('root'));
3. 改進(jìn) myUseState
上述實(shí)現(xiàn)的 myUseState 存在 bug，當(dāng)在函數(shù)組件內(nèi)用到兩次 myUseState 時(shí)就會(huì)出現(xiàn)問題了，二者共用一個(gè) _state 會(huì)出現(xiàn)混亂。 因此需要將上述實(shí)現(xiàn)進(jìn)行改進(jìn)，改進(jìn)的思路就是將 _state 定義為一個(gè)數(shù)據(jù)或者是對(duì)象，由于我們?cè)诤瘮?shù)使用時(shí)只傳了一個(gè)數(shù)值，無法確定鍵值，因此只能使用數(shù)據(jù)。改進(jìn)如下：
import React from 'react';
import ReactDOM from 'react-dom';
let _state = []
let index = 0
function myUseState(initialValue){
const currentIndex = index
if(_state[currentIndex] === undefined){
_state[currentIndex] = initialValue
}
const setState = (newValue)=>{
_state[currentIndex] = newValue
render()
}
index++
return [_state[currentIndex], setState]
}
function render(){
index = 0
ReactDOM.render(,document.getElementById('root'));
}
function App(){
const [n, setN] = myUseState(0)
const [m, setM] = myUseState(0)
return (
n: {n}
onClick={() => setN(n+1)}+1
m: {m}
onClick={() => setM(m+1)}+1
)
}
ReactDOM.render(,document.getElementById('root'));
4. 實(shí)現(xiàn)原理引發(fā)的 Hooks 規(guī)則
上述實(shí)現(xiàn)的 myUseState 肯定不是 React.useState 的具體實(shí)現(xiàn)代碼，但實(shí)現(xiàn)原理是一致的。myUseState 函數(shù)封裝了函數(shù)組件內(nèi)的數(shù)據(jù)狀態(tài)，并對(duì)該狀態(tài)進(jìn)行管理，以暴露出相關(guān)的操作接口的方式提供給函數(shù)組件使用。 這樣一來，函數(shù)組件就和其數(shù)據(jù)狀態(tài)分離了，函數(shù)組件只負(fù)責(zé)返回虛擬 DOM 本身就可以了，對(duì)于數(shù)據(jù)狀態(tài)的管理完全交給其 “鉤” 住的 React.useState Hook 就可以了。
從上述的實(shí)現(xiàn)思路可以發(fā)現(xiàn)，React Hooks 的實(shí)現(xiàn)其實(shí)是基于 全局變量 和 閉包 原理實(shí)現(xiàn)的特殊函數(shù)。
但是，正是因?yàn)檫@樣的實(shí)現(xiàn)方式，限制了 React Hooks 的使用必須是 只在頂層調(diào)用Hook，意思就是說 不要在循環(huán)，條件或嵌套函數(shù)中調(diào)用 Hook，如果在 if 條件句中使用了 Hook， 導(dǎo)致組件每次渲染生成時(shí) React.useState 語(yǔ)句的執(zhí)行次數(shù)不對(duì)，就會(huì)打亂 index 的計(jì)數(shù)，從而導(dǎo)致數(shù)據(jù)維護(hù)的錯(cuò)誤。
上述的實(shí)現(xiàn)原理依賴于 index 的正確計(jì)數(shù)，因此 React 依賴于調(diào)用 Hooks 的順序。
以上就是詳解React Hooks是如何工作的的詳細(xì)內(nèi)容。
分享名稱：ReactHooks工作流程
鏈接URL：http://www.5511xx.com/article/coegjjd.html
