useRef 在 DOM 中存储值和显示值 [React]答案

【问题标题】：useRef store value and display value in DOM [React]useRef 在 DOM 中存储值和显示值 [React]
【发布时间】：2020-06-23 21:38:08
【问题描述】：

因为这个组件经常变化，我决定使用useRef 来存储值（例如，一个计数器）。在某个事件（例如 onclick）上，日志显示每次单击按钮时数字都会增加 1，但该值不会在屏幕上（在 div 内）更新。它显示0。我在这里错过了什么？

预期输出：点击按钮时，add() 增加counter，并在<div> 中显示值。

const counter = useRef(0);

function add() {
  counter.current += 1;
  console.log(counter.current); // this shows that the number did increment 
}

return (
  <div>
    <div>{counter.current}</div> {/* this shows '0' */}
    <button onClick={() => add()}>Add</button>
  </div>
);

【问题讨论】：

在这种情况下使用useState
为什么不使用useState？
我在第三方库监听函数中交互这个变量。这些库在页面加载时加载，并从 javascript 监听器接收事件。
用你的方法反应知道有一个变化要重新渲染内容
要查看组件必须更新的新值，这只发生在状态更新或传递的道具具有新值时。对于这个使用useState只是上面的cmets说

标签： reactjs

【解决方案1】：

正如你在 cmets 中所说的：

我在第三方库侦听器函数中与此变量进行交互。这些库在页面加载时加载，并从 javascript 监听器接收事件。

表示您想在 3rd 方引用更改时渲染组件，通常您可以像这样模拟渲染：

const reducer = p => !p;

const App = () => {
  const counter = useRef(0);
  const [, render] = useReducer(reducer, false);

  function add() {
    // Some 3rd party ref
    counter.current += 1;

    // Render and update the UI
    render();
  }

  return (
    <div>
      <div>{counter.current}</div>
      <button onClick={() => add()}>Add</button>
    </div>
  );
};

【讨论】：

【解决方案2】：

阅读doc

请记住，useRef 不会在其内容更改时通知您。改变 .current 属性不会导致重新渲染。如果你想在 React 将 ref 附加或分离到 DOM 节点时运行一些代码，你可能需要使用回调 ref 来代替。

在我们的案例中使用useState 是最好的选择

【讨论】：