是否有任何方法可以检测在React组件中正确渲染的单个元素?(不是组件渲染)

Question

我知道我们可以通过React的开发者工具检测组件渲染，我也在这个问题上读过其他方法。但这不是我需要的。

我正在寻找一种方法来检测单个元素渲染组件，例如，当我们有映射列表，我们将添加一个项目:

:

<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创建了一个新的虚拟DOM，并将其与之前的DOM进行比较，然后它以尽可能少的更改更新浏览器DOM，而无需再次渲染整个DOM。在这种情况下，通过使用key, React不会突变每个子树，并且实现它可以保持<li>Banana</li>,<li>Watermelon</li>和<li>Pear</li>子树的完整。

我需要正确地看到这个渲染/插入过程，正如我观察chrome开发人员工具(Shift+Ctrl+ I =>元素)不能正确工作，因为它的工作方式与香草JavaScript当香草JavaScript会改变每一个子，而不是实现它可以保持<li>Banana</li>,<li>Watermelon</li>和<li>Pear</li>子树完好无损，但在chrome开发人员工具这是不检测。

是否有任何方法来检测元素渲染正确?(即使是浏览器，如果没有任何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>