日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

React中的Hooks進階理解教程_React

作者：船長在船上 ? 更新時間： 2022-08-01 編程語言

Hooks進階

useState - 回調函數的參數

使用場景

參數只會在組件的初始渲染中起作用，后續渲染時會被忽略。如果初始 state 需要通過計算才能獲得，則可以傳入一個函數，在函數中計算并返回初始的 state，此函數只在初始渲染時被調用

語法

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

語法規則

  • 回調函數return出去的值將作為?name?的初始值
  • 回調函數中的邏輯只會在組件初始化的時候執行一次

語法選擇

  • 如果就是初始化一個普通的數據 直接使用?useState(普通數據)?即可
  • 如果要初始化的數據無法直接得到需要通過計算才能獲取到，使用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 - 清理副作用

使用場景

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

語法及規則

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

定時器示例

添加副作用函數前：組件雖然已經不顯示了，但是定時器依舊在運行

import { useEffect, useState } from 'react'
function Foo() {  
    useEffect(() => {    
        setInterval(() => {     
            console.log('副作用函數執行了')    
        }, 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

添加清理副作用函數后：一旦組件被銷毀，定時器也被清理

import { useEffect, useState } from 'react'
 
function Foo() {  
    useEffect(() => {   
        const timerId = setInterval(() => {      
            console.log('副作用函數執行了')    
        }, 1000)   
        // 添加清理副租用函數    
        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 - 發送網絡請求

使用場景

如何在useEffect中發送網絡請求，并且封裝同步 async await操作

語法要求

不可以直接在useEffect的回調函數外層直接包裹 await ，因為異步會導致清理函數無法立即返回

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

正確寫法

在內部單獨定義一個函數，然后把這個函數包裝成同步

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

useRef

本節任務:?能夠掌握使用useRef獲取真實dom或組件實例的方法

使用場景

在函數組件中獲取真實的dom元素對象或者是組件對象

使用步驟

  • 導入?useRef?函數
  • 執行?useRef?函數并傳入null，返回值為一個對象 內部有一個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

獲取組件實例

函數組件由于沒有實例，不能使用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

實現步驟

  • 使用createContext?創建Context對象
  • 在頂層組件通過Provider?提供數據
  • 在底層組件通過useContext函數獲取數據

代碼實現

import { createContext, useContext } from 'react'
// 創建Context對象
const Context = createContext()
 
function Foo() {  
    return <div>Foo <Bar/></div>
}
 
function Bar() {  
    // 底層組件通過useContext函數獲取數據  
    const name = useContext(Context)  
    return <div>Bar {name}</div>
}
 
function App() {  
    return (    
        // 頂層組件通過Provider 提供數據    
        <Context.Provider value={'this is name'}>     
            <div><Foo/></div>    
        </Context.Provider>  
    )
}
 
export default App

原文鏈接：https://blog.csdn.net/SmartJunTao/article/details/125179427

欄目分類
最近更新