useRef（）和{}之间的区别

Question

我正在阅读有关useRef()的内容，并且正在玩一些简单的示例。

让我惊讶的是，每当我更换

const MyComponent = ({value}) => {
  const myRef = useRef();
  [...]

使用

const MyComponent = ({value}) => {
  const myRef = {};
  [...]

组件的工作方式相同。 您是否知道任何显示钩子真正优势的示例？

Answer 1

好吧，尝试

  const myRef = {};
  //..
  // at some point e.g. in click handler do:
  myRef.a = 123;

现在触发组件的重新渲染，并记录myRef的日志值，您将看到在上面所做的更改将在下一次渲染时丢失。 在每个渲染上创建一个新的myRef 。另一方面，useRef返回的值将保留到组件的整个生命周期。