React-Hook

news2025/4/27 10:11:36

一、基础 Hooks

1、useState - 状态管理

useState 是 React 提供的一个函数，用来在函数组件中声明和修改状态，没有它，函数组件只是一个“静态模板”；有了它，函数组件可以保存和更新数据（比如计数器数值、输入框内容）

import { useState } from 'react';
 
function Counter() {
  // 1. 声明一个状态变量 count，初始值为 0
  // 2. setCount 是修改 count 的专用函数
  const [count, setCount] = useState(0);
 
  return (
    <div>
      <p>当前计数：{count}</p>
      {/* 点击按钮时，调用 setCount 修改 count 的值 */}
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}

2、useEffect - 副作用处理

Effect Hook 可以让我们在函数组件中执行副作用操作。当我们在 React 更新 DOM 之后想运行一些额外的代码，比如发送网络请求、手动变更 DOM，记录日志可以使用Effect Hook，可以把 useEffect看做 componentDidMount，componentDidUpdate 的结合

基本结构：

useEffect(() => {
  // 副作用逻辑（如发送请求、操作 DOM）

  return () => {
    // 清理函数（如取消订阅、移除事件监听、关闭定时器）
  };
}, [依赖数组]); // 控制副作用何时执行

三种常见用法：

（1）依赖数组为空，只在组件初始时执行一次（类似 componentDidMount）

useEffect(() => {
  console.log('组件加载完成！');
  fetch('https://api.example.com/data') // 发送请求
    .then(response => response.json())
    .then(data => console.log(data));
 
  return () => {
    console.log('组件卸载时会执行这里！');
  };
}, []); // 依赖数组为空，表示不依赖任何变量，只执行一次

（2）传入特定依赖项，初始+依赖项变化时执行（类似 componentDidUpdate）

const [userId, setUserId] = useState(1);
 
useEffect(() => {
  console.log('userId 变化时重新请求数据');
  fetch(`https://api.example.com/users/${userId}`)
    .then(response => response.json())
    .then(data => console.log(data));
}, [userId]); // 当 userId 变化时，重新执行副作用

（3）没有依赖项，初始+每次渲染后执行

useEffect(() => {
  console.log('每次渲染后都会执行！');
}); // 没有依赖数组，每次渲染后都执行

清除副作用：在useEffect中编写的由渲染本身引起的对接组件外部的操作，社区也经常把它叫做副作用操作，比如在useEffect中开启了一个定时器，我们想在组件卸载时把这个定时器再清理掉，这个过程就是清理副作用，该函数会在组件卸载时自动执行

import { useState, useEffect } from 'react';
function App() {
  const [show, setShow] = useState(true)
  return (
    <div className="App">
      {show && <Son />}
      <button onClick={() => setShow(false)}>卸载Son组件</button>
    </div>
  );
}

function Son() {
  useEffect(() => {
    const timer = setInterval(() => {
      console.log('定时器运行中');
    }, 1000)
    return () => {
      clearInterval(timer) // 组件卸载时自动执行
    }
  }, [])
  return (
    <div>this is son</div>
  )
}

二、自定义Hooks

自定义Hook是以 use 打头的函数，通过自定义Hook函数可以用来实现逻辑的封装和复用

不使用自定义hooks实现点击按钮切换组件显示：

function App() {
  const [value, setValue] = useState(true)
  const toggle = () => {
    setValue(!value)
  }
  return (
    <div className="App">
      <button onClick={toggle}>toggle</button>
      {value && <div>this is div</div>}
    </div>
  );
}

使用自定义hooks实现点击按钮切换组件显示：

function App() {
  // const [value, setValue] = useState(true)
  // const toggle = () => {
  //   setValue(!value)
  // }
  const {value, toggle} = useToggle()
  return (
    <div className="App">
      <button onClick={toggle}>toggle</button>
      {value && <div>this is div</div>}
    </div>
  );
}

// 自定义hooks
function useToggle() {
  // 可复用的逻辑代码
  const [value, setValue] = useState(true)
  const toggle = () => {
    setValue(!value)
  }
  // 哪些状态和回调函数需要在其他组件中使用，就return
  return {
    value,
    toggle
  }
}