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