React中hooks的理解以及作用

最新推荐文章于 2025-06-15 13:00:05 发布

酒江

最新推荐文章于 2025-06-15 13:00:05 发布

阅读量699

点赞数 20

CC 4.0 BY-SA版权

文章标签： react.js javascript 前端

本文链接：https://blog.youkuaiyun.com/qq_60535125/article/details/146086180

React Hooks 是 React 16.8 引入的一项特性，它允许你在函数组件中使用状态（state）和其他 React 特性（如生命周期方法），而无需编写类组件。Hooks 提供了一种更简洁、更灵活的方式来管理组件的逻辑。

1. Hooks 的作用

Hooks 的主要作用是：

在函数组件中使用状态：通过 useState，函数组件可以拥有自己的状态。
复用逻辑：通过自定义 Hooks，可以将组件逻辑提取到可重用的函数中。
替代生命周期方法：通过 useEffect，可以在函数组件中执行副作用操作（如数据获取、订阅等）。
简化代码：Hooks 让函数组件更简洁，避免了类组件中的 this 和复杂的生命周期方法。

2. 常用的 Hooks

(1) useState

作用：用于在函数组件中添加状态。

示例：

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // 初始值为 0

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

count 是状态值，setCount 是更新状态的函数。

(2) useEffect

作用：用于在函数组件中执行副作用操作（如数据获取、DOM 操作、订阅等）。

示例：

import React, { useState, useEffect } from 'react';

function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds(seconds => seconds + 1);
    }, 1000);

    return () => clearInterval(interval); // 清除副作用
  }, []); // 空数组表示只在组件挂载和卸载时执行

  return <div>Seconds: {seconds}</div>;
}

useEffect 接收两个参数：副作用函数和依赖数组。
依赖数组为空时，副作用函数只在组件挂载和卸载时执行。

(3) useContext

作用：用于在函数组件中访问 React 的 Context。

示例：

import React, { useContext } from 'react';

const ThemeContext = React.createContext('light');

function ThemedButton() {
  const theme = useContext(ThemeContext); // 获取 Context 值

  return <button style={{ background: theme === 'dark' ? '#333' : '#fff' }}>Themed Button</button>;
}

(4) useReducer

作用：用于管理复杂的状态逻辑，类似于 Redux 的 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);

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

(5) useRef

作用：用于保存可变值（如 DOM 引用），且不会触发组件重新渲染。

示例：

import React, { useRef } from 'react';

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

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

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

(6) 自定义 Hooks

作用：将组件逻辑提取到可重用的函数中。

示例：

import { useState, useEffect } from 'react';

function useFetch(url) {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch(url)
      .then(response => response.json())
      .then(data => setData(data));
  }, [url]);

  return data;
}

function MyComponent() {
  const data = useFetch('https://api.example.com/data');

  if (!data) return <div>Loading...</div>;

  return <div>{data.message}</div>;
}