有没有办法正确检测 React Component 中渲染的单个元素？ （不是组件渲染）

Question

我知道我们可以通过 React 的 Developer Tool 来检测 Components 渲染，我也阅读了这篇 中的其他方法。但这不是我需要的。

我正在寻找检测组件中呈现的单个元素的方法，例如，当我们映射列表并添加一项时：

之前：

<ul>
  <li key="1">Banana</li>
  <li key="2">Watermelon</li>
  <li key="3">Pear</li>
</ul>

之后：

<ul>
  <li key="0">Apple</li>
  <li key="1">Banana</li>
  <li key="2">Watermelon</li>
  <li key="3">Pear</li>
</ul>

我知道 React 在这里创建了一个新的 Virtual DOM 并将其与之前的进行比较，然后它更新 Browser DOM 尽可能少的更改而不渲染整个 DOM再次。在这种情况下，通过使用 key React 不会改变每个 child 并意识到它可以保持 <li>Banana</li>、<li>Watermelon</li> 和 <li>Pear</li> 子树完好无损。

我需要正确查看此 rendering/inserting 流程，据我观察，Chrome 开发者工具 (Shift+Ctrl+i => Elements) 无法正常工作，因为它与 Vanilla [=49= 的工作方式相同] 当 Vanilla JavaScript 会改变每个 child 而不是意识到它可以保持 <li>Banana</li>、<li>Watermelon</li> 和 <li>Pear</li> 子树完好无损时，但在 Chromes 开发者工具中这是未检测到。

有什么方法可以正确检测元素渲染吗？ （如果没有任何 React 工具，即使是浏览器）

P.S

我不是说组件渲染

Answer 1

最方便的解决方案之一是使用事件 DOMSubtreeModified

像这样：

document
  .querySelector("#value")
  .addEventListener("DOMSubtreeModified", function () {
    alert("value changed");
  });

工作代码片段：

function App() {
  const [state, setState] = React.useState(["Banana", "Watermelon", "Pear"]);

  React.useEffect(() => {
document
  .querySelector("#list")
  .addEventListener("DOMSubtreeModified", function () {
    alert("element changed");
  });
  }, []);

  const handleAddState = () => {
setState([...state, "Pear"]);
  };

  return (
<div className="App">
  <button type="button" onClick={handleAddState}>
    Increase
  </button>
  <ul id="list">
    {state.map((item) => (
      <li>{item}</li>
    ))}
  </ul>
</div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

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