React中九大常用Hooks总结

useState()

useState用于在函数组件中管理状态。

它返回一个包含当前状态和一个更新状态的函数的数组。更新状态的函数可以接受一个新的值，并更新状态。

import React, { useState } from 'react';function Counter() {const [count, setCount] = useState(0);function handleClick() {setCount(count + 1);}return <button onClick={handleClick}>Count: {count}</button>;
}

useEffect()

useEffect用于在函数组件中处理副作用。例如数据获取、订阅、手动更改 DOM 等

它接受两个参数：一个副作用函数和一个依赖数组。当依赖数组中的任何一个值发生变化时，副作用函数将被调用。

import React, { useState, useEffect } from 'react';function Timer() {const [time, setTime] = useState(0);useEffect(() => {const interval = setInterval(() => {setTime(time + 1);}, 1000);return () => clearInterval(interval);}, [time]);return <div>Time: {time}</div>;
}

useEffect和useLayoutEffect的区别

useEffect()和useLayoutEffect()主要的区别是调用时机不同。

useLayoutEffect()和componentDidMount()及componentDidUpate()一致，再react完成DOM更新后马上同步调用代码，它会阻塞页面的渲染，而useEffect()则会在页面渲染完后才会异步调用。

在实际使用中如果项避免页面抖动，可以把需要操作DOM的代码放在useLayoutEffect()中，在该函数中做DOM操作，这些DOM修改会和react做出的更改一起被一次性渲染到屏幕上，只有一次回流重绘的代价。

useLayoutEffect

使用场景: 处理 DOM 操作,需要同步执行

import { useLayoutEffect, useRef } from 'react';function MeasureElement() {const elementRef = useRef(null);useLayoutEffect(() => {const element = elementRef.current;console.log('Element width:', element.offsetWidth);}, []);return <div ref={elementRef}>This is the element to measure</div>;
}

useCallback()

useCallback()为记忆函数，缓存函数引用,优化性能。它可以防止因为组件重新渲染，导致方法被重新创建，起到缓存作用。

它接受一个回调函数和一个依赖数组，并返回一个缓存的回调函数。当依赖数组中的任何一个值发生变化时，缓存的回调函数将被更新。

import React, { useState, useCallback } from 'react';function Parent() {const [count, setCount] = useState(0);const handleClick = useCallback(() => {setCount(count + 1);}, [count]);return (<><Child onClick={handleClick} /><span>Count: {count}</span></>);
}function Child({ onClick }) {return <button onClick={onClick}>Click me</button>;
}

useMemo()

useMemo用于在函数组件中缓存计算结果。

它接受一个计算函数和一个依赖数组，并返回一个缓存的计算结果。当依赖数组中的任何一个值发生变化时，计算函数将被重新计算。

import React, { useMemo } from 'react';function ExpensiveComponent({ value1, value2 }) {const result = useMemo(() => {console.log('calculating result');return value1 * value2;}, [value1, value2]);return <div>Result: {result}</div>;
}

useCallback()与useMemo()的区别

useCallback()不会执行第一个参数函数，而是将其返回，useMemo()会执行第一个函数并且将函数执行结果返回给你。

useCallback()常用记忆时间按函数，生成记忆后的时间函数传递给子组件使用，useMemo()更适合经过函数计算得到一个确定的值，比如记忆组件。

React.memo()

接收一个组件A作为参数并返回一个组件B，如果组件B的props没有改变，则组件B会阻止组件A重新渲染。A和B本质上是同一个组件，但A是否进行重新渲染，需要由Props是否发生改变来决定。

学习视频：

Day10-03.React.memo-基础使用_哔哩哔哩_bilibili

useRef()

useRef用于在函数组件中引用DOM元素或其他值。

获取 DOM 元素引用,保存可变状态。它返回一个包含可变引用的对象。当在函数组件中传递该对象时，它将保留其引用，即使组件重新渲染。

import React, { useRef } from 'react';function Input() {const inputRef = useRef(null);/***	使用useRef()创建了一个值后，就可以将其绑定到DOM节点上，*	给DOM节点增加一个ref属性，将loginRef传入，则可以通过其current属性获取到DOM节点的值*/function handleClick() {inputRef.current.focus();}return (<><input ref={inputRef} /><button onClick={handleClick}>Focus input</button></>);
}

useContext()

useContext用于在函数组件中使用上下文。
它接受一个上下文对象并返回上下文的当前值。当上下文的值发生变化时，函数组件将重新渲染。

import React, { createContext, useContext } from 'react';const ThemeContext = createContext('light');function Header() {const theme = useContext(ThemeContext);return (<header style={{ background: theme }}><h1>My App</h1></header>);
}function App() {return (<ThemeContext.Provider value="dark"><Header /></ThemeContext.Provider>);
}

useReducer()

useReducer用于在函数组件中管理复杂的状态。
它接受一个reducer函数和一个初始状态，并返回一个包含当前状态和一个派发操作的数组。派发操作将一个操作对象发送到reducer函数中，并返回一个新的状态。

import React, { useReducer } from 'react';const initialState = { count: 0 };function reducer(state, action) {switch (action.type) {case 'increment':return { count: state.count + 1 };case 'decrement':return { count: state.count - 1 };default:throw new Error();}
}function Counter() {const [state, dispatch] = useReducer(reducer, initialState);function handleIncrement() {dispatch({ type: 'increment' });}function handleDecrement() {dispatch({ type: 'decrement' });}return (<><button onClick={handleIncrement}>+</button><span>{state.count}</span><button onClick={handleDecrement}>-</button></>);
}

useImperativeHandle

使用场景: 暴露组件实例方法给父组件

import { forwardRef, useImperativeHandle, useRef } from 'react';const CustomInput = forwardRef((props, ref) => {const inputRef = useRef(null);useImperativeHandle(ref, () => ({focus: () => {inputRef.current.focus();}}));return <input type="text" ref={inputRef} />;
});function App() {const inputRef = useRef(null);const handleClick = () => {inputRef.current.focus();};return (<div><CustomInput ref={inputRef} /><button onClick={handleClick}>Focus Input</button></div>);
}

参考文章

https://blog.csdn.net/m0_46612221/article/details/123384046

https://blog.csdn.net/lpw_cn/article/details/131262559

https://blog.csdn.net/sky6862/article/details/137716650