Question

乍一看，我的问题似乎微不足道，但我找不到答案，所以也许并非如此。基本上我想将React用作DOM库，不使用状态，即不使用类。与往常一样，我有顶层功能组件，该组件需要道具。我按照ReactDOM.render的建议进行渲染。然后将在某个地方计算新的道具，而我想根据这些新道具重新渲染组件。 SO上所有以前类似的问题都有答案，这些答案总是在某个地方使用setState调用来完成，但是这里没有类，因此没有this.setState可用。

我尝试的是：

function App(props){
...
}
// using hyperscript here in lieu of jsx
ReactDOM.render(h(App, {..the props..}), document.getElementById('root'));
... later props change, repeat 
ReactDOM.render(h(App, {..the props..}), document.getElementById('root'));

我的问题是：如果我这样做，React是否仍将其对帐算法应用于有效的DOM更新？

Answer 1

看看ReactDOM.render()的文档：https://reactjs.org/docs/rendering-elements.html，我们可以看到以下内容：

React DOM将元素及其子元素与上一个元素进行比较，并且仅应用必要的DOM更新以使DOM达到所需状态。

通过每秒调用render()的示例对此进行了说明：

function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(element, document.getElementById('root'));
}

setInterval(tick, 1000);

如果在打开浏览器devtools的情况下运行此代码，则可以看到每次调用render()时仅更新DOM的更新部分：

即使我们在每个元素上创建一个描述整个UI树的元素勾选，只有其内容已更改的文本节点才会更新反应DOM。

所以我认为简短的答案是：是的，React仍然应用对帐算法。

另外，根据我自己的经验，在将React组件集成到其他框架（例如Angular）构建的应用程序中时，我使用了类似的模型，并且在更新React组件时观察到了相同的行为。

React是否在对ReactDOM.render的连续调用中应用其协调算法？

1 个答案: