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

总结

相关推荐
蓝天白云下遛狗25 分钟前
goole chrome变更默认搜索引擎为百度
前端·chrome
come112341 小时前
Vue 响应式数据传递:ref、reactive 与 Provide/Inject 完全指南
前端·javascript·vue.js
前端风云志1 小时前
TypeScript结构化类型初探
javascript
musk12121 小时前
electron 打包太大 试试 tauri , tauri 安装打包demo
前端·electron·tauri
翻滚吧键盘2 小时前
js代码09
开发语言·javascript·ecmascript
万少2 小时前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
OpenGL3 小时前
Android targetSdkVersion升级至35(Android15)相关问题
前端
rzl023 小时前
java web5(黑马)
java·开发语言·前端
Amy.Wang3 小时前
前端如何实现电子签名
前端·javascript·html5
海天胜景3 小时前
vue3 el-table 行筛选 设置为单选
javascript·vue.js·elementui