要制作一个自己的网站,网站服务器查询平台,动漫制作专业认知,网络宣传网站建设价格useState#xff1a;管理组件状态
useState 是一个用于在函数组件中添加状态的 Hook。它允许你在函数组件中声明一个状态变量#xff0c;并提供一个更新该状态的方法#xff0c;其中与组件生命周期的关系#xff1a;
初始化#xff1a;当组件首次渲染时#xff0c;useS…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 (divh1Count: {count}/h1button 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 pLoading.../p;if (error) return pError: {error.message}/p;return (divh1User Information/h1pName: {user.name}/ppEmail: {user.email}/ppPhone: {user.phone}/ppWebsite: {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 divResult: {expensiveCalculation}/div;
}function App() {const [count, setCount] useState(0);return (divExpensiveComponent 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 (divChildComponent onIncrement{handleIncrement} /pCount: {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 (divh1User Information/h1pName: {user.name}/ppEmail: {user.email}/ppPhone: {user.phone}/ppWebsite: {user.website}/p/div);}, [user]);// 使用 useCallback 优化性能避免不必要的函数重新创建const handleRefresh useCallback(() {setLoading(true);setUser(null);setError(null);fetchUser(); // 调用 fetchUser 函数重新获取数据}, [fetchUser]); // 添加 fetchUser 作为依赖if (loading) return pLoading.../p;if (error) return pError: {error.message}/p;return (div{userInfo}button onClick{handleRefresh}Refresh/button/div);
};export default UserInfo;总结
useState用于管理组件状态在组件初始化和更新时生效。useEffect用于执行副作用操作如数据获取和清理可以在组件挂载、更新和卸载时生效。useMemo用于 memoization避免不必要的计算可以在组件初始化和依赖变化时生效。useCallback用于 memoization避免不必要的函数重新创建可以在组件初始化和依赖变化时生效。
