什么是Hooks
ref引用值
普通變量的改變一般是不好觸發函數組件的渲染的，如果想讓一般的數據也可以得到狀態的保存，可以使用ref
import { useState ,useRef} from 'react'function App() {const [count, setCount] = useState(0)let num = useRef(0)const handleClick = () => {setCount(count + 1)num.current++ //current,當前值console.log(num.current)}return (<div><button onClick={handleClick}>計數</button></div>)
}
export default App
那你就要問了：這和useState有什么區別？
更改時不會觸發渲染，例如這里，我們注釋掉setCount的語句：
import { useState ,useRef} from 'react'function App() {const [count, setCount] = useState(0)let num = useRef(0)const handleClick = () => {// setCount(count + 1)num.current++ //current,當前值console.log(num.current)}return (<div><button onClick={handleClick}>計數</button>{count},{num.current}</div>)
}
export default App
可以看出，num的值變了，但是并沒有渲染出來
所以我們一般不會把ref寫在jsx的結構里，但是可以在渲染過程之外隨意修改和更新current的值，不需要像useState一樣使用里面的方法修改的值才有效
如果我們在里面開啟定時器，在這里一秒觸發一次，如果單擊按鈕，num的值一秒增加一次，如果點擊按鈕多次，就會同時開啟多個定時器，數值就會漲的飛快
import { set } from 'lodash'
import { useState ,useRef} from 'react'function App() {const [count, setCount] = useState(0)let timer=nulllet num = useRef(0)const handleClick = () => {setCount(count + 1)setInterval(() => {console.log(123)}, 1000);}return (<div><button onClick={handleClick}>計數</button>{count},{num.current}</div>)
}
export default App
一般的解決辦法是每次新開一個定時器，就關掉舊定時器
import { set } from 'lodash'
import { useState ,useRef} from 'react'function App() {const [count, setCount] = useState(0)let timer=nullconst handleClick = () => {clearInterval(timer)timer=setInterval(() => {console.log(123)}, 1000);}return (<div><button onClick={handleClick}>計數</button>{count}</div>)
}
export default App
但是如果對整個函數重新調用（也就是啟用useState）就無法銷毀定時器了
因為整個函數重新調用，定時器是在上一次調用產生的，這一次刪不掉上一次的定時器，作用域不同
import { set } from 'lodash'
import { useState ,useRef} from 'react'function App() {const [count, setCount] = useState(0)let timer=nullconst handleClick = () => {setCount(count + 1)clearInterval(timer)timer=setInterval(() => {console.log(123)}, 1000);}return (<div><button onClick={handleClick}>計數</button>{count}</div>)
}
export default App
這時候就需要對timer做記憶，也就是使用ref，就算走了多次渲染函數，也可以銷毀
import { set } from 'lodash'
import { useState, useRef } from 'react'function App() {const [count, setCount] = useState(0)let timer = useRef(null)const handleClick = () => {setCount(count + 1)clearInterval(timer.current)timer.current = setInterval(() => {console.log(123)}, 1000)}return (<div><button onClick={handleClick}>計數</button>{count}</div>)
}
export default App
試了試，如果timer放全局定義是可以的，但是感覺這樣不利于函數的封裝性
import { useState, useRef } from 'react'let timer = null
function App() {const [count, setCount] = useState(0)const handleClick = () => {setCount(count + 1)clearInterval(timer)timer = setInterval(() => {console.log(123)}, 1000)}return (<div><button onClick={handleClick}>計數</button>{count}</div>)
}
export default App
通過ref操作原生dom
react里可以使用js的方法操作dom，例如什么querySelector這種css選擇器，但是更推薦我們使用React的方法操作dom
import { set } from 'lodash'
import { useState, useRef } from 'react'function App() {const myRef = useRef(null)const handleClick = () => {//通過ref操作原生domconsole.log(myRef.current.innerHTML)myRef.current.style.background = 'red'}return (<div><button onClick={handleClick}>計數</button><div ref={myRef}>hello React</div></div>)
}
export default App
這么寫是會報錯的，鉤子是按順序使用的，在循環里這么寫會報錯，所以這么寫不符合規范；而且也不建議把const myRef=useRef(null)寫在結構里
import { set } from 'lodash'
import { useState, useRef } from 'react'function App() {const list = [{ id: 1, text: 'aaa' },{ id: 2, text: 'bbb' },{ id: 3, text: 'ccc' },]const handleClick = () => {//通過ref操作原生domconsole.log(myRef.current.innerHTML)myRef.current.style.background = 'red'}return (<div>{list.map((item) => {const myRef = useRef(null)return <li key={item.id} ref={myRef}>{item.text}</li>})}</div>)
}export default App在循環操作里ref可以使用回調函數的寫法：
import { useState, useRef } from 'react'function App() {const list = [{ id: 1, text: 'aaa' },{ id: 2, text: 'bbb' },{ id: 3, text: 'ccc' },]return (<div><ul>{list.map((item) => {return (<likey={item.id}ref={(myRef) => {myRef.style.background = 'red'}}>{item.text}</li>)})}</ul></div>)
}export default App
但是我報了很多錯，說是
其實就算style在卸載的時候為空，加個邏輯判斷就好了
銘記勵志軒
import { useState, useRef } from 'react'function App() {const list = [{ id: 1, text: 'aaa' },{ id: 2, text: 'bbb' },{ id: 3, text: 'ccc' },]return (<div><ul>{list.map((item) => {return (<likey={item.id}ref={(myRef) => {if (myRef) {myRef.style.background = 'red'}}}>{item.text}</li>)})}</ul></div>)
}export default App
組件設置ref需要forwardRef進行轉發
forwardRef?是 React 提供的一個高階函數，用于將?ref?從父組件傳遞到子組件中的 DOM 元素或組件實例。它主要用于解決在函數組件中直接使用?ref?時無法訪問子組件內部 DOM 元素的問題。
在?MyInput?組件中，ref?被綁定到?<input>?元素，也就是把ref轉發到內部的input身上，然后=在?handleClick?函數中，ref.current?用于直接操作?<input>?元素：
import { useRef ,forwardRef} from 'react'const MyInput = forwardRef(function MyInput(props, ref) {return (<input type='text' ref={ref}></input>
)
})function App() {const ref = useRef(null)const handleClick = () => {ref.current.focus()ref.current.style.background='red'}return (<div><button onClick={handleClick}>點我</button><MyInput ref={ref} /></div>)
}export default App
useImperativeHandle自定義ref
你想要它其中兩個方法：
focus和scrollIntoView。為此，用單獨額外的 ref 來指向真實的瀏覽器 DOM。然后使用useImperativeHandle來暴露一個句柄，它只返回你想要父組件去調用的方法
import { useRef ,forwardRef,useImperativeHandle} from 'react'const MyInput = forwardRef(function MyInput(props, ref) {const inputRef=useRef(null)useImperativeHandle(ref,()=>{return{focus(){inputRef.current.focus()}}})return (<input type='text' ref={inputRef}></input>
)
})function App() {const ref = useRef(null)const handleClick = () => {
ref.current.focus()}return (<div><button onClick={handleClick}>點我</button><MyInput ref={ref} /></div>)
}export default App點擊按鈕獲取焦點
然后你就要問了（因為我也想問）：這個獲取焦點的操作為什么要寫成這樣？
這樣會更加靈活，不用完全寫在dom里，可以把你想要寫的功能放在useImperativeHandle的第二個參數里，也就是里面的回調函數，來實現你自己的功能、自定義的功能
相當于你自己寫了一個組件，可以像普通的組件使用，在里面添加屬性和屬性值，你也可以寫自己的組件實現的功能
例如這個button的屬性是他自己自帶的，我們寫的組件也可以寫一些自己帶的屬性，focus 和 scrollIntoView就是這個作用
<button onClick={handleClick}>點我</button>比如我們再添加一個獲取焦點以后背景變紅色的功能：
import { useRef ,forwardRef,useImperativeHandle} from 'react'const MyInput = forwardRef(function MyInput(props, ref) {const inputRef=useRef(null)useImperativeHandle(ref, () => {return {focus() {inputRef.current.focus()},focusAndStyle() {inputRef.current.focus()inputRef.current.style.background = 'red'}}})return (<input type='text' ref={inputRef}></input>
)
})function App() {const ref = useRef(null)const handleClick = () => {if (ref) {ref.current.focusAndStyle()}}return (<div><button onClick={handleClick}>點我</button><MyInput ref={ref} /></div>)
}export default App
純函數如何處理副作用
純函數之前提過，只關注輸入和輸出、兩次執行函數是否結果一樣axios
上面圖的意思是：組件是純函數，但是有時候組件不得不寫一些違背純函數的功能，例如Ajax調用、還有我們用ref操作dom等都是副作用
事件本身可以去除副作用
import { useRef, forwardRef, useImperativeHandle } from 'react'function App() {const ref = useRef(null)//副作用，不符合純函數的規范// setTimeout(() => {// ref.current.focus()// },1000)//副作用，但是符合純函數的規范，因為事件可以處理副作用const handleClick = () => {ref.current.focus()}return (<div><button onClick={handleClick}>點擊</button><input type='text' ref={ref} /></div>)
}export default App
但不是所有的副作用都可以用事件去除，而且有時候需要初始化副作用
所以在react里時間操作可以處理副作用，比如useEffect鉤子
import { useRef, forwardRef, useImperativeHandle, useEffect } from 'react'function App() {const ref = useRef(null)//副作用，不符合純函數的規范// setTimeout(() => {// ref.current.focus()// },1000)//副作用，但是符合純函數的規范，因為事件可以處理副作用// const handleClick = () => {// ref.current.focus()// }//可以在初始的時候進行副作用操作//useEffect觸發的時機是jsx渲染后觸發的，這樣就會消除副作用的影響useEffect(() => {if (ref) {ref.current.focus()}})return (<div><button onClick={handleClick}>點我</button><input type='text' ref={ref} /></div>)
}export default App
一刷新就自動獲取焦點
初次渲染和更新渲染，都會觸發useEffect(),因為每次渲染jsx以后，會觸發useEffect()，整個當前函數組件作用域的最后時機觸發的
import {useState,useEffect} from 'react'function App() {const [count, setCount] = useState(0) useEffect(() => {console.log(count)})const handleClick = () => {setCount(count + 1)}return (<div><button onClick={handleClick}>點我</button></div>)
}
export default App
執行順序：
組件首次渲染（調用?useState(0)，初始化?count?為?0，渲染組件返回jsx）->點擊按鈕（觸發handleClick函數調用useCount）->重新渲染組件->執行useEffect中的副作用函數
useEffect的依賴項使用
一個組件里可能有多個副作用，原則上來說多個副作用可以放在同一個useEffect里，但是比較雜
可以使用useEffect的依賴項進行拆解，因為useEffect本身就是個函數
我們可以使用多個useEffect來控制副作用
import {useState,useEffect} from 'react'function App() {const [count, setCount] = useState(0) const [msg, setMsg] = useState('hello React')useEffect(() => {console.log(msg)})useEffect(() => {console.log(count)})const handleClick = () => {setCount(count + 1)}return (<div><button onClick={handleClick}>點我</button></div>)
}
export default App兩個根一個一樣，也可以正常的更新、渲染
但是有時候根據不同的應用場景，有些副作用需要重新觸發，有的不需要，可以指定哪些可以觸發、哪些不可以。
添加useEffect的依賴項目
import {useState,useEffect} from 'react'function App() {const [count, setCount] = useState(0) const [msg, setMsg] = useState('hello React')useEffect(() => {console.log(msg)},[msg])useEffect(() => {console.log(count)},[count])//這就是依賴項const handleClick = () => {setCount(count + 1)}return (<div><button onClick={handleClick}>點我</button></div>)
}
export default App初始都觸發，更新以后，只有對應依賴項發生改變時才觸發，像這里msg沒改變所以不觸發
內部是怎么判別有沒有發生變化的？是通過Object.is()方法來判定是否改變
像這樣，依賴項是靜態的空數組，只有初始會觸發，以后發生改變都不會渲染他
不過盡量不要這么寫，盡量還是要把里面用到的狀態寫在依賴項里
除了狀態變量，還有props、計算變量等也可以寫在依賴項里
計算變量：是指通過其他變量或數據動態計算得出的值，而不是直接存儲的靜態值。計算變量通常用于根據某些條件或邏輯動態生成數據，而不是手動維護這些數據。
函數也可以做依賴項
函數也可能成為計算變量，所以也可以作為依賴項
但是會出現一個問題，Object.is()方法在判別函數的時候會看引用類型的地址，兩個函數是兩個函數，內存地址不一樣Object.is()就會判別為false
useCallBack可以修復這個問題，可以緩存函數，一般用于組件性能優化，其他情況不推薦使用，這里先不細說
最好的解決辦法是把函數定義在useEffect內部
import {useState,useEffect} from 'react'function App() {const [count, setCount] = useState(0) useEffect(() => {const foo = () => {console.log(count)}foo()},[count])//這就是依賴項return (<div></div>)
}
export default AppuseEffect清理操作
先寫一個簡易的關閉聊天室的功能
import {useState,useEffect} from 'react'function Chat() {return (<div>我是聊天室</div>)
}function App() {const [show,setShow] = useState(true)const handleClick = () => {setShow(false)}return (<div><button onClick={handleClick}>點我關閉聊天室</button>{show&&<Chat/>}</div>)
}
export default AppuseEffect可以在卸載組件的時候清理
import {useState,useEffect} from 'react'function Chat() {useEffect(() => { console.log('進入聊天室')//useEffect返回一個函數，這個函數會在組件卸載的時候執行return () => {console.log('離開聊天室')}})return (<div>我是聊天室</div>)
}function App() {const [show,setShow] = useState(true)const handleClick = () => {setShow(false)}return (<div><button onClick={handleClick}>點我關閉聊天室</button>{show&&<Chat/>}</div>)
}
export default App
增加了useEffect更新時的清理功能，清理功能是整個作用域的結束，而不是下一次作用域的開始
import {useState,useEffect} from 'react'function Chat({title}) {useEffect(() => { console.log('進入',title)//useEffect返回一個函數，這個函數會在組件卸載的時候執行return () => {console.log('離開',title)}},[title])return (<div>我是課堂</div>)
}function App() {const [show, setShow] = useState(true)const [title,setTitle]=useState('電磁場與電磁波')const handleClick = () => {setShow(false)}const handleChange = (e) => {setTitle(e.target.value)}return (<div><button onClick={handleClick}>點我退出課堂</button><select value={title} onChange={handleChange}><option value="電磁場與電磁波">電磁場與電磁波</option><option value="半導體物理">半導體物理</option></select>{show && <Chat title={title} />}</div>)
}
export default App
清理功能是很常見的需求，如果注釋掉清理的代碼就會變成這樣：
沒有退出只有進入，如果是嚴格模式其實會把函數執行兩邊，可以看到👇
實際上是違背正常邏輯的，如果加上清理功能，在嚴格模式執行的現象應該是
也就是說嚴格模式也可以起到提醒你需要自檢的作用
再舉一個栗子，如果我們要切換不同的課程，切換不同的課程耗時不同
import {useState,useEffect} from 'react'function fetchChat(title) {const delay = title==='電磁場與電磁波'?2000:1000return new Promise((resolve,reject)=>{setTimeout(() => {resolve([{id:1,text:title+'1'},{id:2,text:title+'2'},{id:3,text:title+'3'}])}, delay);})
}function Chat({ title }) {const [list,setList]=useState([])useEffect(() => { fetchChat(title).then((data) => {setList(data)
})return () => {}},[title])return (<div>{list.map((item)=>{return <li key={item.id}>{ item.text}</li>})}</div>)
}function App() {const [show, setShow] = useState(true)const [title,setTitle]=useState('電磁場與電磁波')const handleClick = () => {setShow(false)}const handleChange = (e) => {setTitle(e.target.value)}return (<div><button onClick={handleClick}>點我退出課堂</button><select value={title} onChange={handleChange}><option value="電磁場與電磁波">電磁場與電磁波</option><option value="半導體物理">半導體物理</option></select>{show && <Chat title={title} />}</div>)
}
export default App如果不添加useEffect，二者耗時不同，就會出現上一個還在加載，下一個作用域已經執行的問題
變成這樣
加入清理，就可以解決問題
import {useState,useEffect} from 'react'function fetchChat(title) {const delay = title==='電磁場與電磁波'?2000:1000return new Promise((resolve,reject)=>{setTimeout(() => {resolve([{id:1,text:title+'1'},{id:2,text:title+'2'},{id:3,text:title+'3'}])}, delay);})
}function Chat({ title }) {const [list, setList] = useState([])useEffect(() => { let ignore = falsefetchChat(title).then((data) => {if (!ignore) {setList(data)//上一次沒結束不能提前更新}
})return () => {ignore=true//做清理工作}},[title])return (<div>{list.map((item)=>{return <li key={item.id}>{ item.text}</li>})}</div>)
}function App() {const [show, setShow] = useState(true)const [title,setTitle]=useState('電磁場與電磁波')const handleClick = () => {setShow(false)}const handleChange = (e) => {setTitle(e.target.value)}return (<div><button onClick={handleClick}>點我退出課堂</button><select value={title} onChange={handleChange}><option value="電磁場與電磁波">電磁場與電磁波</option><option value="半導體物理">半導體物理</option></select>{show && <Chat title={title} />}</div>)
}
export default App
有很多人在遇到這樣的異步操作時會用async和await，但是React不支持你這么寫
你可以單獨寫一個async函數，然后把要執行的放進去：
import { useState, useEffect } from 'react';function fetchChat(title) {const delay = title === '電磁場與電磁波' ? 2000 : 1000;return new Promise((resolve, reject) => {setTimeout(() => {resolve([{ id: 1, text: title + '1' },{ id: 2, text: title + '2' },{ id: 3, text: title + '3' }]);}, delay);});
}function Chat({ title }) {const [list, setList] = useState([]);useEffect(() => {let ignore = false;const fetchData = async () => {const data = await fetchChat(title);if (!ignore) {setList(data); // 上一次沒結束不能提前更新}};fetchData();return () => {ignore = true; // 做清理工作};}, [title]);return (<div>{list.map((item) => (<li key={item.id}>{item.text}</li>))}</div>);
}function App() {const [show, setShow] = useState(true);const [title, setTitle] = useState('電磁場與電磁波');const handleClick = () => {setShow(false);};const handleChange = (e) => {setTitle(e.target.value);};return (<div><button onClick={handleClick}>點我退出課堂</button><select value={title} onChange={handleChange}><option value="電磁場與電磁波">電磁場與電磁波</option><option value="半導體物理">半導體物理</option></select>{show && <Chat title={title} />}</div>);
}export default App;useEffectEvent
實驗性版本提供的鉤子
如果你的狀態變量有多個，只想執行一個可以用實驗版本的useEffectEvent
介于六月份同學說實驗版本也用不了，所以不講了
創新--SELF-RAG)
