useState

useState用于在函數(shù)組件中聲明和管理狀態(tài)
它接受初始狀態(tài)，并返回一個(gè)狀態(tài)變量和一個(gè)更新?tīng)顟B(tài)的函數(shù)
通過(guò)調(diào)用更新?tīng)顟B(tài)的函數(shù)，可以改變狀態(tài)的值并觸發(fā)組件的重新渲染

import { useState } from "react"function App() {const [obj, setObj] = useState({a: 1,b: 2})const [arr, setArr] = useState([])const updateObjValue = () => {// 更新引用值的狀態(tài)，必須傳遞一個(gè)新的引用setObj(prev => {return {...obj,b: 3}})setArr(prev => [...arr, 1])}return (<div onClick={updateObjValue}>a: {obj.a}b: {obj.b}數(shù)組：{arr}</div>)
}export default App;

---

useEffect

React的useEffect鉤子可以讓開(kāi)發(fā)者在函數(shù)組件中管理副作用。
副作用操作是指那些與組件渲染無(wú)關(guān)的操作，例如訪問(wèn)網(wǎng)絡(luò)、獲取瀏覽器窗口大小、訪問(wèn)本地存儲(chǔ)等。這些操作一般會(huì)產(chǎn)生一些副作用，例如更新組件狀態(tài)、改變?yōu)g覽器地址等。
使用useEffect可以在組件渲染后執(zhí)行副作用操作，并且可以根據(jù)需要設(shè)置條件，只在滿足條件時(shí)執(zhí)行副作用操作，從而避免不必要的計(jì)算和網(wǎng)絡(luò)請(qǐng)求。

useEffect接收兩個(gè)參數(shù)：第一個(gè)參數(shù)是一個(gè)回調(diào)函數(shù)，該函數(shù)會(huì)在組件渲染之后執(zhí)行，用于執(zhí)行副作用操作。
如果需要在組件卸載時(shí)執(zhí)行一些清理操作，可以在該函數(shù)中返回一個(gè)清理函數(shù)，React會(huì)在組件卸載時(shí)調(diào)用該函數(shù)(如清除定時(shí)器等)。
第二個(gè)參數(shù)是一個(gè)可選數(shù)組，用于指定當(dāng)依賴(lài)項(xiàng)發(fā)生變化時(shí)是否需要重新執(zhí)行effect函數(shù)。
如果第二個(gè)參數(shù)為空數(shù)組，則表示effect只會(huì)在組件掛載和卸載時(shí)執(zhí)行一次；如果第二個(gè)參數(shù)不為空數(shù)組，每當(dāng)指定的依賴(lài)項(xiàng)發(fā)生變化時(shí)，effect函數(shù)都會(huì)重新執(zhí)行。

// 監(jiān)聽(tīng)count的變化，重新渲染
import React, { useState, useEffect } from 'react';function MyComponent(props) {const [count, setCount] = useState(0);useEffect(() => {document.title = `You clicked ${count} times`;}, [count]);return (<div><p>You clicked {count} times</p><button onClick={() => setCount(count + 1)}>Click me</button></div>);
}

請(qǐng)求網(wǎng)絡(luò)

import { useState, useEffect } from 'react';function Example() {const [data, setData] = useState(null);useEffect(() => {fetch('https://api.example.com/data').then(response => response.json()).then(data => setData(data));}, []);return (<div>{data && <h1>{data.title}</h1>}</div>);
}

通過(guò)useEffect來(lái)獲取數(shù)據(jù)

import {useEffect, useState} from "react";const UseEffectDemo = () => {const [list, setList] = useState([])const [id, setId] = useState('5433d5e4e737cbe96dcef312')const [num, setNum] = useState(0)const [info, setInfo] = useState([])useEffect(()=>{const requestList = async () => {try {const response = await fetch('https://cnodejs.org/api/v1/topics')const res = await response.json()console.log(res['data'])setList(res['data'])} catch (err) {if (err) throw Error}}requestList().then((rs)=>{console.log('requestList')})},[])useEffect(()=>{const requestInfo = async () => {try {const response = await fetch('https://cnodejs.org/api/v1/topic/' + id)const res = await response.json()setInfo(res['data'])} catch (err) {if (err) throw Error}}requestInfo().then((rs)=>{console.log('requestInfo')})},[id])return (<><h2 id='title'>UseEffect Demo</h2><h4>{id}</h4><div style={{display:'flex'}}><ul>{list.map((item, index)=>{return (<likey={item.id}style={{background:index === num ? 'skyblue':'white', cursor:"pointer"}}onClick={()=>{setId(item.id)setNum(index)}}>{item.id}</li>)})}</ul><div dangerouslySetInnerHTML={{__html: info.content}}></div></div></>)
}
export default UseEffectDemo

useEffect是異步執(zhí)行的，useLayoutEffect是同步執(zhí)行的。
useLayoutEffect是當(dāng)瀏覽器把內(nèi)容渲染到頁(yè)面之前執(zhí)行，而useEffect是當(dāng)瀏覽器把內(nèi)容渲染到頁(yè)面之后執(zhí)行。盡可能使用標(biāo)準(zhǔn)的useEffect以避免阻塞頁(yè)面更新。

useEffect的運(yùn)行規(guī)則：組件首次渲染工作完成并將真實(shí)dom生成到頁(yè)面以后，將對(duì)應(yīng)的回調(diào)函數(shù)推入異步隊(duì)列等待執(zhí)行
useLayoutEffect的運(yùn)行規(guī)則：組件首次渲染工作完成并將真實(shí)dom生成到頁(yè)面以后，將對(duì)應(yīng)的回調(diào)函數(shù)推入同步隊(duì)列等待執(zhí)行

正常情況全部使用useEffect，只有逼不得已的情況才考慮是否使用useLayoutEffect

import { useState, useEffect } from "react";export default function TopicList() {const [topicList, setTopicList] = useState([])useEffect(() => {const requestList = async () => {try {const response = await fetch('https://cnodejs.org/api/v1/topics')const res = await response.json()console.log(res['data'])setTopicList(res['data'])} catch (err) {if (err) throw Error}}requestList().then((rs)=>{console.log('requestList')})const topicListDom = document.getElementsByClassName("topic-list-wrapper")[0]console.log('topicListDom', topicListDom)}, [])return (<div className="topic-list-wrapper">{topicList.map(topic => (<div key={topic.id}>{topic.title}</div>))}</div>)
}

清除定時(shí)器

import { useState, useEffect } from "react";export default function Tick() {const [tickTime, setTickTime] = useState(100)useEffect(() => {let timer = setInterval(() => {console.log("tickTime working")setTickTime(prev => prev - 1)}, 1000);return () => {clearInterval(timer)timer = null}}, [])return (<div>倒計(jì)時(shí): {tickTime}</div>)
}

---

useReducer

useReducer是另一種讓函數(shù)組件保存狀態(tài)的方式
它接受一個(gè) reducer 函數(shù)和一個(gè)初始狀態(tài)，并返回當(dāng)前狀態(tài)和 dispatch 函數(shù)

import { useReducer } from "react";export default function ReducerDemo() {const reducer = (state, action) => {switch (action.type) {case 'increment':return state + 1case 'decrement':return state + 1    }return state;}const [count, dispatch] = useReducer(reducer, 0)return (<div><span>{count}</span><button onClick={() => dispatch({ type: 'increment' })}>plus</button></div>)
}

---

useCallBack

每次組件的重新渲染都意味著內(nèi)部所有的引用值都會(huì)被重新構(gòu)建
useCallBack用來(lái)長(zhǎng)期穩(wěn)定的維護(hù)某一個(gè)函數(shù)的引用，它會(huì)將函數(shù)創(chuàng)建后的引用保存，當(dāng)函數(shù)組件下一次重新渲染時(shí)，它會(huì)直接返回之前保存的引用，而不是重新創(chuàng)建引用
useCallBack只在創(chuàng)建函數(shù)引用的時(shí)候使用

import {useState, memo, useCallback} from "react";const Child = memo(({value,change}) => {console.log('----re-render----')return (<input type="text" value={value} onChange={change}/>)
})const UseCallback = () => {const [v1, setV1] = useState('')const [v2, setV2] = useState('')const onChange1 = useCallback((e)=>{setV1(e.target.value)}, [])const onChange2 = useCallback((e)=>{setV2(e.target.value)}, [])return (<><h2>UseCallback</h2><Child value={v1} change={onChange1}/><Child value={v2} change={onChange2}/></>)
}
export default UseCallback

---

useMemo

useMemo類(lèi)似于計(jì)算屬性
useCallBack就是useMemo實(shí)現(xiàn)的，用來(lái)做緩存的
useCallBack第一個(gè)參數(shù)也是一個(gè)函數(shù)，并不會(huì)在聲明時(shí)被React直接執(zhí)行；該函數(shù)會(huì)在組件渲染過(guò)程中被 useMemo 鉤子調(diào)用，將計(jì)算結(jié)果進(jìn)行緩存
第二個(gè)參數(shù)是依賴(lài)項(xiàng)，當(dāng)依賴(lài)項(xiàng)變化時(shí)，React會(huì)重新執(zhí)行對(duì)應(yīng)的第一個(gè)參數(shù)，然后拿到最新的返回值，再次進(jìn)行緩存
業(yè)內(nèi)都是使用useCallBack去緩存函數(shù)

memo方法：
性能優(yōu)化，如果本組件中的數(shù)據(jù)沒(méi)有發(fā)生變化，阻止組件更新

import { memo } from "react";function MemoDemo() {console.log('memo rendering...')return (<div>memo data</div>)
}export default memo(MemoDemo)

---

自定義hooks

使用自定義 hook 時(shí)，需要遵循以下規(guī)則：

1. 自定義 hook 必須是一個(gè)函數(shù)，名稱(chēng)必須以“use”為前綴。
2. 自定義 hook 可以調(diào)用其他鉤子或普通函數(shù)。
3. 自定義 hook 應(yīng)該使用 useState、useEffect 等 React 鉤子創(chuàng)建狀態(tài)和處理副作用。
4. 可以將自定義鉤子與 useContext 和 useReducer 配合使用來(lái)實(shí)現(xiàn)更復(fù)雜的行為。

下面是一個(gè)示例自定義 hook，用于檢查用戶(hù)是否擁有特定的權(quán)限：

import { useState, useEffect } from 'react';function useUserPermissions(permission) {const [hasPermission, setHasPermission] = useState(false);useEffect(() => {// 模擬 Ajax 請(qǐng)求，獲取用戶(hù)權(quán)限const userPermissions = ['admin', 'editor'];if (userPermissions.includes(permission)) {setHasPermission(true);} else {setHasPermission(false);}}, [permission]);return hasPermission;
}

在其他組件中使用 hook 檢查用戶(hù)是否擁有訪問(wèn)特定頁(yè)面或功能的權(quán)限

import React from 'react';
import useUserPermissions from './useUserPermissions';function Dashboard() {const hasAccess = useUserPermissions('admin');return (<div>{hasAccess ? (<h1>Welcome to the Admin Dashboard!</h1>) : (<h1>Sorry, you do not have access to this page.</h1>)}</div>);
}

---

顯示loading效果
新建文件useRequestLoadingDispatcher.js

import { useState } from "react";export default function useRequestLoadingDispatcher() {const [loading, setLoading] = useState(false)const executeRequest =async (promiseFn) => {setLoading(true)console.log('loading data........................')await promiseFn()setLoading(false)console.log('init finish')}return {loading, executeRequest}
}

使用useRequestLoadingDispatcher

import { useState, useEffect } from "react";
import TopicItem from "../TopicItem";
import useRequestLoadingDispatcher from "../hooks/useRequestLoadingDispatcher";export default function TopicList() {const [topicList, setTopicList] = useState([])const {loading, executeRequest} = useRequestLoadingDispatcher()const fetchFromServer = async () => {// 延時(shí)模擬加載中const delay = async (duration = 2000) => {return new Promise((resolve, reject) => {setTimeout(() => {resolve()}, duration)})}executeRequest(async () => {try {const response = await fetch('https://cnodejs.org/api/v1/topics')const res = await response.json()console.log(res['data'])await delay(2000)setTopicList(res['data'])} catch (err) {if (err) throw Error}})} useEffect(() => {fetchFromServer()}, [])return (<div className="topic-list-wrapper">{ loading ? <div>數(shù)據(jù)加載中</div> : (topicList.map(topic => (<TopicItem {...topic}></TopicItem>)))}</div>)
}

---

強(qiáng)制刷新useForceUpdate

import { useState } from "react";export default function useForceUpdate() {const [_, setForceObj] = useState({})const forceUpdate = () => {setForceObj({})}return forceUpdate;
}

使用強(qiáng)制刷新

import useForceUpdate from "../hooks/useForceUpdate"
export default function ForceUpdateTest() {console.log('do force update')const forceUpdate = useForceUpdate()return (<button onClick={forceUpdate}>force update</button>)
}

---

useRef

構(gòu)建一個(gè)狀態(tài)出來(lái)，但是這個(gè)狀態(tài)是直接脫離React控制的，也不會(huì)造成頁(yè)面的重新渲染，同時(shí)狀態(tài)還不會(huì)因?yàn)榻M件的重新渲染而被初始化

import { useState, useCallback, useRef } from "react";
export default function Ticker() {const [timeCount, setTimeCount] = useState(60)const timerIdRef = useRef(null)// useRef會(huì)返回一個(gè)對(duì)象，里面有一個(gè)current屬性// ref是可讀可寫(xiě)的console.log("timerIdRef", timerIdRef)const startTick = useCallback(() => {timerIdRef.current = setInterval(()=>{setTimeCount(prev => prev - 1)}, 1000)})const stopTick = useCallback(() => {if (timerIdRef.current) clearInterval(timerIdRef.current)})return (<><button onClick={startTick}>start</button><button onClick={stopTick}>stop</button><span>{timeCount}</span></>)
}

使用useRef獲取DOM元素

import { useCallback, useEffect, useRef } from "react"export default function TestInput() {const inputElementRef = useRef(null)useEffect(() => {inputElementRef.current = document.getElementsByClassName('input-example')[0]}, [])const handleClick = useCallback(() => {inputElementRef.current.focus()})return (<div><input className="input-example"></input><button onClick={handleClick}>click me</button></div>)
}

useRef可以直接作用在dom上，它使用useEffect去獲取真實(shí)dom并且賦值

import { useCallback, useRef } from "react"export default function TestInput() {const inputElementRef = useRef(null)const handleClick = useCallback(() => {inputElementRef.current.focus()})return (<div><input ref={inputElementRef} className="input-example"></input><button onClick={handleClick}>click me</button></div>)
}

---

fowardRef

fowardRef是一個(gè)高階組件
高階組件：接收一個(gè)組件作為參數(shù)，返回一個(gè)新的組件
fowardRef給函數(shù)組件擴(kuò)展了一個(gè)ref屬性

TestInput.jsx

import { forwardRef } from "react"// 給組件掛載ref屬性，必須使用forwardRef
function TestInput(props, parentRef) {return (<div><input ref={parentRef} className="input-example"></input></div>)
}export default forwardRef(TestInput)

App.js
forwardRef一般都是和組件ref連用的，不會(huì)單獨(dú)使用

import { useCallback, useRef } from "react";
import TestInput from "./components/TestInput";function App() {const testInputRef = useRef(null)const handleClick = useCallback(() => {testInputRef.current.focus()})return (<div><TestInput ref={testInputRef}/><button onClick={handleClick}>click me</button></div>)
}export default App;

---

useImperativeHandle

用于向父組件暴露子組件實(shí)例的特定函數(shù)。它通常與forwardRef一起使用，在子組件中定義外部可以調(diào)用的實(shí)例方法。

1. 在子組件中使用forwardRef，將ref作為第二個(gè)參數(shù)傳遞給子組件；第三個(gè)參數(shù)是依賴(lài)項(xiàng)

const ChildComponent = forwardRef((props, ref) => {// 定義需要暴露給父組件的方法useImperativeHandle(ref, () => ({// 這里定義需要暴露給父組件的方法focus: () => {// 在這里編寫(xiě)具體的邏輯// 注意：這里的 focus 是一個(gè)示例，你可以定義任何你需要的方法// 你可以在該方法內(nèi)部執(zhí)行子組件的某個(gè)操作// 這個(gè)方法會(huì)被父組件調(diào)用},// 定義其他的方法...}));// 渲染子組件的 JSXreturn <div>子組件</div>;
});export default ChildComponent;

2. 在父組件中創(chuàng)建一個(gè)ref對(duì)象，并將其傳遞給子組件：

import React, { useRef } from 'react';
import ChildComponent from './ChildComponent';const ParentComponent = () => {// 創(chuàng)建 ref 對(duì)象const childRef = useRef();// 在父組件中可以通過(guò)調(diào)用子組件的方法來(lái)訪問(wèn)子組件的實(shí)例const handleClick = () => {childRef.current.focus(); // 調(diào)用子組件的 focus 方法};return (<div><button onClick={handleClick}>調(diào)用子組件方法</button><ChildComponent ref={childRef} /></div>);
};export default ParentComponent;

---

useContext

允許組件之間通過(guò)除了props以外的情況去共享數(shù)據(jù)
如果組件屬性傳遞超過(guò)了4層，可以考慮使用上下文
上下文大多數(shù)是用來(lái)做全局?jǐn)?shù)據(jù)管理的

1. 創(chuàng)建上下文：context/themeContext.js

import { createContext } from "react";const ThemeContext = createContext("light")export default ThemeContext

2. 給自定義上下文設(shè)置值

import { useCallback, useState } from "react";
import ThemeContext from "./context/themeContext";
import TestInput from "./components/TestInput";function App() {const [theme, setTheme] = useState("light")const changeTheme = useCallback(() => {setTheme(prev => {if (prev === 'light') return "dark"return "light"})})return (<div className="wrapper"><ThemeContext.Provider value = {theme}><TestInput /><button onClick={changeTheme}>change theme</button></ThemeContext.Provider></div>)
}export default App;

3. 在組件中獲取上下文中的值

import { useContext } from "react"
import ThemeContext from "../../context/themeContext"export default function TestInput(props) {const contextValue = useContext(ThemeContext)return (<div style={{background: contextValue === 'light' ? "#fff" : "#666"}}><input></input></div>)
}