ref 上的事件处理程序如何在渲染之间持续存在？

Question

In react if you have a ref and you attach a DOM event using

ref.current.onclick = eventHandler

I understand that react guarantees that ref will hold a reference to the DOM element but how does the event handler on the DOM node persist between re-renders as DOM node can change.

Answer 1

Because on every re-render, React regenerates the handler and attach it to the new DOM node.

You would write a component like this:

export default function App() {
  return (
    <button
      onClick={(e) => {
        console.log(e.target);
      }}
    >
      button
    </button>
  );
}

And every re-render could cause React to perform something like this:

// Call `App` as a funtion
// Every thing inside the `App` funtion body will be executed again
// So you get a new onClick handler inside the funtion which will be attach to the new DOM node
const element = App();

render(element);

As for Ref , it's similar. When you call useRef , you get an object like this: { current: null }

// `ref` is passing to the component on every re-render
// `ref` object dose not change on every re-render, but it's property `current` will be assigned with the new DOM node.
<button ref={ref}>button</button>

This is an extremely simplified code, and does not represent how React actually works, but it makes good point.

Answer 2

There seems to be a misunderstanding. When the DOM node changes your event handler is not preserved. That is the responsibility of your code alone. But the DOM node does not change with every render. React compares your returned result with the previous result and decides which DOM nodes need to be replaced.

If you want to use a native event you have to make sure to attach and detach the event handler whenever the node changes.

const rootChanged = useCallback(element => element.addEventListener(type, listener),[]);

// ...

<div ref={rootChanged} key={someVolatileKey}>
  // ...
</div>

When the key changes for example React will create a new node for the root element.