教你react中如何理解usestate、useEffect副作用、useRef標(biāo)識(shí)和useContext
1.usestate
1.1一般使用
注意：useState 的初始值(參數(shù))只會(huì)在組件第一次渲染時(shí)生效。也就是說(shuō)，以后的每次渲染，useState 獲取到都是最新的狀態(tài)值，React 組件會(huì)記住每次最新的狀態(tài)值。
其實(shí)與vue中的ref和reactive一樣，通過(guò)useState獲取到的數(shù)據(jù)可以實(shí)現(xiàn)組件視圖實(shí)時(shí)交互，而普通定義的數(shù)據(jù)僅僅在業(yè)務(wù)中使用。
使用規(guī)則：
1.每個(gè)useState 函數(shù)可以執(zhí)行多次，每次執(zhí)行互相獨(dú)立，每調(diào)用一次為函數(shù)組件提供一個(gè)狀態(tài) 。
2. 只能出現(xiàn)在函數(shù)組件或者其他hook函數(shù)中 。
3. 不能嵌套在if/for/其它函數(shù)中（react按照hooks的調(diào)用順序識(shí)別每一個(gè)hook）。
import { useState } from 'react'
function App() {
const [count, setCount] = useState(0)
// 在這里可以進(jìn)行打印測(cè)試
console.log(count)
return (
<button onClick={() => { setCount(count + 1) }}>{count}</button>
)
}
export default App初始值為泛型時(shí)：
interface LayerCheckbox {
name: string;
checked?: boolean;
value?: string[];
disabled?: boolean;
children?: LayerCheckbox[];
indeterminate?: boolean;
key: string; // gis layer key
relevance?: string;
}
const [checkboxArr, setCheckboxArr] = useState<LayerCheckbox[]>([
name: '高清影像圖',
checked: true,
key: LayerEnum.TILES_MAP,
},
{
name: '農(nóng)場(chǎng)地塊信息',
checked: true,
key: LayerEnum.FIELD_AREA,
},
{
name: '灌溉設(shè)備圖層',
checked: true,
key: LayerEnum.DRAIN_IRRIGATE,
},
{
name: '農(nóng)情設(shè)備圖層',
checked: true,
key: LayerEnum.CONDITION_DEVICE,
},
]);1.2 useState回調(diào)函數(shù)作為參數(shù)
場(chǎng)景: useState初始值在回調(diào)函數(shù)里通過(guò)計(jì)算處理等函數(shù)操作得到
const [name, setName] = useState(()=>{
// 編寫(xiě)計(jì)算邏輯
//return '計(jì)算之后的初始值'
})2.useEffect副作用
2.1 useEffect副作用及其使用
副作用是相對(duì)于主作用來(lái)說(shuō)的，一個(gè)函數(shù)除了主作用，其他的作用就是副作用。對(duì)于 React 組件來(lái)說(shuō)，主作用就是根據(jù)數(shù)據(jù)（state/props）渲染 UI，除此之外都是副作用（比如，手動(dòng)修改 DOM）。
常見(jiàn)副作用：
1.數(shù)據(jù)請(qǐng)求 ajax發(fā)送
2.手動(dòng)修改dom
3.localstorage操作
useEffect函數(shù)的作用就是為react函數(shù)組件提供副作用處理的！
代碼如下（示例）：
import { useEffect, useState } from 'react'
function App() {
const [count, setCount] = useState(0)
useEffect(()=>{
// dom操作
document.title = `當(dāng)前已點(diǎn)擊了${count}次`
})
return (
<button onClick={() => { setCount(count + 1) }}>{count}</button>
)
}
export default App使用的三種場(chǎng)景：
1.不添加依賴項(xiàng)
組件首次渲染執(zhí)行一次，以及不管是哪個(gè)狀態(tài)更改引起組件更新時(shí)都會(huì)重新執(zhí)行。
1）組件初始渲染
2）組件更新 （不管是哪個(gè)狀態(tài)引起的更新）
useEffect(()=>{
console.log('副作用執(zhí)行了')
})2.添加空數(shù)組
組件只在首次渲染時(shí)執(zhí)行一次
useEffect(()=>{
console.log('副作用執(zhí)行了')
},[])
})3.添加特定依賴項(xiàng)
副作用函數(shù)在首次渲染時(shí)執(zhí)行，在依賴項(xiàng)（count）發(fā)生變化時(shí)重新執(zhí)行。
function App() {
const [count, setCount] = useState(0)
const [name, setName] = useState('zs')
useEffect(() => {
console.log('副作用執(zhí)行了')
}, [count])
return (
<>
<button onClick={() => { setCount(count + 1) }}>{count}</button>
<button onClick={() => { setName('cp') }}>{name}</button>
</>
)
}只要是 useEffect 回調(diào)函數(shù)中用到的數(shù)據(jù)（比如，count）就是依賴數(shù)據(jù)，就應(yīng)該出現(xiàn)在依賴項(xiàng)數(shù)組[count]中，如果不添加依賴項(xiàng)就會(huì)有bug出現(xiàn)。
2.2 useEffect清理副作用
如果想要清理副作用 可以在副作用函數(shù)中的末尾return一個(gè)新的函數(shù)，在新的函數(shù)中編寫(xiě)清理副作用的邏輯。
注意執(zhí)行時(shí)機(jī)為：
1.組件卸載時(shí)自動(dòng)執(zhí)行
2.組件更新時(shí)（count一變時(shí)），下一個(gè)useEffect副作用函數(shù)執(zhí)行之前自動(dòng)執(zhí)行
import { useEffect, useState } from "react"
const App = () => {
const [count, setCount] = useState(0)
//頁(yè)面初始化就執(zhí)行一次，執(zhí)行后count+1，依賴count變化，又來(lái)執(zhí)行一次，此刻組件更新了，因此會(huì)清除副作用
useEffect(() => {
const timerId = setInterval(() => {
setCount(count + 1)
}, 1000)
return () => {
// 用來(lái)清理副作用的事情
clearInterval(timerId)
}
}, [count])
return (
<div>
{count}
</div>
)
}
export default App2.3 useEffect發(fā)送網(wǎng)絡(luò)請(qǐng)求
在內(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)
}
},[])3.自定義hook函數(shù)
useState與useEffect都屬于hook中的函數(shù)，那么也可以自己定義hook函數(shù)，利用useState和useEffect來(lái)實(shí)現(xiàn)自定義的hook函數(shù)，以便在其他地方調(diào)用。如：自定義一個(gè)hook函數(shù)，實(shí)現(xiàn)獲取滾動(dòng)距離Y。在其他地方調(diào)用此函數(shù)，就可以拿到這個(gè)y進(jìn)行渲染或其他處理操作。
//自定義hook
import { useState } from "react"
export function useWindowScroll () {
const [y, setY] = useState(0)
window.addEventListener('scroll', () => {
const h = document.documentElement.scrollTop
setY(h)
})
return [y]
//調(diào)用區(qū)
import {useWindowScroll } from './hoooks/useWindowScroll '
const [y] = useWindowScroll ()
return(
<div> {y} </div>
)
自定義一個(gè)hook函數(shù)，監(jiān)聽(tīng)依賴項(xiàng)（messge），實(shí)現(xiàn)一個(gè)功能（存儲(chǔ)帶本地）：
//hook函數(shù)
import { useEffect, useState } from 'react'
//message可以通過(guò)自定義傳入默認(rèn)初始值
export function useLocalStorage (key, defaultValue) {
const [message, setMessage] = useState(defaultValue)
// 每次只要message變化 就會(huì)自動(dòng)同步到本地ls
useEffect(() => {
window.localStorage.setItem(key, message)
}, [message, key])
return [message, setMessage]
}
//調(diào)用區(qū)
import {useLocalStorage } from './hoooks/useLocalStorage '
const [messge,setMessage] = useLocalStorage ('hook-key','阿飛')
//初始值是 阿飛，5秒鐘后變成 cp
setTimeout(()=>{
setMessage('cp')
},5000)4.useRef的使用
useRef能在函數(shù)組件中獲取真實(shí)的dom元素對(duì)象或者是組件對(duì)象。
首先執(zhí)行 useRef 函數(shù)并傳入null，返回值為一個(gè)對(duì)象內(nèi)部有一個(gè)current屬性存放拿到的dom對(duì)象（組件實(shí)例），在使用時(shí)通過(guò)ref 綁定 要獲取的元素或者組件。
1）獲取dom <dom名 ref={ h1Ref }>
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 App2）獲取組件實(shí)例 <組件名 ref={ h1Foo }>
//類(lèi)組件
class Foo extends React.Component {
sayHi = () => {
console.log('say hi')
}
render(){
return <div>Foo</div>
}
}
export default Foo
//獲取組件實(shí)例
import { useEffect, useRef } from 'react'
import Foo from './Foo'
function App() {
const h1Foo = useRef(null)
useEffect(() => {
console.log(h1Foo)
}, [])
return (
<div> <Foo ref={ h1Foo } /></div>
)
}
export default App5.useContext的使用
實(shí)現(xiàn)步驟：
1.使用createContext 創(chuàng)建Context對(duì)象
2.在頂層組件通過(guò)Provider 提供數(shù)據(jù)
3.在底層組件通過(guò)useContext函數(shù)獲取數(shù)據(jù)
import { createContext, useContext } from 'react'
// 創(chuàng)建Context對(duì)象
const Context = createContext()
function A() {
return <div>A中里面包裹C組件<C/></div>
}
function C() {
// 底層組件通過(guò)useContext函數(shù)獲取數(shù)據(jù)
const name = useContext(Context)
return <div>C中{name}</div>
}
function App() {
return (
// 頂層組件通過(guò)Provider 提供數(shù)據(jù)
<Context.Provider value={'this is name'}>
<div><Foo/></div>
</Context.Provider>
)
}
export default App一樣地，在頂層組件中Context.Provider這個(gè)value，然后在C組件中消費(fèi)接受數(shù)據(jù)，由于A組件下面包裹著C組件，當(dāng)A組件中執(zhí)行C組件時(shí)，可以看到里面可以拿到value數(shù)據(jù)。
實(shí)際還是在“被包裹的組件（C）”中消費(fèi)接收數(shù)據(jù)。
不論中間隔著幾層，誰(shuí)發(fā)數(shù)據(jù)誰(shuí)provider，誰(shuí)收數(shù)據(jù)誰(shuí)useContext。
到此這篇關(guān)于react中如何理解usestate、useEffect副作用、useRef標(biāo)識(shí)和useContext的文章就介紹到這了,更多相關(guān)react usestate useEffect副作用 useRef標(biāo)識(shí)和useContext內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
React中組件的this.state和setState的區(qū)別
在React開(kāi)發(fā)中,this.state用于初始化和讀取組件狀態(tài),而setState()用于安全地更新?tīng)顟B(tài),正確使用這兩者對(duì)于管理React組件狀態(tài)至關(guān)重要,避免性能問(wèn)題和常見(jiàn)錯(cuò)誤2024-09-09
antd?table動(dòng)態(tài)修改表格高度的實(shí)現(xiàn)
本文主要介紹了antd?table動(dòng)態(tài)修改表格高度的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
React模仿網(wǎng)易云音樂(lè)實(shí)現(xiàn)一個(gè)音樂(lè)項(xiàng)目詳解流程
這篇文章主要介紹了React模仿網(wǎng)易云音樂(lè)實(shí)現(xiàn)一個(gè)音樂(lè)項(xiàng)目的詳細(xì)流程，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
React實(shí)現(xiàn)動(dòng)態(tài)輪播圖的使用示例
輪播組件是常見(jiàn)的一種方式,用來(lái)展示圖像、信息或者是廣告,本文就來(lái)介紹一下React實(shí)現(xiàn)動(dòng)態(tài)輪播圖的使用示例,具有一定的參考價(jià)值,感興趣的可以了解一下2023-12-12
react組件封裝input框的防抖處理的項(xiàng)目實(shí)現(xiàn)
本文主要介紹了react組件封裝input框的防抖處理的項(xiàng)目實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
React使用useEffect解決setState副作用詳解
這篇文章主要為大家介紹了React使用useEffect解決setState副作用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
react中useEffect函數(shù)的詳細(xì)用法(最新推薦)
useEffect是React中的一個(gè)Hook,用于在函數(shù)組件中處理副作用（如數(shù)據(jù)獲取、訂閱、手動(dòng)更改 DOM 等）,useEffect屬于組件的生命周期方法,下面通過(guò)本文給大家分享react中useEffect函數(shù)的詳細(xì)用法,感興趣的朋友跟隨小編一起看看吧2024-06-06
詳解React?如何防止?XSS?攻擊論$$typeof?的作用
這篇文章主要介紹了詳解React?如何防止?XSS?攻擊論$$typeof?的作用，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-07-07
react項(xiàng)目如何運(yùn)行在微信公眾號(hào)
這篇文章主要介紹了react項(xiàng)目如何運(yùn)行在微信公眾號(hào)，幫助大家更好的理解和學(xué)習(xí)使用react，感興趣的朋友可以了解下2021-04-04
這篇文章主要介紹了React中使用外部樣式的3種方式(小結(jié))，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05