React中常用的钩子函数:

一. 基础钩子

(1)useState

用于在函数组件中添加局部状态。useState可以传递一个参数，做为状态的初始值，返回一个数组，数组的第一个元素是返回的状态变量，第二个是修改状态变量的函数。

const [state, setState] = useState(initalState); // 初始化，state可以任意命名

setState(newState); // 修改state的值

(2)useEffect

处理副作用（如数据获取、订阅、手动 DOM 操作等）。若一个函数组件中定义了多个useEffect，那么他们实际执行顺序是按照在代码中定义的先后顺序来执行的。 useEffect可以传入2个参数:

•  第1个参数是定义的执行函数,组件挂载和更新就会执行。

• 第2个参数是依赖关系(可选参数),如果不传则每次渲染都会去执行，传值的话在依赖项发生改变时函数中的代码才会执行，如果传空数组则会在组件第一次挂载才会执行。     

• return 出去的代码会在组件卸载时才会执行。

useEffect(() => {
  // 此处编写 组件挂载之后和组件重新渲染之后执行的代码
  ...
 
  return () => {
    // 此处编写 组件即将被卸载前执行的代码
    ...
  }
}, [dep1, dep2 ...]); // 依赖数组

(3)useContext

读取 React 的上下文（Context）值。useContext 可以避免多层 props 传递就能共享状态。具体用法看下面步骤：

先封装一个js,里面可以设置初始值，这个初始值，可以在任何地方使用:

​
import React from 'react';
const UserContext = React.createContext( { name: '张三' });   //参数是默认值，可填可不填
export default UserContext;

  在代码中引用封装好的js文件

import React, { useContext } from 'react'
import UserContext from './context';

function Demo() {
// 如果React.createContext没有指定默认值，可以在对应子组件上套上UserContext.Provider来指定值
    return (
         <UserContext.Provider value={{ name: '张三' }}>
            <Child />
         </UserContext.Provider>
    )
}
 
function Child() {
    const user = useContext(UserContext);
    return (
        <div>
            <p>{`name: ${user.name}`}</p>
        </div>
    )
}

export default Demo;

---

二. 性能优化钩子

(1)useMemo

缓存计算结果，避免重复计算（类似 Vue 的 computed）。useMemo 可以传入2个参数，第1个参数为函数，用来进行一些计算，第2个参数是依赖关系(可选参数)，返回值为第一个函数 return 出去的值，只有在依赖项发生变化时才会重新执行计算函数进行计算，如果不传依赖项，每次组件渲染都会重新进行计算。

• useMemo在组件顶层调用

• useMemo不能在事件处理函数、循环或条件语句中调用

const memoizedValue = useMemo(() => {
  // 计算逻辑
  ...
  return res;
}, [a, b]);

(2)useCallback

缓存函数，避免子组件不必要的重渲染。

function Parent() {
  // 不使用 useCallback - 每次渲染都会导致 Child 重新渲染
  const handleClick = () => { /*...*/ };
  
  // 使用 useCallback - 避免 Child 不必要的重新渲染
  const handleClick = useCallback(() => {
    /*...*/
  }, []); // 空依赖表示函数永不变化
  
  return <Child onClick={handleClick} />;
}

(3)useTransition (React 18+)

标记非紧急更新，优化渲染优先级（如搜索框输入时的延迟渲染）。

const [isPending, startTransition] = useTransition();

(4)useDeferredValue (React 18+)

延迟更新某些值，避免界面卡顿（如大型列表渲染）。

const deferredValue = useDeferredValue(value);

---

3. 引用与 DOM 操作

(1)useRef

可以获取 dom 和 react 组件实例。

import { useRef } from 'react'
 
function Demo() {
    const inputRef = useRef();
    const handleFocus = () => {
        inputRef.current.value = 'focus';
        inputRef.current.focus();
    }
    return (
        <div>
            <input ref={inputRef} />
        </div>
    )
}
 
export default Demo;

(2)useImperativeHandle

自定义暴露给父组件的 ref 实例（通常配合 forwardRef 使用）。父组件通过ref.current.getValue()获取子组件中的value值。

const RichTextEditor = forwardRef((props, ref) => {
  const [value, setValue] = useState('');
  useImperativeHandle(ref, () => ({
    getValue: () => value,
  }));

  return (
    ...
  );
})

export default RichTextEditor;

---

4. 其他钩子

(1)useReducer

复杂状态逻辑管理（类似 Redux 的 reducer）。

// 代码示例
import React, { useReducer } from 'react'
 
// 1.需要有一个 reducer 函数，第一个参数为之前的状态，第二个参数为行为信息
function reducer(state, action) {
    switch (action) {
        case 'add':
            return state + 1;
        case 'minus':
            return state - 1;
        default:
            return 0;
    }
}
 
function Demo() {
 
    // 2.引入useReducer，第一个参数时上面定义的reducer，第二个参数时初始值
    // 3.返回为一个数组，第一项为状态值，第二项为一个 dispatch 函数，用来修改状态值
    const [count, dispatch] = useReducer(reducer, 0);
    return (
        <div>
            <button onClick={() => { dispatch('add') }} >add</button>
            <button onClick={() => { dispatch('minus') }} >minus</button>
            <button onClick={() => { dispatch('unknown') }} >unknown</button>
            <p>{`count: ${count}`}</p>
        </div>
    );
}
 
export default Demo;

(2)useLayoutEffect

类似 useEffect，但会在 DOM 更新后同步执行（适合测量 DOM 布局）。useLayoutEffect 使用方法、所传参数和 useEffect 完全相同。大多数情况下将 useEffect 替换成 useLayoutEffect 完全看不出区别。
唯一区别就是：使用 useEffect 时，页面挂载会出现闪烁。而使用 useLayoutEffect 时页面没有闪烁，是因为 useEffect 是在页面渲染完成后再去更新数据的，所以会出现短暂的闪烁，而 useLayoutEffect 是在页面还没有渲染时就将数据给更新了，所以没有出现闪烁。
注意：大部分情况用useEffect就足够了，useLayoutEffect 会阻塞渲染，所以需要小心的使用。

(3)useDebugValue

在 React 开发者工具中为自定义钩子添加标签。

useDebugValue(value, formatFn);

(4)useId (React 18+)

生成唯一 ID，用于无障碍访问（a11y）或表单关联。

const id = useId();

---

三.使用场景总结

钩子	用途
useState	管理组件内部状态
useEffect	处理副作用（API 调用、订阅等）
useContext	跨组件共享状态
useMemo/useCallback	优化性能，避免重复计算/渲染
useRef	操作 DOM 或保存可变值
useReducer	复杂状态逻辑

---