useMemo和useRef
时间: 2024-08-01 12:01:48 浏览: 107
`useMemo` 和 `useRef` 都是 React Hooks 中的性能优化工具。
`useMemo` 是用于缓存计算结果的 Hook。当你有一个昂贵的函数需要在渲染过程中多次计算,但是其结果只依赖于少数几个变量(称为“记忆依赖”),那么可以将其放入 `useMemo` 函数里。这个 Hook 只有当记忆依赖发生变化时才会重新计算,并返回新的计算结果。这对于那些副作用小、纯粹的数据计算非常有用,避免了不必要的渲染开销。
`useRef` 则是一个特殊的引用类型的 Hook,它返回的是一个对象,该对象始终指向组件内部的一个值(可以是任何 JavaScript 值,通常是 DOM 元素或自定义组件实例)。`useRef` 主要用来保持对长期存在的引用(如 DOM 结点)的一次性访问,不需要进行计算或依赖更新。这在需要在生命周期内跟踪某些不可变数据或者绑定事件处理函数时很有用。
相关问题
useMemo和useRef事用来做什么的?我们最多使用useRef做什么呀?是拿它的值?还是它的实例?
`useMemo` 和 `useRef` 都是 React Hooks,但它们的作用略有不同:
1. **useMemo**: 这个 Hook 主要用于性能优化。当你有一个计算密集型的操作(如字符串拼接、数组转换等),并且这个结果在短时间内不会有变化,将其放入 `useMemo` 中可以使这部分计算在首次渲染完成后再执行,并将结果缓存起来。只有当依赖项(第一个参数数组)发生变化时,`useMemo` 才会再次执行计算。返回的值就是缓存后的结果,你可以像普通变量一样使用。
示例:
```jsx
const expensiveCalculation = useMemo(() => someExpensiveFunction(), [dependencyArray]);
```
2. **useRef**: 这个 Hook 主要用于在函数组件中创建和保持对 DOM 元素或者其他不可变引用类型的长期引用。你可以通过 `useRef` 创建一个对象,然后获取其 `.current` 属性,这个属性是一个指向实际对象的引用,无论组件是否重新渲染,`current` 都会被保持不变。这在需要访问生命周期长于组件本身的对象时非常有用,例如事件监听器或定时器。
示例:
```jsx
const ref = useRef(null);
ref.current.addEventListener('click', handleClick);
```
你可以使用它的值(`.current`),也可以使用它的实例本身,取决于具体的需求。
总结来说,`useMemo` 用于性能优化(计算结果),而 `useRef` 则用于存储持久引用(对象实例)。在大多数情况下,`useRef` 更多地用于获取引用而不是值。
react memo, useEffect, useMemo, useRef, useState 方法含义
引用\[1\]:在React中,memo是一个高阶组件,用于优化函数组件的性能。它类似于React.PureComponent,通过对内部对象进行浅比较来判断是否重新渲染组件。\[2\]useEffect是React提供的一个Hook函数,用于在函数组件中执行副作用操作。它可以在组件渲染完成后执行一些异步操作,比如发送网络请求、订阅事件等。\[3\]useMemo是React提供的另一个Hook函数,用于在函数组件中进行性能优化。它可以缓存计算结果,避免重复计算,类似于Vue中的computed属性。\[1\]useRef是React提供的一个Hook函数,用于在函数组件中创建一个可变的引用。它可以用来保存组件的状态,或者获取DOM元素的引用。\[1\]useState是React提供的一个Hook函数,用于在函数组件中创建一个可变的状态。它返回一个数组,第一个元素是当前的状态值,第二个元素是更新状态的函数。
所以,react memo用于优化函数组件的性能,useEffect用于执行副作用操作,useMemo用于缓存计算结果,useRef用于创建可变的引用,useState用于创建可变的状态。
#### 引用[.reference_title]
- *1* *2* [useMemo,memo,useRef等相关hooks详解](https://blog.csdn.net/weixin_44441196/article/details/117328033)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
- *3* [一文轻松掌握react-hook(useState、useReducer、useEffect、useCallback、useMemo、useRef、useContext...)](https://blog.csdn.net/u010074572/article/details/105176653)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]
阅读全文