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

React Hooks 基础指南

React Hooks 是 React 16.8 引入的重要特性,它允许开发者在函数组件中使用状态和其他 React 特性。本文将详细介绍 6 个最常用的 React Hooks。

1. useState

useState 是最常用的 Hook,用于在函数组件中添加 state。

import React, { useState } from 'react';function Counter() {// 声明一个叫做 "count" 的 state 变量,初始值为 0const [count, setCount] = useState(0);return (<div><p>You clicked {count} times</p><button onClick={() => setCount(count + 1)}>Click me</button></div>);
}

useState 返回一个数组,第一个元素是当前状态值,第二个元素是更新状态的函数。

2. useEffect

useEffect 用于在函数组件中执行副作用操作,例如数据获取、订阅或手动更改 DOM。

import React, { useState, useEffect } from 'react';function Example() {const [count, setCount] = useState(0);// 类似于 componentDidMount 和 componentDidUpdateuseEffect(() => {// 使用浏览器 API 更新文档标题document.title = `You clicked ${count} times`;// 清除副作用return () => {document.title = 'React App';};}, [count]); // 仅在 count 更改时重新运行return (<div><p>You clicked {count} times</p><button onClick={() => setCount(count + 1)}>Click me</button></div>);
}

useEffect 接受两个参数:一个包含副作用逻辑的函数和一个依赖数组。

3. useContext

useContext 接受一个 context 对象(React.createContext 的返回值)并返回该 context 的当前值。

import React, { useContext } from 'react';const ThemeContext = React.createContext('light');function ThemeButton() {const theme = useContext(ThemeContext);return <button style={{ background: theme }}>Theme Button</button>;
}function App() {return (<ThemeContext.Provider value="dark"><ThemeButton /></ThemeContext.Provider>);
}

useContext 使得在函数组件中访问上下文变得非常简单。

4. useReducer

useReducer 是 useState 的替代方案,适用于 state 逻辑较复杂且包含多个子值,或下一个 state 依赖于之前的 state 的情况。

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

useReducer 特别适合管理复杂的状态逻辑。

5. useRef

useRef 返回一个可变的 ref 对象,该对象的 .current 属性被初始化为传入的参数。常用于访问 DOM 元素或存储可变值。

import React, { useRef } from 'react';function TextInputWithFocusButton() {const inputEl = useRef(null);const onButtonClick = () => {// 使用原生 DOM API 聚焦文本输入inputEl.current.focus();};return (<div><input ref={inputEl} type="text" /><button onClick={onButtonClick}>Focus the input</button></div>);
}

useRef 的值在组件重新渲染时保持不变。

6. useMemo 和 useCallback

这两个 Hook 都用于性能优化。

6.1. useMemo 用法

import React, { useMemo } from 'react';function ExpensiveCalculationComponent({ number }) {const compute = (n) => {console.log('Expensive computation');return n * 2;};const result = useMemo(() => compute(number), [number]);return <div>Result: {result}</div>;
}

6.2. useCallback 用法

import React, { useState, useCallback } from 'react';function Button({ onClick, children }) {return <button onClick={onClick}>{children}</button>;
}function App() {const [count, setCount] = useState(0);const handleClick = useCallback(() => {setCount(count + 1);}, [count]);return (<div><p>Count: {count}</p><Button onClick={handleClick}>Increment</Button></div>);
}

useMemo 用于记忆化计算结果,useCallback 用于记忆化函数,两者都只在依赖项变化时重新计算。

7. 总结

React Hooks 提供了一种更简洁、更直观的方式来使用 React 的特性。从简单的状态管理到复杂的副作用处理,Hooks 都能提供优雅的解决方案。掌握这些基础 Hook 是成为高效 React 开发者的关键一步。

http://www.lqws.cn/news/163441.html

相关文章:

  • 如果科技足够发达,是否还需要维持自然系统(例如生物多样性)中那种‘冗余’和‘多样性’,还是可以只保留最优解?
  • Python数据可视化科技图表绘制系列教程(四)
  • 动静态库的使用(Linux下)
  • 好得睐:以品质守味、以科技筑基,传递便捷与品质
  • Cilium动手实验室: 精通之旅---6.Cilium IPv6 Networking and Observability - Lab
  • 【2025年】解决Burpsuite抓不到https包的问题
  • 灵活控制,modbus tcp转ethernetip的 多功能水处理方案
  • 兰亭妙微 | 医疗软件的界面设计能有多专业?
  • 【QT】显示类控件
  • three.js中使用tween.js的chain实现动画依次执行
  • Python训练营打卡Day45
  • 【LLIE专题】NTIRE 2025 低照度图像增强第二名方案
  • Chrome密码和自动填充突然都没了
  • 【Oracle】分区表
  • CppCon 2015 学习:CLANG/C2 for Windows
  • 什么是DevOps智能平台的核心功能?
  • uni-app学习笔记二十二---使用vite.config.js全局导入常用依赖
  • 编程技能:格式化打印05,格式控制符
  • 通过SAE实现企业应用的云上托管
  • std__map,std__unordered_map,protobuf__map之间的性能比较
  • 【git】把本地更改提交远程新分支feature_g
  • [蓝桥杯]耐摔指数
  • word公式_latex
  • 【西门子杯工业嵌入式-2-点亮一颗LED】
  • 2024年09月 C/C++(六级)真题解析#中国电子学会#全国青少年软件编程等级考试
  • 基于红黑树的插入功能,对Set和Map部分功能进行封装实现
  • Python训练第四十五天
  • 【C#】异步和多线程
  • 力扣HOT100之二分查找: 34. 在排序数组中查找元素的第一个和最后一个位置
  • 【高等数学】函数项级数