兼职做网站挣钱么,开发网站的步骤,建立全国统一的突发事件信息系统的是什么机构,php网站开发项目实战React基础学习-Day04
常见的钩子函数及基础使用方式
1.useState
useState 是 React 的一个 Hook#xff0c;用于在函数组件中添加状态。它返回一个状态变量和一个更新该状态的函数。与类组件的 this.state 和 this.setState 相对应#xff0c;useState 让函数组件也能拥有…React基础学习-Day04
常见的钩子函数及基础使用方式
1.useState
useState 是 React 的一个 Hook用于在函数组件中添加状态。它返回一个状态变量和一个更新该状态的函数。与类组件的 this.state 和 this.setState 相对应useState 让函数组件也能拥有和管理状态。
基本用法
以下是 useState 的基本用法示例
import React, { useState } from react;const Counter () {// 声明一个名为 count 的状态变量初始值为 0const [count, setCount] useState(0);return (divpCount: {count}/pbutton onClick{() setCount(count 1)}Increment/button/div);
};export default Counter;在这个示例中useState(0) 声明了一个名为 count 的状态变量并将其初始值设为 0。setCount 是更新 count 状态的函数。当点击按钮时调用 setCount(count 1) 将 count 增加 1并重新渲染组件。
多个状态
可以在同一个组件中使用多个 useState 声明不同的状态变量
import React, { useState } from react;const UserProfile () {const [name, setName] useState(Alice);const [age, setAge] useState(25);return (divpName: {name}/ppAge: {age}/pbutton onClick{() setName(Bob)}Change Name/buttonbutton onClick{() setAge(age 1)}Increase Age/button/div);
};export default UserProfile;在这个示例中我们使用了两个 useState Hook一个用于管理 name 状态另一个用于管理 age 状态。每个状态都有自己独立的更新函数。
初始化状态
useState 可以接受一个函数作为初始状态这个函数在初始渲染时会被调用用于计算初始状态。这对于需要复杂计算才能得到初始状态的情况非常有用。
import React, { useState } from react;const ExpensiveComponent () {const [value, setValue] useState(() {// 模拟一个耗时的计算const initialValue computeExpensiveValue();return initialValue;});return (divpValue: {value}/pbutton onClick{() setValue(value 1)}Increment/button/div);
};const computeExpensiveValue () {// 这里模拟一个复杂的计算console.log(Computing expensive value...);return 42;
};export default ExpensiveComponent;在这个示例中useState 接受一个函数该函数只在初始渲染时被调用一次用于计算初始状态值。
注意事项
每次调用 setState 更新状态时React 会重新渲染组件。更新状态是异步的因此在调用 setState 后立即读取状态可能不会得到最新的值。可以通过函数式更新来确保状态更新基于最新的状态值
const [count, setCount] useState(0);const increment () {setCount(prevCount prevCount 1);
};在这个示例中setCount 接受一个函数该函数的参数是之前的状态值返回的新状态值将基于之前的状态值进行更新。
完整示例
以下是一个使用多个状态和函数式更新的完整示例
import React, { useState } from react;const App () {const [count, setCount] useState(0);const [text, setText] useState(Hello);const increment () {setCount(prevCount prevCount 1);};const changeText () {setText(prevText prevText Hello ? World : Hello);};return (divpCount: {count}/ppText: {text}/pbutton onClick{increment}Increment Count/buttonbutton onClick{changeText}Change Text/button/div);
};export default App;在这个示例中我们使用了 useState 来管理两个独立的状态变量 count 和 text并使用函数式更新确保状态更新基于最新的状态值。这有助于避免状态更新的竞争条件。
psuseState的第一个参数用函数可以使用异步函数吗
useState 的第一个参数是初始状态它可以是一个值或者是一个函数但这个函数必须是同步的。React 不支持在 useState 的初始状态函数中使用异步函数。useState 的初始状态函数只会在组件的初始渲染时被调用一次并且它是同步的。
如果你需要在组件初始化时从异步操作中获取数据并设置状态你可以在 useEffect Hook 中执行异步操作并在操作完成后更新状态。
以下是一个如何使用 useEffect 和 useState 来处理异步操作的示例
import React, { useState, useEffect } from react;const FetchDataComponent () {const [data, setData] useState(null);const [loading, setLoading] useState(true);const [error, setError] useState(null);useEffect(() {const fetchData async () {try {const response await fetch(https://api.example.com/data);if (!response.ok) {throw new Error(Network response was not ok);}const result await response.json();setData(result);} catch (error) {setError(error);} finally {setLoading(false);}};fetchData();}, []); // 空数组意味着这个 effect 只会在组件挂载和卸载时执行一次if (loading) {return divLoading.../div;}if (error) {return divError: {error.message}/div;}return (divh1Fetched Data:/h1pre{JSON.stringify(data, null, 2)}/pre/div);
};export default FetchDataComponent;在这个示例中
useState 用于管理组件的状态包括 data、loading 和 error。useEffect 用于执行异步数据获取操作。当组件首次挂载时这个 effect 会运行触发 fetchData 异步函数。fetchData 异步函数使用 fetch 从 API 获取数据。如果成功数据将被存储在 data 状态中并且 loading 状态被设置为 false。如果出现错误error 状态将被设置并且 loading 状态同样被设置为 false。
这样虽然不能在 useState 的初始状态函数中使用异步函数但可以通过 useEffect 来实现异步数据获取和状态管理。
2.useEffect
useEffect 是 React 的一个 Hook用于在函数组件中执行副作用操作。副作用操作包括数据获取、订阅、手动 DOM 操作以及在组件更新或卸载时执行清理任务。useEffect 可以看作是 componentDidMount、componentDidUpdate 和 componentWillUnmount 的组合。
基本用法
以下是 useEffect 的基本用法示例
import React, { useState, useEffect } from react;const ExampleComponent () {const [count, setCount] useState(0);// useEffect 中的函数会在组件渲染后执行useEffect(() {document.title Count: ${count};}, [count]); // 依赖项数组return (divpCount: {count}/pbutton onClick{() setCount(count 1)}Increment/button/div);
};export default ExampleComponent;在这个示例中useEffect 中的函数会在组件每次渲染后执行。依赖项数组 [count] 指定了只有当 count 状态发生变化时useEffect 才会重新运行。
依赖项数组
useEffect 的第二个参数是依赖项数组指定了哪些状态或属性的变化会触发 useEffect 的重新运行
空数组 []仅在组件挂载和卸载时运行一次。未指定依赖项数组在每次组件渲染后都会运行。特定依赖项当依赖项发生变化时才会运行。
清理副作用
如果 useEffect 返回一个函数这个函数会在组件卸载时或在下一次执行副作用前被调用用于清理副作用。例如清理订阅或取消定时器
import React, { useState, useEffect } from react;const TimerComponent () {const [seconds, setSeconds] useState(0);useEffect(() {const interval setInterval(() {setSeconds(prevSeconds prevSeconds 1);}, 1000);// 返回一个清理函数在组件卸载时清除定时器return () clearInterval(interval);}, []); // 空数组意味着这个 effect 只会在组件挂载和卸载时执行一次return (divpSeconds: {seconds}/p/div);
};export default TimerComponent;在这个示例中useEffect 设置了一个定时器每秒更新一次 seconds 状态。在 useEffect 中返回的清理函数会在组件卸载时被调用以清除定时器。
数据获取示例
以下是一个使用 useEffect 执行数据获取操作的示例
import React, { useState, useEffect } from react;const FetchDataComponent () {const [data, setData] useState(null);const [loading, setLoading] useState(true);const [error, setError] useState(null);useEffect(() {const fetchData async () {try {const response await fetch(https://api.example.com/data);if (!response.ok) {throw new Error(Network response was not ok);}const result await response.json();setData(result);} catch (error) {setError(error);} finally {setLoading(false);}};fetchData();}, []); // 空数组意味着这个 effect 只会在组件挂载和卸载时执行一次if (loading) {return divLoading.../div;}if (error) {return divError: {error.message}/div;}return (divh1Fetched Data:/h1pre{JSON.stringify(data, null, 2)}/pre/div);
};export default FetchDataComponent;在这个示例中useEffect 用于执行异步数据获取操作。组件挂载时fetchData 函数会运行并在数据获取成功后更新 data 状态。如果出现错误error 状态会被更新。
总结
useEffect 是一个功能强大的 Hook用于在函数组件中管理副作用操作。通过合理使用依赖项数组和清理函数useEffect 可以帮助我们在组件的生命周期中执行和管理各种副作用。
3.useContext
useContext 是 React 的一个 Hook用于在函数组件中读取和使用 React 上下文Context。上下文允许您在组件树中传递数据而不必手动逐层传递 props。
基本用法
以下是 useContext 的基本用法示例
假设我们有一个上下文对象 ThemeContext
import React, { createContext, useContext, useState } from react;// 创建一个上下文对象
const ThemeContext createContext();// 上下文的提供者组件
const ThemeProvider ({ children }) {const [theme, setTheme] useState(light);const toggleTheme () {setTheme(prevTheme (prevTheme light ? dark : light));};return (ThemeContext.Provider value{{ theme, toggleTheme }}{children}/ThemeContext.Provider);
};// 使用上下文的消费者组件
const ThemeConsumerComponent () {const { theme, toggleTheme } useContext(ThemeContext);return (divpCurrent Theme: {theme}/pbutton onClick{toggleTheme}Toggle Theme/button/div);
};// 在组件树中使用 ThemeProvider 包裹所有需要访问 theme 上下文的组件
const App () {return (ThemeProviderThemeConsumerComponent //ThemeProvider);
};export default App;在这个示例中
ThemeContext 是一个上下文对象通过 createContext() 创建。ThemeProvider 是一个提供者组件使用 ThemeContext.Provider 包装其子组件并通过 value 属性传递 theme 和 toggleTheme 函数。ThemeConsumerComponent 是一个消费者组件使用 useContext(ThemeContext) 来订阅 ThemeContext 上下文。它从上下文中读取 theme 和 toggleTheme并在按钮点击时切换主题。
注意事项
使用 createContext() 创建上下文对象。使用 Provider 组件包裹子组件并通过 value 属性传递数据。在需要访问上下文数据的组件中使用 useContext(ThemeContext)。
多个上下文
您可以在应用程序中使用多个上下文。每个上下文对象都应该有自己的提供者和消费者组件。React 会确保正确的数据传递和更新。
总结
useContext Hook 提供了一种轻松地在函数组件中使用 React 上下文的方式。它使得组件可以更简洁地订阅和使用跨组件树的数据。通过 useContext您可以避免 props drilling提高组件的可重用性和可维护性。
4.useReducer
一、介绍useReducer的重要性和优势
useReducer是 React 中的一个 Hook用于管理应用状态。它提供了一种更简洁、更易于理解的方式来处理复杂的状态逻辑。
重要性
状态管理在 React 应用中状态管理是至关重要的。useReducer允许开发者以更清晰和集中的方式管理应用的状态。 复杂状态逻辑对于涉及多个状态变量和复杂的更新逻辑的场景使用useReducer可以更好地组织和维护代码。 可预测的状态更新useReducer使用函数来更新状态这使得状态更新更加可预测和易于理解。 更好的代码可读性通过使用useReducer可以将状态更新逻辑拆分为独立的函数提高代码的可读性和可维护性。 优势
简化代码相比使用多个 useState 钩子来管理复杂的状态useReducer 可以减少代码的冗余。 更好的性能useReducer在某些情况下可以提供更好的性能尤其是在处理大量状态更新时。 状态的合并useReducer支持合并多个更新操作从而减少不必要的重新渲染。 清晰的状态更新逻辑使用useReducer可以将状态更新逻辑放在一个单独的函数中使其更加清晰和易于理解。 总之useReducer对于处理复杂的状态逻辑和更好地组织状态更新非常有用。它提供了一种更简洁、可预测和可读性更高的方式来管理应用状态。在需要处理复杂状态的情况下推荐使用useReducer。
二、useReducer的基本概念
解释useReducer的定义和作用 useReducer是React Hooks中的一个函数它用于在React应用程序中实现状态管理。useReducer函数接收两个参数一个是reducer函数另一个是初始状态。reducer函数接收两个参数一个是当前状态另一个是action对象。action对象通常包含一个type属性表示要进行的操作以及可能的其他属性。
useReducer函数返回一个数组数组的第一个元素是当前状态第二个元素是一个函数该函数用于更新状态。当组件需要更新状态时它将调用该函数并将新状态作为参数传递给它。该函数将使用reducer函数来计算新状态并将其返回给组件。
下面是一个简单的示例演示如何使用useReducer来管理计数器状态
import React, { useReducer } from react;function reducer(state, action) {switch (action.type) {case increment:return state 1;case decrement:return state - 1;default:throw new Error();}
}function Counter() {const [state, dispatch] useReducer(reducer, 0);const handleIncrement () {dispatch({ type: increment });};const handleDecrement () {dispatch({ type: decrement });};return (divh1{state}/h1button onClick{handleIncrement}/buttonbutton onClick{handleDecrement}-/button/div);
}在这个示例中我们定义了一个reducer函数reducer它接收两个参数当前状态state和action对象action。action对象包含一个type属性表示要进行的操作。然后我们使用useReducer函数将reducer函数和初始状态传递给组件。useReducer函数返回一个数组数组的第一个元素是当前状态第二个元素是一个函数用于更新状态。
我们定义了两个函数handleIncrement和handleDecrement分别用于处理加1和减1操作。然后我们将这些函数绑定到按钮的onClick事件上以便在按钮被点击时调用它们。
最后我们将当前状态显示在页面上以便用户可以看到计数器的值在不断变化。当用户点击按钮时我们将调用dispatch函数并将相应的action对象传递给它。dispatch函数将调用reducer函数来计算新状态并将新状态返回给组件。
总之useReducer函数在React应用程序中提供了一个简单、高效的状态管理解决方案可以用于管理复杂的应用程序状态。
与其他状态管理方法进行比较 以下是使用表格总结的useReducer与其他状态管理方法的比较
方法 描述 优点 缺点 useState React内置的状态管理方法用于管理简单的状态。 简单易用 无法处理复杂的业务逻辑 useEffect 用于在函数组件中添加副作用如数据获取、订阅等。 灵活性高 需要在组件内手动处理副作用 useContext 用于在不同组件之间共享状态而不需要显式地传递状态。 共享状态简单易用 无法处理副作用 useReducer 用于管理复杂的状态如复杂的业务逻辑、表格数据等。 灵活性高易于处理复杂的业务逻辑 需要手动编写reducer函数 从表格中可以看出useReducer方法在处理复杂的状态上具有优势因为它可以方便地使用reducer函数来处理复杂的业务逻辑。同时它也可以处理副作用如数据获取、订阅等。但是它需要手动编写reducer函数这可能会增加一些复杂性。而useState和useEffect方法则更适合处理简单的状态和管理副作用。useContext方法则更适合在不同组件之间共享状态。
总之选择哪种状态管理方法取决于具体的需求和组件的结构。在实际开发中可以根据项目的规模和复杂度来选择合适的状态管理方法。
三、useReducer的使用示例
解释useReducer的参数和返回值 useReducer 是一个 React 状态管理方法它的参数和返回值如下
参数
reducer 函数这个函数接收两个参数分别是当前状态state和一个 action。该函数的作用是处理传入的状态并返回一个新的状态。 initialState状态的初始值。 返回值
新的 state由 reducer 函数处理后返回的新状态。 dispatch 函数用于发送一个对象action给 reducer 函数以更新状态并触发重新渲染。 展示如何更新状态和触发重新渲染 以下是使用 useReducer 更新状态和触发重新渲染的示例
import React, { useReducer } from react;const initialState {count: 0
};function reducer(state, action) {switch (action.type) {case increment:return {...state,count: state.count 1};case decrement:return {...state,count: state.count - 1};default:return state;}
}function MyComponent() {// 使用 useReducer 来创建状态和更新函数const [state, dispatch] useReducer(reducer, initialState);const handleIncrement () {// 发送一个 increment 类型的 action 来更新状态dispatch({ type: increment });};const handleDecrement () {// 发送一个 decrement 类型的 action 来更新状态dispatch({ type: decrement });};return (divh1{state.count}/h1button onClick{handleIncrement}/buttonbutton onClick{handleDecrement}-/button/div);
}export default MyComponent;在上述示例中使用 useReducer 创建了一个状态 count初始值为 0。定义了一个 reducer 函数来处理状态的更新。reducer 函数根据不同的 action.type 来执行相应的状态更新操作。
通过调用 dispatch 函数并传入一个对象作为 action可以更新状态。在示例中点击 “” 按钮会发送一个 increment 类型的 action点击 “-” 按钮会发送一个 decrement 类型的 action。
当状态更新后组件会重新渲染显示最新的状态值。
5.useRef
useRef 是 React 的一个 Hook用于在函数组件中创建可变的引用对象。与 useState 不同useRef 返回一个可变的 ref 对象其 .current 属性被初始化为传入的参数initialValue。返回的 ref 对象在组件的整个生命周期中保持不变不会因重新渲染而重新创建。
主要用途 获取 DOM 元素的引用 import React, { useRef, useEffect } from react;const TextInputComponent () {const inputRef useRef(null);useEffect(() {// 在组件加载后聚焦到输入框inputRef.current.focus();}, []);return (divinput typetext ref{inputRef} /button onClick{() inputRef.current.focus()}Focus Input/button/div);
};export default TextInputComponent;在这个示例中useRef 创建了一个 inputRef 对象并将其赋值给 input 元素的 ref 属性。通过 inputRef.current 可以访问到真实的 DOM 元素比如调用 .focus() 方法来聚焦输入框。 保存任意可变值 import React, { useRef } from react;const CounterComponent () {const countRef useRef(0);const increment () {countRef.current;console.log(Current count:, countRef.current);};return (divpCount: {countRef.current}/pbutton onClick{increment}Increment/button/div);
};export default CounterComponent;在这个示例中useRef 创建了一个 countRef 对象并初始化为 0。在 increment 函数中通过修改 countRef.current 来更新计数器的值而不需要触发组件的重新渲染。 保存上一个 props 或 state import React, { useRef, useEffect } from react;const PreviousValueComponent ({ value }) {const prevValueRef useRef();useEffect(() {prevValueRef.current value;});const prevValue prevValueRef.current;return (divpCurrent Value: {value}/ppPrevious Value: {prevValue ! undefined ? prevValue : N/A}/p/div);
};export default PreviousValueComponent;在这个示例中通过 useRef 创建了 prevValueRef 对象用于保存 value 的上一个值。通过在 useEffect 中更新 prevValueRef.current可以在组件的重新渲染中获取到上一个 value 的值。
注意事项
useRef 创建的 ref 对象在组件的整个生命周期中保持不变不会因重新渲染而重新创建。修改 useRef 创建的 ref 对象的 .current 属性不会触发组件的重新渲染。可以通过 useRef 来保存和访问 DOM 元素的引用、保存任意可变值以及保存上一个 props 或 state 的值。
6.useCallback
useCallback 是 React 的一个 Hook它返回一个记忆化的回调函数用于优化函数组件的性能防止不必要的重新渲染和重新创建函数。在依赖项没有发生变化时useCallback 返回的函数引用保持不变从而避免子组件因为父组件的函数变化而重新渲染。
基本用法
以下是 useCallback 的基本用法示例
import React, { useState, useCallback } from react;const ChildComponent React.memo(({ onClick }) {console.log(Rendering ChildComponent);return button onClick{onClick}Click me/button;
});const ParentComponent () {const [count, setCount] useState(0);const handleClick useCallback(() {console.log(Button clicked);}, []);return (divpCount: {count}/pbutton onClick{() setCount(count 1)}Increment Count/buttonChildComponent onClick{handleClick} //div);
};export default ParentComponent;在这个示例中handleClick 函数使用了 useCallback并且依赖项数组为空[]这意味着 handleClick 函数在组件的整个生命周期中只会创建一次。这样ChildComponent 组件不会因为 ParentComponent 重新渲染而重新渲染因为 onClick 属性的引用没有变化。
依赖项数组
useCallback 的第二个参数是依赖项数组只有当依赖项数组中的某个依赖项发生变化时才会重新创建回调函数。例如
import React, { useState, useCallback } from react;const ChildComponent React.memo(({ onClick }) {console.log(Rendering ChildComponent);return button onClick{onClick}Click me/button;
});const ParentComponent () {const [count, setCount] useState(0);const [text, setText] useState(Hello);const handleClick useCallback(() {console.log(Button clicked with text:, text);}, [text]);return (divpCount: {count}/ppText: {text}/pbutton onClick{() setCount(count 1)}Increment Count/buttonbutton onClick{() setText(text Hello ? World : Hello)}Change Text/buttonChildComponent onClick{handleClick} //div);
};export default ParentComponent;在这个示例中handleClick 函数依赖于 text 状态。每当 text 状态发生变化时handleClick 函数都会重新创建。这确保了 handleClick 始终使用最新的 text 值。
何时使用 useCallback
useCallback 在以下情况下特别有用
传递回调函数给子组件且子组件依赖于回调函数的引用。回调函数在组件重新渲染时不需要重新创建。优化性能防止因函数引用变化导致的子组件不必要的重新渲染。
注意事项
useCallback 仅用于记忆化回调函数避免不必要的函数重新创建和子组件重新渲染。过度使用 useCallback 可能导致代码复杂性增加应根据实际需要使用。记忆化函数会占用内存特别是当依赖项变化频繁时可能会影响性能。
示例总结
以下是一个使用 useCallback 优化回调函数的完整示例
import React, { useState, useCallback } from react;const ChildComponent React.memo(({ onClick }) {console.log(Rendering ChildComponent);return button onClick{onClick}Click me/button;
});const ParentComponent () {const [count, setCount] useState(0);const handleClick useCallback(() {console.log(Button clicked);}, []);return (divpCount: {count}/pbutton onClick{() setCount(count 1)}Increment Count/buttonChildComponent onClick{handleClick} //div);
};export default ParentComponent;在这个示例中handleClick 函数使用了 useCallback确保在父组件重新渲染时不会重新创建从而避免了子组件的重新渲染提高了性能。
7.useMemo
useMemo定义
useMemo是 React 框架中的一个重要 Hook它的核心目的是通过缓存计算结果避免在组件渲染时进行不必要的重复计算从而优化性能。这意味着只有当其依赖项发生变化时useMemo才会重新计算这个值否则它将重用之前的结果。
它的基本使用格式如下
const cachedValue useMemo(calculateValue, dependencies)calculateValue这是一个用于计算我们想要缓存的值的函数。为了确保结果的稳定性和预测性这个函数应该是一个纯函数。这意味着它在相同的输入下总是返回相同的输出并且没有任何副作用。dependencies这是一个数组包含useMemo所依赖的变量或值。当数组中的任何值发生变化时calculateValue函数将被重新执行。
useMemo基础用法
useMemo 接受两个参数一个函数和一个依赖项数组。
const memoizedValue useMemo(() computeExpensiveValue(a, b), [a, b]);在上面的例子中computeExpensiveValue是一个可能需要很长时间来计算的函数。我们只有当a或b改变时才重新调用这个函数。否则我们会使用之前缓存的值。
用一个例子来看 useMemo 的执行时机
import React, { useMemo, useState } from react;function filterUsers(users, searchTerm) {return users.filter((user) user.name.includes(searchTerm));
}function useMemoDemo() {const [searchTerm, setSearchTerm] useState();const [isDark, setIsDark] useState(false);const allUsers useMemo(() {let list [];for (let i 1; i 500; i) {list.push({ id: i, name: User${i} });}return list;}, []);const useMemoCurrentUsers useMemo(() {console.log(with useMemo)return filterUsers(allUsers, searchTerm);}, [allUsers, searchTerm]);return (div{/* 每一次更改查询框内容都会触发useMemo */}inputvalue{searchTerm}onChange{(e) setSearchTerm(e.target.value)}placeholderSearch by name.../{/* 每一次更改背景色都不会触发useMemo */}button onClick{() setIsDark((pre) !pre)}{isDark ? Dark mode : Light mode}/buttondivdivh2With useMemo/h2div style{{ background: isDark ? #000 : }}{useMemoCurrentUsers.map((user) (div key{user.id}{user.name}/div))}/div/div/div/div);
}export default useMemoDemo;在这里简单的示例中每次修改查询框的内容都会触发searchTerm的变化进而触发useMemo重新计算而点击切换背景色的按钮因为useMemo的依赖项没有更新所以不会触发useMemo重新计算而是直接使用上一次计算的返回值。
React.memo
React.memo 是 React 中的一个高阶组件HOC它通过记忆化函数组件的结果来优化性能防止不必要的重新渲染。它的工作原理是仅在组件的 props 发生变化时才重新渲染这对依赖大量 props 且不需要每次父组件重新渲染时都重新渲染的组件特别有用。
使用方法
以下是 React.memo 的基本用法示例
import React from react;// 一个接收 props 的函数组件
const MyComponent (props) {console.log(Rendering MyComponent);return (div{props.text}/div);
};// 使用 React.memo 包装组件
const MemoizedComponent React.memo(MyComponent);export default MemoizedComponent;在这个示例中MyComponent 只有在 text prop 发生变化时才会重新渲染。如果父组件重新渲染但 text prop 保持不变MyComponent 不会重新渲染。
自定义比较函数
默认情况下React.memo 进行的是浅比较。如果你需要进行更深层次的比较或有复杂的 props可以提供自定义的比较函数作为 React.memo 的第二个参数
import React from react;const MyComponent (props) {console.log(Rendering MyComponent);return (div{props.text}/div);
};const areEqual (prevProps, nextProps) {// 在这里进行自定义比较return prevProps.text nextProps.text;
};const MemoizedComponent React.memo(MyComponent, areEqual);export default MemoizedComponent;在这个示例中areEqual 是一个函数它接收前一个和下一个 props 并返回 true 表示它们相等从而防止重新渲染。如果返回 false组件将会重新渲染。
何时使用 React.memo
React.memo 在以下情况下特别有用
组件是纯函数组件并且其输出完全由 props 决定。组件频繁重新渲染并且 props 保持不变。你想要优化性能避免不必要的重新渲染。
注意事项
React.memo 只适用于函数组件。默认情况下它进行浅比较对于复杂的 props 可能不够。过度使用 React.memo 可能会导致不必要的复杂性。应根据实际情况使用重点放在那些实际受益于记忆化的组件上。
实例
以下是一个在父组件中使用 React.memo 的实际示例
import React, { useState } from react;const ChildComponent React.memo(({ text }) {console.log(Rendering ChildComponent);return div{text}/div;
});const ParentComponent () {const [count, setCount] useState(0);const [text, setText] useState(Hello);return (divbutton onClick{() setCount(count 1)}Increment Count/buttonbutton onClick{() setText(text Hello ? World : Hello)}Change Text/buttonChildComponent text{text} //div);
};export default ParentComponent;在这个示例中ChildComponent 只有在 text prop 发生变化时才会重新渲染即使 ParentComponent 因为 count 状态变化而重新渲染。这可以帮助在大型应用中提高性能。
8.useDeferredValue
useDeferredValue 是 React 18 引入的一个 Hook用于延迟更新状态值以提升用户界面的响应速度。在处理高优先级任务如输入或交互时可以使用 useDeferredValue 将低优先级的状态更新推迟以保持界面的流畅性。
基本用法
以下是 useDeferredValue 的基本用法示例
import React, { useState, useDeferredValue, useEffect } from react;const SearchComponent () {const [query, setQuery] useState();const deferredQuery useDeferredValue(query);useEffect(() {// 模拟一个数据获取函数const fetchData async () {console.log(Fetching data for:, deferredQuery);// 模拟数据获取延迟await new Promise(resolve setTimeout(resolve, 1000));console.log(Data fetched for:, deferredQuery);};if (deferredQuery) {fetchData();}}, [deferredQuery]);return (divinputtypetextvalue{query}onChange{(e) setQuery(e.target.value)}placeholderType your search query.../pSearching for: {deferredQuery}/p/div);
};export default SearchComponent;在这个示例中
useState 用于创建一个 query 状态表示用户输入的查询。useDeferredValue 用于创建一个 deferredQuery它是 query 的延迟副本。当用户输入内容时query 状态立即更新而 deferredQuery 会稍后更新。useEffect 钩子监听 deferredQuery 的变化并在其变化时执行数据获取操作。
延迟更新的好处
使用 useDeferredValue 可以提高用户界面的响应速度特别是在处理大量数据或复杂计算时。通过将低优先级的状态更新推迟React 可以优先处理用户输入和交互从而保持界面的流畅性。
注意事项
useDeferredValue 仅在 React 18 及更高版本中可用。useDeferredValue 适用于那些不需要立即更新的状态值例如搜索查询、过滤条件等。useDeferredValue 不会阻止状态的最终更新只是将其延迟到更适当的时机。
示例过滤列表
以下是一个使用 useDeferredValue 进行列表过滤的示例
import React, { useState, useDeferredValue } from react;const ListComponent ({ items }) {const [filter, setFilter] useState();const deferredFilter useDeferredValue(filter);const filteredItems items.filter(item item.toLowerCase().includes(deferredFilter.toLowerCase()));return (divinputtypetextvalue{filter}onChange{(e) setFilter(e.target.value)}placeholderFilter items.../ul{filteredItems.map((item, index) (li key{index}{item}/li))}/ul/div);
};export default ListComponent;在这个示例中
useState 用于创建一个 filter 状态表示用户输入的过滤条件。useDeferredValue 用于创建一个 deferredFilter它是 filter 的延迟副本。filteredItems 列表根据 deferredFilter 进行过滤以提升用户输入的响应速度。
通过这种方式可以在处理较大数据集时保持界面的流畅性同时确保最终的过滤结果是准确的。
9.useTransition
useTransition 是 React 18 引入的一个 Hook用于管理状态更新的优先级。它允许你将某些状态更新标记为“过渡”这样 React 就可以优先处理更高优先级的任务如用户输入而将过渡状态的更新推迟到更适合的时间点。这对于保持用户界面的响应速度非常有用。
基本用法
以下是 useTransition 的基本用法示例
import React, { useState, useTransition } from react;const TransitionComponent () {const [isPending, startTransition] useTransition();const [input, setInput] useState();const [list, setList] useState([]);const handleChange (e) {const value e.target.value;setInput(value);// 将状态更新标记为过渡startTransition(() {const newList Array.from({ length: 20000 }, (_, index) ${value} ${index});setList(newList);});};return (divinput typetext value{input} onChange{handleChange} /{isPending pLoading.../p}ul{list.map((item, index) (li key{index}{item}/li))}/ul/div);
};export default TransitionComponent;在这个示例中
useTransition 返回一个布尔值 isPending 和一个函数 startTransition。isPending 表示过渡状态是否正在进行中可以用来显示加载指示器。startTransition 用于将某些状态更新标记为过渡。
用法说明 useTransition 的语法如下 const [isPending, startTransition] useTransition();isPending 是一个布尔值指示过渡是否正在进行。 startTransition 是一个函数用于包裹过渡状态更新的逻辑。
处理大量数据
以下是一个处理大量数据的示例通过 useTransition 保持界面的响应速度
import React, { useState, useTransition } from react;const BigDataComponent () {const [isPending, startTransition] useTransition();const [query, setQuery] useState();const [results, setResults] useState([]);const handleSearch (e) {const value e.target.value;setQuery(value);startTransition(() {// 模拟数据处理const filteredResults mockData.filter(item item.includes(value));setResults(filteredResults);});};return (divinput typetext value{query} onChange{handleSearch} placeholderSearch... /{isPending pLoading results.../p}ul{results.map((result, index) (li key{index}{result}/li))}/ul/div);
};const mockData Array.from({ length: 10000 }, (_, index) Item ${index});export default BigDataComponent;在这个示例中
当用户输入搜索查询时handleSearch 函数会立即更新 query 状态。startTransition 用于标记数据过滤操作为过渡状态从而使得 React 可以优先处理用户输入并推迟执行较重的数据处理任务。如果过渡状态正在进行isPending 为 true显示加载指示器。
注意事项
useTransition 适用于那些可以延迟更新的状态例如数据过滤、分页加载等。startTransition 包裹的状态更新不会阻塞用户输入或其他高优先级任务从而提升用户体验。
10.useImperativeHandle
在 React 中useImperativeHandle 是一个自定义 Hook用于自定义暴露给父组件的实例值或者方法。它通常与 forwardRef 结合使用用于提供更精细的控制和优化。
基本用法
useImperativeHandle 允许你在函数组件中指定对外暴露的实例值或者方法通常用于封装底层 DOM 元素或者其他组件实例从而提供更直接的访问接口给父组件。
import React, { useRef, useImperativeHandle, forwardRef } from react;// 子组件
const ChildComponent forwardRef((props, ref) {const childRef useRef(null);// 通过 useImperativeHandle 暴露给父组件的实例值或者方法useImperativeHandle(ref, () ({// 在这里定义暴露给父组件的实例值或者方法focus: () {childRef.current.focus();},// 可选的清理函数// cleanup: () {// // 可选的清理逻辑// }}));return input ref{childRef} /;
});// 父组件
const ParentComponent () {const childRef useRef(null);const handleClick () {// 调用子组件暴露的方法childRef.current.focus();};return (divChildComponent ref{childRef} /button onClick{handleClick}Focus Child Input/button/div);
};export default ParentComponent;使用说明
forwardRef 和 useRef 使用 forwardRef 和 useRef 来创建一个能够获取子组件实例的 ref。useImperativeHandle Hook 使用 useImperativeHandle 来定义在父组件中通过 ref 可以访问到的值或者方法。实例值或者方法 在 useImperativeHandle 的回调函数中可以定义需要暴露给父组件的实例值或者方法。这些值或者方法可以是直接操作 DOM 元素的方法、状态管理等。清理函数可选 useImperativeHandle 的第二个参数可以是一个可选的清理函数用于在组件卸载或者 ref 变化时执行一些清理逻辑。
注意事项
useImperativeHandle 通常用于需要在父组件中操作子组件实例的情况例如直接访问子组件的 DOM 元素或者调用子组件的方法。合理使用 useImperativeHandle 可以提高代码的可读性和灵活性但要避免滥用过多暴露子组件的内部实现可能会导致组件耦合性增加不利于组件复用和维护。
总结
useImperativeHandle 是一个用于自定义暴露给父组件的实例值或者方法的自定义 Hook在处理需要直接访问子组件实例的情况时非常有用。它提供了一种灵活的方式来管理和操作组件实例使得组件之间的交互更加直接和高效。
