Usememos？

本文目录一览：

• 1、react学习系列useMemo和react.memo
• 2、在React中,useMemo的参数函数在dependency值相同的情况下为何会执行多...
• 3、JS如何实现useMemo?记忆化的值
• 4、了解useMemo

react学习系列useMemo和react.memo

1、React中的useMemo和React.memo都是用于优化性能的工具，但它们的用途和工作方式有所不同。React.memo：这是一个高阶组件，用于优化函数组件的重新渲染。当组件的props没有变化时，React.memo会阻止组件的重新渲染。这类似于PureComponent，但是它是为函数组件设计的。

2、React 中的 memo、useMemo 和 useCallback 都是用于优化性能的工具，但它们的用途和作用对象不同。以下是它们的核心区别：memo 作用对象：组件。功能：通过记忆化技术，避免组件在 props 未变化时进行不必要的重新渲染。使用方式：高阶组件，接收一个组件并返回一个新的记忆化组件。

3、const memoizedValue = useMemo（） = computeExpensiveValue（a， b）， [a， b]）；其中，computeExpensiveValue 是耗时的计算函数，[a， b] 是依赖项数组。工作原理：React 会在首次渲染时执行传入的函数并记住其返回值（memoizedValue）。

4、useCallback容易被过度使用，常见误解是仅为避免渲染时创建匿名函数。实际，useCallback用于缓存函数，防止子组件的memo失效，而非单纯避免匿名函数创建。有开发者出现过使用useCallback却无实际作用的情况。

5、在React中，useState、setState、useMemo、memo的区别如下：useState：功能：用于在函数组件中添加状态。操作性质：同步操作，直接修改组件内部状态。使用场景：适用于简单的状态管理。setState：功能：在类组件中用于更新状态。操作性质：异步操作，将状态改变的逻辑异步执行并最终更新组件。

在React中,useMemo的参数函数在dependency值相同的情况下为何会执行多...

1、在React中，useMemo的参数函数在依赖项值相同的情况下仍多次执行，通常是由于开发环境中启用了React.StrictMode导致的双重渲染机制。

2、依赖项数组配置不当 若useEffect的依赖项数组（第二个参数）包含动态值（如状态或props），每次依赖项变化时都会重新执行emitter.on，进一步加剧重复绑定问题。解决方案 使用useEffect清理函数移除监听器关键点：emitter.on返回的unsubscribe函数必须在组件卸载或重新渲染前调用，以移除旧监听器。

3、useMemo 是 React 提供的一个 Hook，用于缓存计算结果，避免在每次渲染时重复执行高开销的计算，从而优化性能。工作原理useMemo 接收两个参数：一个计算函数和一个依赖项数组。它会在首次渲染时执行计算函数并缓存结果，仅当依赖项发生变化时才会重新计算。

JS如何实现useMemo?记忆化的值

1、useMemo 功能：返回一个记忆化的值，只有在其依赖项改变时才会重新计算。 优化：避免在每次渲染时都进行昂贵的计算，从而提高性能。 使用场景： 当需要计算一个值，而这个值的计算过程比较昂贵，并且这个值在依赖项不变的情况下不需要重新计算时，可以使用useMemo。

2、import React， { useMemo } from react；const MyComponent = （{ number }） = { const squaredNumber = useMemo（） = number * number， [number]）； return Squared number： {squaredNumber}；}；优化效果：仅当number变化时重新计算平方值，避免每次渲染都执行乘法运算。

3、useMemo 关键用例与最佳实践记忆化计算结果useMemo 返回一个记忆化的值，仅在依赖项变化时重新计算。适用于耗时操作或派生状态，避免每次渲染都重复计算。

4、结合AbortController取消未完成的请求，避免资源浪费。 优化Context API使用问题：Context值变化导致无关消费者组件重新渲染。解决方案：拆分Context：将独立状态分离到不同Context中。记忆化Provider值：使用useMemo缓存Provider的值对象。

5、配合React.memo）。代价：函数创建成本低，过度使用可能抵消优化效果。总结useMemo：优化计算密集型操作，缓存结果值。useCallback：优化函数传递，缓存函数实例。核心原则：以性能分析为导向，谨慎使用记忆化，确保依赖项准确且最小化。通过合理应用二者，可显著提升React应用的响应速度与资源利用率。

6、功能：缓存计算结果，避免在依赖项未变化时重复计算。使用方式：Hook，接收一个函数和依赖项数组，返回记忆化的值。特点：适用于耗时的计算操作，优化渲染性能。

了解useMemo

useMemo 是 React 提供usememo的一个 Hook，用于缓存计算结果，避免在每次渲染时重复执行高开销usememo的计算，从而优化性能。工作原理useMemo 接收两个参数usememo：一个计算函数和一个依赖项数组。它会在首次渲染时执行计算函数并缓存结果，仅当依赖项发生变化时才会重新计算。

const expensiveCalculation = useMemo（） = { return numbers.reduce（acc， num） = acc + num， 0） * multiplier；}， [numbers， multiplier]）； // 包含所有依赖变量避免过度使用useMemo 会引入额外开销（缓存维护），若计算本身不昂贵，可能适得其反。

通过本文，您将深入了解useRef、useCallback、useMemo这三个React Hookusememo的使用方法与原理。首先，我们来了解一下useRef。useRef 是一个返回可变 ref 对象的 Hook。这个对象的 .current 属性在组件生命周期中保持不变，因此可以存储任何值。

useMemo 关键用例与最佳实践记忆化计算结果useMemo 返回一个记忆化的值，仅在依赖项变化时重新计算。适用于耗时操作或派生状态，避免每次渲染都重复计算。