快捷導(dǎo)航

React中的Hooks進(jìn)階理解教程

更新時(shí)間：2022年06月08日 10:43:25 作者：船長(zhǎng)在船上

這篇文章主要介紹了React中的Hooks進(jìn)階理解,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

Hooks進(jìn)階

useState - 回調(diào)函數(shù)的參數(shù)

使用場(chǎng)景

參數(shù)只會(huì)在組件的初始渲染中起作用，后續(xù)渲染時(shí)會(huì)被忽略。如果初始 state 需要通過計(jì)算才能獲得，則可以傳入一個(gè)函數(shù)，在函數(shù)中計(jì)算并返回初始的 state，此函數(shù)只在初始渲染時(shí)被調(diào)用

語法

const [name, setName] = useState(()=>{    // 編寫計(jì)算邏輯    return '計(jì)算之后的初始值'})

語法規(guī)則

回調(diào)函數(shù)return出去的值將作為 name 的初始值
回調(diào)函數(shù)中的邏輯只會(huì)在組件初始化的時(shí)候執(zhí)行一次

語法選擇

如果就是初始化一個(gè)普通的數(shù)據(jù) 直接使用 useState(普通數(shù)據(jù)) 即可
如果要初始化的數(shù)據(jù)無法直接得到需要通過計(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 App

useEffect - 清理副作用

使用場(chǎng)景

在組件被銷毀時(shí)，如果有些副作用操作需要被清理，就可以使用此語法，比如常見的定時(shí)器

語法及規(guī)則

useEffect(() => {   
    console.log('副作用函數(shù)執(zhí)行了')    
    // 副作用函數(shù)的執(zhí)行時(shí)機(jī)為: 在下一次副作用函數(shù)執(zhí)行之前執(zhí)行   
    return () => {      
        console.log('清理副作用的函數(shù)執(zhí)行了')      
        // 在這里寫清理副作用的代碼    
    }
})

定時(shí)器示例

添加副作用函數(shù)前：組件雖然已經(jīng)不顯示了，但是定時(shí)器依舊在運(yùn)行

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ù)后：一旦組件被銷毀，定時(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 App

useEffect - 發(fā)送網(wǎng)絡(luò)請(qǐng)求

使用場(chǎng)景

如何在useEffect中發(fā)送網(wǎng)絡(luò)請(qǐng)求，并且封裝同步 async await操作

語法要求

不可以直接在useEffect的回調(diào)函數(shù)外層直接包裹 await ，因?yàn)?strong>異步會(huì)導(dǎo)致清理函數(shù)無法立即返回

useEffect(async ()=>{    
    const res = await axios.get('http://geek.itheima.net/v1_0/channels')   
    console.log(res)
},[])

正確寫法

在內(nèi)部單獨(dú)定義一個(gè)函數(shù)，然后把這個(gè)函數(shù)包裝成同步

useEffect(()=>{   
    async function fetchData(){      
       const res = await axios.get('http://geek.itheima.net/v1_0/channels')                            console.log(res)   
    } 
},[])

useRef

本節(jié)任務(wù): 能夠掌握使用useRef獲取真實(shí)dom或組件實(shí)例的方法

使用場(chǎng)景

在函數(shù)組件中獲取真實(shí)的dom元素對(duì)象或者是組件對(duì)象

使用步驟

導(dǎo)入 useRef 函數(shù)
執(zhí)行 useRef 函數(shù)并傳入null，返回值為一個(gè)對(duì)象內(nèi)部有一個(gè)current屬性存放拿到的dom對(duì)象（組件實(shí)例）
通過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í)例

函數(shù)組件由于沒有實(shí)例，不能使用ref獲取，如果想獲取組件實(shí)例，必須是類組件

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

實(shí)現(xiàn)步驟

使用createContext 創(chuàng)建Context對(duì)象
在頂層組件通過Provider 提供數(shù)據(jù)
在底層組件通過useContext函數(shù)獲取數(shù)據(jù)

代碼實(shí)現(xiàn)

import { createContext, useContext } from 'react'
// 創(chuàng)建Context對(duì)象
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進(jìn)階理解的文章就介紹到這了,更多相關(guān)React中的Hooks內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: