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

React 内置的Hook学习

news 2025/7/27 19:10:59

`useState`：管理组件状态

useState 是一个用于在函数组件中添加状态的 Hook。它允许你在函数组件中声明一个状态变量，并提供一个更新该状态的方法，其中与组件生命周期的关系：

初始化：当组件首次渲染时，useState 返回的初始状态值。
更新：当状态更新时，React 会重新渲染组件，并使用新的状态值。

const [state, setState] = useState(initialState);// state：当前状态的值。
// setState：更新状态的函数。
// initialState：初始状态的值。

import React, { useState } from 'react';function Counter() {const [count, setCount] = useState(0);const incrementCount = () => {setCount(count + 1);};return (<div><h1>Count: {count}</h1><button onClick={incrementCount}>+1</button></div>);
}export default Counter;

`useEffect`：用于在函数组件中执行副作用操作

`useEffect` 是一个用于在函数组件中执行副作用操作的 Hook。它可以替代类组件中的 `componentDidMount`、`componentDidUpdate` 和 `componentWillUnmount` 生命周期方法,其中与组件生命周期的关系：

组件挂载：当组件首次渲染时，useEffect 的回调函数会被执行。
组件更新：当组件重新渲染且依赖数组中的值发生变化时，useEffect 的回调函数会被执行。
组件卸载：当组件卸载时，useEffect 返回的清理函数会被执行。

useEffect(() => {// 副作用操作return () => {// 清理操作};
}, [dependencies]);/*** () => {}：副作用操作的回调函数。* return () => {}：可选的清理函数，用于在组件卸载或下次渲染前执行清理操作。* [dependencies]：依赖数组，用于控制何时触发副作用操作。空数组 [] 表示只在组件挂载和卸载时执行。*/

import React, { useState, useEffect } from 'react';function UserInfo() {const [user, setUser] = useState(null);const [loading, setLoading] = useState(true);const [error, setError] = useState(null);useEffect(() => {const fetchUser = async () => {try {const response = await fetch('https://jsonplaceholder.typicode.com/users/1');if (!response.ok) {throw new Error('Network response was not ok');}const data = await response.json();setUser(data);} catch (error) {setError(error);} finally {setLoading(false);}};fetchUser();// 清理函数return () => {console.log('Cleanup function called');};}, []); // 空依赖数组表示只在组件挂载和卸载时执行if (loading) return <p>Loading...</p>;if (error) return <p>Error: {error.message}</p>;return (<div><h1>User Information</h1><p>Name: {user.name}</p><p>Email: {user.email}</p><p>Phone: {user.phone}</p><p>Website: {user.website}</p></div>);
}export default UserInfo;

`useMemo`：优化性能，避免不必要的重新计算

`useMemo` 是一个用于 memoization（记忆化）的 Hook。它可以在某些情况下避免昂贵的计算，从而提高性能，与组件生命周期的关系：

初始化：当组件首次渲染时，useMemo 会计算并返回结果。
更新：当依赖数组中的值发生变化时，useMemo 会重新计算并返回新的结果。
不变：当依赖数组中的值没有变化时，useMemo 会返回上次计算的结果，避免重新计算。

const memoizedValue = useMemo(() => {// 计算结果
}, [dependencies]);// () => {}：计算结果的回调函数。// [dependencies]：依赖数组，用于控制何时重新计算。即当依赖数组中的值发生变化时，才会重新计算。

import React, { useState, useMemo } from 'react';function ExpensiveComponent({ count }) {const expensiveCalculation = useMemo(() => {let result = 0;for (let i = 0; i < 1000000; i++) {result += i * count;}return result;}, [count]);return <div>Result: {expensiveCalculation}</div>;
}function App() {const [count, setCount] = useState(0);return (<div><ExpensiveComponent count={count} /><button onClick={() => setCount(count + 1)}>+1</button></div>);
}export default App;

`useCallback`：优化性能，避免不必要的函数重新创建

`useCallback` 是一个用于 memoization（记忆化）函数的 Hook。它可以在某些情况下避免不必要的函数重新创建，从而提高性能，与组件生命周期的关系：

初始化：当组件首次渲染时，useCallback 会返回一个 memoized 的函数。
更新：当依赖数组中的值发生变化时，useCallback 会返回一个新的函数。
不变：当依赖数组中的值没有变化时，useCallback 会返回上次 memoized 的函数，避免重新创建。

const memoizedCallback = useCallback(() => {// 回调函数
}, [dependencies]);// () => {}：回调函数。// [dependencies]：依赖数组，用于控制何时重新创建回调函数。即当依赖数组中的值发生变化时，才会返回新的函数。

import React, { useState, useCallback } from 'react';function ChildComponent({ onIncrement }) {return (<button onClick={onIncrement}>+1</button>);
}function ParentComponent() {const [count, setCount] = useState(0);const handleIncrement = useCallback(() => {setCount(count + 1);}, [count]);return (<div><ChildComponent onIncrement={handleIncrement} /><p>Count: {count}</p></div>);
}export default ParentComponent;

应用

import React, { useState, useEffect, useMemo, useCallback } from "react";const UserInfo = () => {const [user, setUser] = useState(null);const [loading, setLoading] = useState(true);const [error, setError] = useState(null);// 定义 fetchUser 函数const fetchUser = async () => {try {const response = await fetch("https://jsonplaceholder.typicode.com/users/1");if (!response.ok) {throw new Error("Network response was not ok");}const data = await response.json();setUser(data);} catch (error) {setError(error);} finally {setLoading(false);}};// 使用 useEffect 替代 componentDidMount 和 componentDidUpdateuseEffect(() => {fetchUser();// 清理函数，替代 componentWillUnmountreturn () => {console.log("Cleanup function called");};}, []); // 空依赖数组表示只在组件挂载和卸载时执行// 使用 useMemo 优化性能，避免不必要的重新计算const userInfo = useMemo(() => {if (!user) return null;return (<div><h1>User Information</h1><p>Name: {user.name}</p><p>Email: {user.email}</p><p>Phone: {user.phone}</p><p>Website: {user.website}</p></div>);}, [user]);// 使用 useCallback 优化性能，避免不必要的函数重新创建const handleRefresh = useCallback(() => {setLoading(true);setUser(null);setError(null);fetchUser(); // 调用 fetchUser 函数重新获取数据}, [fetchUser]); // 添加 fetchUser 作为依赖if (loading) return <p>Loading...</p>;if (error) return <p>Error: {error.message}</p>;return (<div>{userInfo}<button onClick={handleRefresh}>Refresh</button></div>);
};export default UserInfo;