常用的 React Hooks 的介绍和示例

目录

  • [1. useState](#1. useState)
  • [2. useEffect](#2. useEffect)
  • [3. useContext](#3. useContext)
  • [4. useReducer](#4. useReducer)
  • [5. useCallback](#5. useCallback)
  • [6. useMemo](#6. useMemo)
  • [7. useRef](#7. useRef)
  • [8. useImperativeHandle](#8. useImperativeHandle)
  • [9. useLayoutEffect](#9. useLayoutEffect)
  • [10. useDebugValue](#10. useDebugValue)

常用的 React Hooks 的介绍和示例:

1. useState

useState 是一个用于在函数组件中添加状态的 Hook。

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

function Example() {
  const [count, setCount] = useState(0); // 初始化状态

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

2. useEffect

useEffect 是一个用于在函数组件中执行副作用(如数据获取、订阅或手动更改 DOM)的 Hook。

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

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

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

3. useContext

useContext 是一个用于在函数组件中访问 React Context 的 Hook。

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

const MyContext = React.createContext(null);

function Example() {
  const value = useContext(MyContext);

  return <div>{value}</div>;
}

4. useReducer

useReducer 是一个用于在函数组件中使用更复杂的状态逻辑的 Hook。

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 Example() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>
        Increment
      </button>
      <button onClick={() => dispatch({ type: 'decrement' })}>
        Decrement
      </button>
    </div>
  );
}

5. useCallback

useCallback 是一个用于缓存函数的 Hook,以避免不必要的重新渲染。

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

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

  const handleClick = useCallback(() => {
    setCount(count + 1);
  }, [count]);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
}

6. useMemo

useMemo 是一个用于缓存计算值的 Hook,以避免不必要的计算。

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

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

  const memoizedValue = useMemo(() => {
    return count * 2;
  }, [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <p>Memoized Value: {memoizedValue}</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

7. useRef

useRef 是一个用于在函数组件中访问 DOM 元素或存储可变值的 Hook。

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

function Example() {
  const inputRef = useRef(null);

  const focusInput = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} />
      <button onClick={focusInput}>Focus Input</button>
    </div>
  );
}

8. useImperativeHandle

useImperativeHandle 是一个用于自定义暴露给父组件的实例值的 Hook。

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

function FancyInput(props, ref) {
  const inputRef = useRef();

  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    }
  }));

  return <input ref={inputRef} />;
}

FancyInput = React.forwardRef(FancyInput);

function ParentComponent() {
  const inputRef = useRef();

  const focusInput = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <FancyInput ref={inputRef} />
      <button onClick={focusInput}>Focus Input</button>
    </div>
  );
}

9. useLayoutEffect

useLayoutEffect 是一个与 useEffect 类似的 Hook,但它会在所有 DOM 变更之后同步调用,而不是异步调用。

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

function Example() {
  useLayoutEffect(() => {
    console.log('This runs synchronously after all DOM changes');
  });

  return <div>Example</div>;
}

10. useDebugValue

useDebugValue 是一个用于在 React DevTools 中显示自定义 Hook 的调试值的 Hook。

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

function useCustomHook(initialValue) {
  const [value, setValue] = useState(initialValue);

  useDebugValue(`Current value: ${value}`);

  return [value, setValue];
}

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}
相关推荐
前端小巷子2 分钟前
web从输入网址到页面加载完成
前端·面试·浏览器
江城开朗的豌豆2 分钟前
Vue路由动态生成秘籍:让你的链接'活'起来!
前端·javascript·vue.js
晓得迷路了3 分钟前
栗子前端技术周刊第 88 期 - Apache ECharts 6.0 beta、Deno 2.4、Astro 5.11...
前端·javascript·echarts
江城开朗的豌豆8 分钟前
在写vue公用组件的时候,怎么提高可配置性
前端·javascript·vue.js
江城开朗的豌豆9 分钟前
Vue路由跳转的N种姿势,总有一种适合你!
前端·javascript·vue.js
江城开朗的豌豆9 分钟前
Vue路由玩法大揭秘:三种路由模式你Pick谁?
前端·javascript·vue.js
江城开朗的豌豆10 分钟前
Vue路由守卫全攻略:给页面访问装上'安检门'
前端·javascript·vue.js
小磊哥er17 分钟前
【前端工程化】前端组件模版构建那些事
前端
前端 贾公子17 分钟前
monorepo + Turborepo --- 开发应用程序
java·前端·javascript
江城开朗的豌豆22 分钟前
Vue路由传参避坑指南:params和query的那些猫腻
前端·javascript·vue.js