React中的Hooks進階理解教程
更新時間：2022年06月08日 10:43:25 作者：船長在船上
這篇文章主要介紹了React中的Hooks進階理解,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
Hooks進階
useState - 回調(diào)函數(shù)的參數(shù)
使用場景
參數(shù)只會在組件的初始渲染中起作用，后續(xù)渲染時會被忽略。如果初始 state 需要通過計算才能獲得，則可以傳入一個函數(shù)，在函數(shù)中計算并返回初始的 state，此函數(shù)只在初始渲染時被調(diào)用
語法
const [name, setName] = useState(()=>{ // 編寫計算邏輯 return '計算之后的初始值'})
語法規(guī)則
- 回調(diào)函數(shù)return出去的值將作為
name的初始值 - 回調(diào)函數(shù)中的邏輯只會在組件初始化的時候執(zhí)行一次
語法選擇
- 如果就是初始化一個普通的數(shù)據(jù) 直接使用
useState(普通數(shù)據(jù))即可 - 如果要初始化的數(shù)據(jù)無法直接得到需要通過計算才能獲取到，使用
useState(()=>{})
需求
import { useState } from 'react'
function Counter(props) {
const [count, setCount] = useState(() => {
return props.count
})
return (
<div>
<button onClick={() => setCount(count + 1)}>{count}</button>
</div>
)
}
function App() {
return (
<>
<Counter count={10} />
<Counter count={20} />
</>
)
}
export default AppuseEffect - 清理副作用
使用場景
在組件被銷毀時，如果有些副作用操作需要被清理，就可以使用此語法，比如常見的定時器
語法及規(guī)則
useEffect(() => {
console.log('副作用函數(shù)執(zhí)行了')
// 副作用函數(shù)的執(zhí)行時機為: 在下一次副作用函數(shù)執(zhí)行之前執(zhí)行
return () => {
console.log('清理副作用的函數(shù)執(zhí)行了')
// 在這里寫清理副作用的代碼
}
})定時器示例
添加副作用函數(shù)前：組件雖然已經(jīng)不顯示了，但是定時器依舊在運行
import { useEffect, useState } from 'react'
function Foo() {
useEffect(() => {
setInterval(() => {
console.log('副作用函數(shù)執(zhí)行了')
}, 1000)
})
return <div>Foo</div>
}
function App() {
const [flag, setFlag] = useState(true)
return (
<>
<button onClick={() => setFlag(false)}>click</button>
{flag ? <Foo/> : null}
</>
)
}
export default App添加清理副作用函數(shù)后：一旦組件被銷毀，定時器也被清理
import { useEffect, useState } from 'react'
function Foo() {
useEffect(() => {
const timerId = setInterval(() => {
console.log('副作用函數(shù)執(zhí)行了')
}, 1000)
// 添加清理副租用函數(shù)
return () => {
clearInterval(timerId)
}
})
return <div>Foo</div>
}
function App() {
const [flag, setFlag] = useState(true)
return (
<>
<button onClick={() => setFlag(false)}>click</button>
{flag ? <Foo/> : null}
</>
)
}
export default AppuseEffect - 發(fā)送網(wǎng)絡(luò)請求
使用場景
如何在useEffect中發(fā)送網(wǎng)絡(luò)請求，并且封裝同步 async await操作
語法要求
不可以直接在useEffect的回調(diào)函數(shù)外層直接包裹 await ，因為異步會導致清理函數(shù)無法立即返回
useEffect(async ()=>{
const res = await axios.get('http://geek.itheima.net/v1_0/channels')
console.log(res)
},[])
正確寫法
在內(nèi)部單獨定義一個函數(shù)，然后把這個函數(shù)包裝成同步
useEffect(()=>{
async function fetchData(){
const res = await axios.get('http://geek.itheima.net/v1_0/channels') console.log(res)
}
},[])
useRef
本節(jié)任務(wù): 能夠掌握使用useRef獲取真實dom或組件實例的方法
使用場景
在函數(shù)組件中獲取真實的dom元素對象或者是組件對象
使用步驟
- 導入
useRef函數(shù) - 執(zhí)行
useRef函數(shù)并傳入null，返回值為一個對象 內(nèi)部有一個current屬性存放拿到的dom對象（組件實例） - 通過ref 綁定 要獲取的元素或者組件
獲取dom
import { useEffect, useRef } from 'react'
function App() {
const h1Ref = useRef(null)
useEffect(() => {
console.log(h1Ref)
},[])
return (
<div>
<h1 ref={ h1Ref }>this is h1</h1>
</div>
)
}
export default App
獲取組件實例
函數(shù)組件由于沒有實例，不能使用ref獲取，如果想獲取組件實例，必須是類組件
Demo.js
class Foo extends React.Component {
sayHi = () => {
console.log('say hi')
}
render(){
return <div>Foo</div>
}
}
export default Foo
App.js
import { useEffect, useRef } from 'react'
import Foo from './Demo'
function App() {
const h1Foo = useRef(null)
useEffect(() => {
console.log(h1Foo)
}, [])
return (
<div> <Foo ref={ h1Foo } /></div>
)
}
export default App
useContext
實現(xiàn)步驟
- 使用
createContext創(chuàng)建Context對象 - 在頂層組件通過
Provider提供數(shù)據(jù) - 在底層組件通過
useContext函數(shù)獲取數(shù)據(jù)
代碼實現(xiàn)
import { createContext, useContext } from 'react'
// 創(chuàng)建Context對象
const Context = createContext()
function Foo() {
return <div>Foo <Bar/></div>
}
function Bar() {
// 底層組件通過useContext函數(shù)獲取數(shù)據(jù)
const name = useContext(Context)
return <div>Bar {name}</div>
}
function App() {
return (
// 頂層組件通過Provider 提供數(shù)據(jù)
<Context.Provider value={'this is name'}>
<div><Foo/></div>
</Context.Provider>
)
}
export default App
到此這篇關(guān)于React中的Hooks進階理解的文章就介紹到這了,更多相關(guān)React中的Hooks內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于react中hook及使用的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-12-12
這篇文章主要介紹了React Store及store持久化的使用教程,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-01-01
從零開始搭建webpack+react開發(fā)環(huán)境的詳細步驟
這篇文章主要介紹了從零開始搭建webpack+react開發(fā)環(huán)境的詳細步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
webpack+react+antd腳手架優(yōu)化的方法
本篇文章主要介紹了webpack+react+antd腳手架優(yōu)化的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
React Native (簡稱RN)是Facebook于2015年4月開源的跨平臺移動應(yīng)用開發(fā)框架，是Facebook早先開源的JS框架 React 在原生移動應(yīng)用平臺的衍生產(chǎn)物，支持iOS和安卓兩大平臺。本文將介紹React Native與IOS端之間的交互。2021-06-06
這篇文章主要介紹了模塊化react-router配置方法詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-06-06
對于剛學前端的大家來說,對于React中的事件監(jiān)聽寫法有所疑問很正常，特別是React中箭頭函數(shù)使用這塊，下面這篇文章主要給大家深入的講解了關(guān)于React中何時使用箭頭函數(shù)的相關(guān)資料，需要的朋友可以參考借鑒，下面隨著小編來一起學習學習吧。2017-08-08
React如何解決fetch跨域請求時session失效問題
這篇文章主要給大家介紹了關(guān)于React如何解決fetch跨域請求時session失效問題的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2018-11-11
React 使用recharts實現(xiàn)散點地圖的示例代碼
這篇文章主要介紹了React 使用recharts實現(xiàn)散點地圖的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
Electron整合React使用搭建開發(fā)環(huán)境的步驟詳解
這篇文章主要介紹了Electron整合React使用搭建開發(fā)環(huán)境，本文分步驟給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值 ,需要的朋友可以參考下2020-06-06