Ref回调的清理函数没有执行

Question

在我的 React 中，重新渲染时不会执行清理函数：

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

export default function App() {
  const [x, setX] = useState(2);
  const d = useRef(null);

  return (
    <>
      <p ref={(node) => {
        console.log('start');
        return () => {
          console.log('finish');
        };
      }}>{x}</p>
      <button onClick={() => setX(x + 1)}>hello</button>
    </>
  );
}

我希望在更新 ref 回调时执行我的清理函数，因此这里每次渲染都会创建回调，然后每次渲染都必须执行清理！

Answer 1

React 引用没有清理函数，就像

useEffect

钩子回调返回清理函数一样。使用 callback 语法 设置的 React refs 只需再次调用并传递

null

。

示例：

const Child = React.forwardRef(({ children }, ref) => (
  <span ref={ref}>{children}</span>
));

function App() {
  const [x, setX] = React.useState(2);

  return (
    <div className="App">
      <Child
        ref={(node) => {
          if (node) {
            console.log("start", { node });
          } else {
            console.log("finish", { node });
          }
        }}
      >
        {x}
      </Child>{" "}
      <button onClick={() => setX((x) => x + 1)}>+</button>
    </div>
  );
}

const rootElement = document.getElementById("root");
const root = ReactDOM.createRoot(rootElement);

root.render(<App />);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
<div id="root" />

在 ref 回调中，检查 ref 何时为空并处理任何“清理”职责。