当前位置：首页 > news >正文

React18 hook学习笔记

news 2025/10/6 3:48:42

useState

useState用于在函数组件中声明和管理状态
它接受初始状态，并返回一个状态变量和一个更新状态的函数
通过调用更新状态的函数，可以改变状态的值并触发组件的重新渲染

import { useState } from "react"function App() {const [obj, setObj] = useState({a: 1,b: 2})const [arr, setArr] = useState([])const updateObjValue = () => {// 更新引用值的状态，必须传递一个新的引用setObj(prev => {return {...obj,b: 3}})setArr(prev => [...arr, 1])}return (<div onClick={updateObjValue}>a: {obj.a}b: {obj.b}数组：{arr}</div>)
}export default App;

useEffect

React的useEffect钩子可以让开发者在函数组件中管理副作用。
副作用操作是指那些与组件渲染无关的操作，例如访问网络、获取浏览器窗口大小、访问本地存储等。这些操作一般会产生一些副作用，例如更新组件状态、改变浏览器地址等。
使用useEffect可以在组件渲染后执行副作用操作，并且可以根据需要设置条件，只在满足条件时执行副作用操作，从而避免不必要的计算和网络请求。

useEffect接收两个参数：第一个参数是一个回调函数，该函数会在组件渲染之后执行，用于执行副作用操作。
如果需要在组件卸载时执行一些清理操作，可以在该函数中返回一个清理函数，React会在组件卸载时调用该函数(如清除定时器等)。
第二个参数是一个可选数组，用于指定当依赖项发生变化时是否需要重新执行effect函数。
如果第二个参数为空数组，则表示effect只会在组件挂载和卸载时执行一次；如果第二个参数不为空数组，每当指定的依赖项发生变化时，effect函数都会重新执行。

// 监听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>);
}

请求网络

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>);
}

通过useEffect来获取数据

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是异步执行的，useLayoutEffect是同步执行的。
useLayoutEffect是当浏览器把内容渲染到页面之前执行，而useEffect是当浏览器把内容渲染到页面之后执行。尽可能使用标准的useEffect以避免阻塞页面更新。

useEffect的运行规则：组件首次渲染工作完成并将真实dom生成到页面以后，将对应的回调函数推入异步队列等待执行
useLayoutEffect的运行规则：组件首次渲染工作完成并将真实dom生成到页面以后，将对应的回调函数推入同步队列等待执行

正常情况全部使用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>)
}

清除定时器

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>倒计时: {tickTime}</div>)
}

useReducer

useReducer是另一种让函数组件保存状态的方式
它接受一个 reducer 函数和一个初始状态，并返回当前状态和 dispatch 函数

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

每次组件的重新渲染都意味着内部所有的引用值都会被重新构建
useCallBack用来长期稳定的维护某一个函数的引用，它会将函数创建后的引用保存，当函数组件下一次重新渲染时，它会直接返回之前保存的引用，而不是重新创建引用
useCallBack只在创建函数引用的时候使用

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类似于计算属性
useCallBack就是useMemo实现的，用来做缓存的
useCallBack第一个参数也是一个函数，并不会在声明时被React直接执行；该函数会在组件渲染过程中被 useMemo 钩子调用，将计算结果进行缓存
第二个参数是依赖项，当依赖项变化时，React会重新执行对应的第一个参数，然后拿到最新的返回值，再次进行缓存
业内都是使用useCallBack去缓存函数

memo方法：
性能优化，如果本组件中的数据没有发生变化，阻止组件更新

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

自定义hooks

使用自定义 hook 时，需要遵循以下规则：

自定义 hook 必须是一个函数，名称必须以“use”为前缀。
自定义 hook 可以调用其他钩子或普通函数。
自定义 hook 应该使用 useState、useEffect 等 React 钩子创建状态和处理副作用。
可以将自定义钩子与 useContext 和 useReducer 配合使用来实现更复杂的行为。

下面是一个示例自定义 hook，用于检查用户是否拥有特定的权限：

import { useState, useEffect } from 'react';function useUserPermissions(permission) {const [hasPermission, setHasPermission] = useState(false);useEffect(() => {// 模拟 Ajax 请求，获取用户权限const userPermissions = ['admin', 'editor'];if (userPermissions.includes(permission)) {setHasPermission(true);} else {setHasPermission(false);}}, [permission]);return hasPermission;
}

在其他组件中使用 hook 检查用户是否拥有访问特定页面或功能的权限

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 () => {// 延时模拟加载中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>数据加载中</div> : (topicList.map(topic => (<TopicItem {...topic}></TopicItem>)))}</div>)
}

强制刷新useForceUpdate

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

使用强制刷新

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

构建一个状态出来，但是这个状态是直接脱离React控制的，也不会造成页面的重新渲染，同时状态还不会因为组件的重新渲染而被初始化

import { useState, useCallback, useRef } from "react";
export default function Ticker() {const [timeCount, setTimeCount] = useState(60)const timerIdRef = useRef(null)// useRef会返回一个对象，里面有一个current属性// ref是可读可写的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去获取真实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是一个高阶组件
高阶组件：接收一个组件作为参数，返回一个新的组件
fowardRef给函数组件扩展了一个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连用的，不会单独使用

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

用于向父组件暴露子组件实例的特定函数。它通常与forwardRef一起使用，在子组件中定义外部可以调用的实例方法。

在子组件中使用forwardRef，将ref作为第二个参数传递给子组件；第三个参数是依赖项

const ChildComponent = forwardRef((props, ref) => {// 定义需要暴露给父组件的方法useImperativeHandle(ref, () => ({// 这里定义需要暴露给父组件的方法focus: () => {// 在这里编写具体的逻辑// 注意：这里的 focus 是一个示例，你可以定义任何你需要的方法// 你可以在该方法内部执行子组件的某个操作// 这个方法会被父组件调用},// 定义其他的方法...}));// 渲染子组件的 JSXreturn <div>子组件</div>;
});export default ChildComponent;

在父组件中创建一个ref对象，并将其传递给子组件：

import React, { useRef } from 'react';
import ChildComponent from './ChildComponent';const ParentComponent = () => {// 创建 ref 对象const childRef = useRef();// 在父组件中可以通过调用子组件的方法来访问子组件的实例const handleClick = () => {childRef.current.focus(); // 调用子组件的 focus 方法};return (<div><button onClick={handleClick}>调用子组件方法</button><ChildComponent ref={childRef} /></div>);
};export default ParentComponent;

useContext

允许组件之间通过除了props以外的情况去共享数据
如果组件属性传递超过了4层，可以考虑使用上下文
上下文大多数是用来做全局数据管理的

创建上下文：context/themeContext.js

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

给自定义上下文设置值

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;

在组件中获取上下文中的值

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>)
}