简体繁体 English

React（钩子）是否需要使用状态来执行其虚拟 dom diff 魔术？

[英]Does React (hooks) require the use of states in order to do its virtual dom diff magic?

原文 2020-12-06 05:34:55 6 1 javascript/ reactjs/ dom/ virtual-dom

This always puzzled me.这一直让我感到困惑。 If I said "Thank you React, your state hooks are awesome, but I'm just gonna do my direct dom manipulation here", would react still do the virtual dom comparison in order to update only that specific item?如果我说“谢谢 React，您的 state 钩子很棒，但我只是在这里直接进行 dom 操作”，react 仍然会进行虚拟 dom 比较以仅更新该特定项目吗？ would I still benefit from the virtual dom 'situation'?我还会从虚拟 dom 的“情况”中受益吗？

Is there any difference between using react to directly manipulate dom without states, and using a standard HTML file with imported vanilla js code?使用 react 直接操作没有状态的 dom 与使用标准 HTML 文件和导入的 vanilla js 代码之间有什么区别吗？

For clarity, here's an example, Let's say I have function printHellol() triggered by a button 'click' in my JSX.为清楚起见，这是一个示例，假设我有 function printHellol() 由我的 JSX 中的“单击”按钮触发。 The function targets the ID of an element and changes the text content. function 以元素的 ID 为目标并更改文本内容。

I couldn't find the answer anywhere.我在任何地方都找不到答案。 Thanks!谢谢！

1 个解决方案

Anything that his held in state becomes part of an object that react renders as a detached element from the dom.他在 state 中持有的任何东西都成为 object 的一部分，该 object 反应呈现为与 dom 分离的元素。 It's in essence creating a separate environment for all states.它本质上是为所有州创造一个单独的环境。 Anything that is used outside of state can be considered to be part of the direct dom object, causing the page to be rerendered when updates occur.在 state 之外使用的任何东西都可以被认为是直接 dom object 的一部分，从而导致在发生更新时重新呈现页面。 In other words you would need to use the react specific state if you want to access the virtual dom specific environment.换句话说，如果您想访问虚拟 dom 特定环境，则需要使用特定于反应的 state。