反应组件渲染功能指的是哪个DOM?真正的还是虚拟的?

时间:2019-02-23 13:42:08

标签: reactjs react-lifecycle

我读了很多文章,并相信这个问题不是重复的。

根据What is the role of the render() function inside react component?

  

render函数是ReactDOM生命周期中的一部分   是公开一个称为render的方法的类对象,该方法用于   将React JSX内容呈现到您的DOM中。

并且我还阅读了许多文章,这些文章解释了反应式虚拟dom的工作原理,该方法在将其节点呈现为真实dom之前使用了diff处理。

所有文章(至少我读过的文章)都提到render()反映了dom

我想知道domreal-dom还是virtual-dom

实际上,我在理解componentDidUpdate()之后遇到一些麻烦,render()render之后立即被调用,这意识到我对组件的{ "type": "postData", "data": { "postId":"XXX", "postTimestamp": "1521543600", "pageType": "/home.php:topnews", "viewTime": 1521545993647, "gender": 3, "likes": "8", "comments_shares_viewes": ["1"], "posters": [{"type": "XXX", "id": "695e45affa1e07529ac917f6d573a"} ], "postImg": 1, "postDesc": [XXX], "origLink": 0, "duration": 0, "timestamp": 1521545993647}, "back_time": 1521545993693}, {"type": "saveLooked", "data": { "duration": 18, "timestamp": 1521545993656, "sessionId": XXX, "gender": 2}, "back_time": 1521546011657} 函数缺乏了解

感谢您的帮助

2 个答案:

答案 0 :(得分:1)

componentDidUpdate 是在组件生命周期的给定周期内对道具更改做出反应的最后机会。

这是最后的机会,因为它可以访问 prevProps

渲染之后立即

和BTW-调用getSnapshotBeforeUpdate(prevProps,prevState),然后才 componentDidUpdate

根据响应文档-

  在最近渲染的输出提交给

getSnapshotBeforeUpdate()之前,例如DOM。它使您的组件可以在DOM可能发生更改之前从DOM捕获一些信息(例如,滚动位置)。此生命周期返回的任何值都将作为参数传递给componentDidUpdate()。

所以我认为render方法是指真实的DOM。

答案 1 :(得分:1)

react与虚拟DOM交互。要对真实DOM应用更新/更改,虚拟DOM核心功能即对帐算法开始起作用。 它的工作是提出最优化的解决方案,以解决先前和当前虚拟DOM状态之间的差异。然后将新的虚拟DOM应用于真实DOM。

本文将有助于深入了解虚拟DOM https://medium.com/@gethylgeorge/how-virtual-dom-and-diffing-works-in-react-6fc805f9f84e