当前位置：首页 > news >正文

React-Hook

news 来源：原创 2025/4/27 14:36:56

一、基础 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)}// 哪些状态和回调函数需要在其他组件中使用，就returnreturn {value,toggle}
}