Question

据我所知，useRef（initialValue）的另一个目的是保留一个变量，只要该变量在函数组件中重新呈现，其引用地址就不会更改。

但是，可以使用useMemo（）完成相同的操作。两者有什么区别？哪个是更好的性能。

import React, { useState, useMemo, useEffect, useRef } from 'react';

function App() {
  const [count, setCount] = useState(0);
  
  const myObj = useMemo(() => ({current: 0}), [])
  const myRef = useRef(0)

  useEffect(() => {
    myObj.current = myObj.current + 1;
    myRef.current = myRef.current + 1;
  })

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increase Count Number </button>
      <span>{myObj.current}</span>
      <span>{myRef.current}</span>
    </div>
  );
}

export default App;

Answer 1

useMemo旨在记住参数函数中被调用的函数。

您使用它的方式，useMemo的返回值等于useRef的返回值。
但是，下一个会读的人没有任何意义，因为useMemo并不是要在以下情况下使用的：

功能完全没有理由要记住。
依赖项数组为空，因此该函数仅被调用一次。

Answer 2

从技术上讲，两者可以互换，只要useMemo的依赖项数组为空即可。但是，如果您想根据某个属性或状态变量的变化重新计算值，则可以通过将useMemo放入依赖项数组来使用useMemo

技术上相同的表达式

const ref = useRef(computeExpensiveValue(a, b));

const memoizedValue = useMemo(() => computeExpensiveValue(a, b));


// in above - ref.current and memoizedValue will be same

但是，如果我们想重新计算a或b的值，则应像下面这样useMemo

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

为什么使用useRef（initialValue）代替useMemo（）？

2 个答案: