首页  >  文章  >  web前端  >  反应记忆备忘单

反应记忆备忘单

Mary-Kate Olsen
Mary-Kate Olsen原创
2024-11-06 02:28:02510浏览

React Memoization Cheat Sheet

React 提供了三个主要的记忆工具,通过最大限度地减少不必要的重新渲染和重新计算来优化组件性能:

1. useMemo – 记忆计算值

  • 用途:缓存计算结果,仅在依赖关系发生变化时重新计算。
  • 用法:用于昂贵的计算派生数据,仅应使用特定依赖项进行更新。

    const memoizedValue = useMemo(() => complexCalculation(), [dependencies]);
    
    
  • 最佳实践

    • 将函数内使用的所有依赖项包含在依赖项数组中。
    • 避免在 useMemo 中创建新的引用(数组、对象)或内联函数。
    • 注意:不要将 useMemo 用于函数;它缓存值,而不是函数引用。

2. useCallback – Memoize 函数参考

  • 用途:缓存函数引用,防止在每次渲染时重新创建。
  • 用法:用于稳定函数引用,特别是用于传递给子组件的回调(例如事件处理程序)。

    const memoizedFunction = useCallback(() => { /* logic */ }, [dependencies]);
    
    
  • 最佳实践

    • 将函数内使用的所有依赖项包含在依赖项数组中,以避免过时的值。
    • 避免在 useCallback 中声明内联函数,因为这可能会破坏记忆。
    • 注意:仅对函数使用 useCallback。错误地使用 useCallback 来获取值会导致低效的代码和不必要的函数调用。

3. React.memo – 记忆整个组件

  • 用途:如果功能组件的属性未更改,则防止重新渲染。
  • 用法:用于优化子组件,当父组件发生变化时不需要重新渲染。

    const MemoizedComponent = React.memo(ChildComponent);
    
    
  • 最佳实践

    • 与接收稳定 props 或很少更改的 props 的组件一起使用。
    • 避免频繁更改 props(例如新对象/数组),以最大限度地提高 React.memo 的有效性。
    • 注意:与 useCallbackmemoized 函数配合良好,可以维护传递给子组件的稳定 props。

需要记住的要点

  • 使用 useMemo 作为值useCallback 作为函数
    • 对函数使用 useMemo 会导致立即执行,而不是稳定的函数引用。
    • 对值使用 useCallback 返回一个函数,这会导致代码效率低下,需要额外的函数调用。
  • 记忆总结
    • useMemo:缓存计算值(函数的返回值)。
    • useCallback:缓存函数引用(回调)。
    • React.memo:基于 props 缓存 整个组件,以防止父更新重新渲染。
  • 有选择地使用记忆化:正确使用记忆化可以提高性能,但如果过度使用或误用,则会增加复杂性。

以上是反应记忆备忘单的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn