ReactHook有哪些

React 中常用的 Hooks 列表及用法

React Hooks 是 React 16.8 版本引入的一项重要特性,它极大地简化和优化了函数组件的开发过程。以下是 React 中常用的 Hooks 列表及其详细用法:

1. useState

useState 是用于在函数组件中添加状态的 Hook。通过调用 useState,可以声明一个状态变量,并提供更新该状态的方法。

javascript 复制代码
const [state, setState] = useState(initialState);
  • state:当前的状态值。
  • setState:更新状态的函数。
  • initialState:状态的初始值。

示例:

javascript 复制代码
import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}
2. useEffect

useEffect 是用于处理副作用的 Hook,例如数据获取、订阅或手动 DOM 操作。它类似于类组件中的 componentDidMountcomponentDidUpdatecomponentWillUnmount 的组合。

javascript 复制代码
useEffect(effect, dependencies);
  • effect:副作用的回调函数。
  • dependencies:依赖项数组,当数组中的值发生变化时触发 effect

示例:

javascript 复制代码
import React, { useEffect, useState } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, [count]);

  return (
    <button onClick={() => setCount(count + 1)}>
      Click me
    </button>
  );
}
3. useContext

useContext 是用于访问 React 的上下文(Context)的 Hook。它允许你从组件树中任何位置读取上下文值,而无需显式传递 props。

javascript 复制代码
const value = useContext(MyContext);

示例:

javascript 复制代码
import React, { createContext, useContext } from 'react';

const ThemeContext = createContext('light');

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function Toolbar() {
  const theme = useContext(ThemeContext);
  return <div>Current theme is {theme}</div>;
}
4. useReducer

useReducer 是用于管理复杂状态逻辑的 Hook。它类似于 Redux 的 reducer 函数,适合处理多个状态值或复杂的更新逻辑。

javascript 复制代码
const [state, dispatch] = useReducer(reducer, initialState);

示例:

javascript 复制代码
import React, { useReducer } from 'react';

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, { count: 0 });
  return (
    <div>
      Count: {state.count}
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
    </div>
  );
}
5. useCallback

useCallback 是用于记忆函数的 Hook。它可以防止因为组件重新渲染导致方法被重新创建,起到缓存作用。

javascript 复制代码
const memoizedCallback = useCallback(callback, dependencies);

示例:

javascript 复制代码
import React, { useCallback, useState } from 'react';

function ParentComponent() {
  const [count, setCount] = useState(0);

  const handleChildClick = useCallback(() => {
    console.log('Child clicked');
  }, []);

  return <ChildComponent onChildClick={handleChildClick} />;
}
6. useMemo

useMemo 是用于记忆计算结果的 Hook。它仅会在某个依赖项改变时才重新计算 memoized 值,从而避免不必要的开销。

javascript 复制代码
const memoizedValue = useMemo(computeFunction, dependencies);

示例:

javascript 复制代码
import React, { useMemo, useState } from 'react';

function ExpensiveComponent() {
  const [count, setCount] = useState(0);

  const expensiveValue = useMemo(() => computeExpensiveValue(count), [count]);

  return (
    <div>
      <p>Expensive Value: {expensiveValue}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}
7. useRef

useRef 是用于创建一个可变的引用对象的 Hook。它适用于保存 DOM 引用、计时器 ID 或其他不触发重新渲染的值。

javascript 复制代码
const refContainer = useRef(initialValue);

示例:

javascript 复制代码
import React, { useRef } from 'react';

function TextInputWithFocusButton() {
  const inputEl = useRef(null);

  const onButtonClick = () => {
    inputEl.current.focus();
  };

  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}
8. useLayoutEffect

useLayoutEffect 类似于 useEffect,但会在所有的 DOM 变更之后同步调用。它适用于需要测量布局并同步执行某些操作的场景。

javascript 复制代码
useLayoutEffect(effect, dependencies);
9. useImperativeHandle

useImperativeHandle 是用于自定义暴露给父组件的实例值的 Hook。它通常与 ref 配合使用。

javascript 复制代码
useImperativeHandle(ref, createHandle, dependencies);
10. useDebugValue

useDebugValue 是用于在开发者工具中显示自定义 Hook 的调试标签的 Hook。

javascript 复制代码
useDebugValue(value);

总结

javascript 复制代码
useImperativeHandle(ref, createHandle, dependencies);
10. useDebugValue

useDebugValue 是用于在开发者工具中显示自定义 Hook 的调试标签的 Hook。

javascript 复制代码
useDebugValue(value);

总结

相关推荐
excel几秒前
理解 JavaScript 中的 for...in 与 for...of 的区别
前端
前端小巷子30 分钟前
Webpack 5模块联邦
前端·javascript·面试
玲小珑33 分钟前
Next.js 教程系列(十九)图像优化:next/image 与高级技巧
前端·next.js
晓得迷路了33 分钟前
栗子前端技术周刊第 91 期 - 新版 React Compiler 文档、2025 HTML 状态调查、Bun v1.2.19...
前端·javascript·react.js
江城开朗的豌豆40 分钟前
Vue和React中的key:为什么列表渲染必须加这玩意儿?
前端·vue.js·面试
江城开朗的豌豆1 小时前
前端路由傻傻分不清?route和router的区别,看完这篇别再搞混了!
前端·javascript·vue.js
pengzhuofan1 小时前
Web开发系列-第0章 Web介绍
前端
小鱼人爱编程1 小时前
Java基石--反射让你直捣黄龙
前端·spring boot·后端
JosieBook2 小时前
【web应用】如何进行前后端调试Debug? + 前端JavaScript调试Debug?
前端·chrome·debug
LBJ辉2 小时前
2. Webpack 高级配置
前端·javascript·webpack