reactjs - 当它不必要地运行 js 代码时如何反应更快更有效

Question

我很震惊地看到我的代码多次运行以呈现/更新一个 UI。我有一个组件接受用于 API 调用的新道具 id。当组件接收到道具时。它不必要地运行渲染，我使用 componentDidUpdate 调用它第二次运行渲染的 API。这不会让你的程序变慢吗？或者我是在错误地构建我的反应应用程序并且根本不理解反应。

我还有一个 setState 来允许条件渲染，所以它的渲染 - 当它接收到 id props 渲染时 - 当我 setState 加载渲染时 - 当我切换 setState 以显示 API 结果时

因此，它的 3 次渲染用于 1 次 UI 更改。

标签： reactjs

Answer 1

React 使用虚拟 DOM 和差异算法来更新真实 DOM，因此真实 DOM 在每次渲染时都不会更改。只有实际更改的部分才会更新，因此性能和效率是最好的之一。