📅  最后修改于: 2023-12-03 15:06:42.632000             🧑  作者: Mango
React 提供了一些 hooks,如 useCallback、useMemo 和 useEffect,让我们能够更有效地编写 React 组件。本文将介绍这些 hooks,并讨论何时使用它们。
当在渲染期间创建函数并将其传递给子组件时,该子组件将在每次渲染时都会接收到新的函数引用,这可能会影响性能。这时可以使用 useCallback,它将返回一个 memoized 版本的回调函数。
import React, { useCallback } from 'react';
function MyComponent({ onClick }) {
const handleClick = useCallback(() => {
onClick("clicked");
}, [onClick]);
return <button onClick={handleClick}>Click me</button>;
}
上面的例子中,每次渲染 MyComponent 都会创建一个新的 handleClick
函数。使用 useCallback
可以让 handleClick
在 onClick
没有改变时,保持不变。 useCallback
接收两个参数:callback
和 dependencies
。当 dependencies
中的值发生变化时,callback
才会被重新创建。
当有一个昂贵的计算,可通过 useMemo 让组件在渲染期间只计算一次。当下次渲染时,将返回计算结果。
import React, { useMemo } from 'react';
function MyComponent({ a, b }) {
const result = useMemo(() => a + b, [a, b]);
return <div>{result}</div>;
}
上面的例子中,当 a 或 b 发生变化时,result
才会重新计算。如果 a
和 b
没有发生变化,则应返回的是上次计算结果。
当需要在组件挂载、卸载或更新时执行一些副作用代码时,可以使用 useEffect。useEffect 会根据给定的依赖项,决定何时执行渲染副作用:
import React, { useState, useEffect } from 'react';
function MyComponent({ name }) {
const [message, setMessage] = useState("");
useEffect(() => {
setMessage(`Hello ${name}`);
}, [name]);
return <div>{message}</div>;
}
上面的例子中,useEffect
中的函数会在组件挂载和 name
更新时调用。如果不传递第二个参数给 useEffect
,则在组件挂载和更新时都会触发该副作用代码。
在编写 React 组件时, useCallback
、 useMemo
和 useEffect
是提高性能和代码质量的利器。只有当必要的情况下才应该使用它们,避免过早优化。