Javascript 作为DOM状态的函数进行渲染

想象一个react组件渲染一个绝对定位的元素。该元素在页面上的位置是从DOM（而不是从任何组件状态）提取的数据的函数

作为DOM状态的函数，react是否具有良好的渲染模式？

---

我的最佳想法是将双重渲染：

在相关的

componentDidMount

/

componentdiddupdate

中读取DOM

设置从属组件的状态

，或以其他方式重新呈现它

需要定义

shouldComponentUpdate

以防止无限

渲染

/

componentDidMount

循环

---

componentDidMount事件是您希望执行此操作的地方

componentDidMount-来自react文档

在生命周期的这一点上，组件具有DOM表示 您可以通过React.findDOMNode（这个）访问它

如果您想与其他JavaScript框架集成，请设置计时器 使用setTimeout或setInterval，或发送AJAX请求，执行这些操作 此方法中的操作

我会将绝对元素放在页面上但不在视图中，然后将其移动到componentDidMount事件中的位置

---

我不认为这是双重渲染。

好问题。我会设想一些类似于清单的东西，以

domtreModified

检测更改，然后按照您的意愿进行操作。我关心的是正确的反应方法。我目前正在为每个正常渲染触发两个渲染。分析DOM的实际工作是我可以接受的，这将是一个单独的问题。1）澄清一下，DOM指的是页面的任意部分，而不是特定React组件的一部分（这是我目前的假设），2）您可以在

componentDidMount

中设置

domtreModified

侦听器，并在调用事件时触发状态更改。状态更改将触发重新渲染。（1）在我的具体示例中，我计算组件拥有的文本的宽度，以便在该文本的末尾放置可视光标。（2） 我用来确定事情何时发生变化的方法是偶然的，我担心的是会导致第二次渲染。这看起来可能不是很多，但它是虚拟渲染总量乘以2。还是没什么好担心的？DOM很慢。这就是React的作用。不要感到内疚。干杯。作为一种模式，可以在

render

和

componentDidMount

之间分割渲染逻辑？是的，我从文档中添加了另一行，以澄清他们（react团队）打算在componentdidmountyer期间执行类似操作。这看起来是最好的方法。我想我需要在

componentDidMount

之后将所有内容重新导入

render

（因此是双重渲染），但这看起来更干净。这可能有问题。在下一次渲染调用中，元素将被渲染出视图，然后移回原位。这种情况每次都会发生<代码>渲染不需要包含在逻辑中。您还可以使用componentDidMount向dom添加内容。react的一大优势是虚拟DOM。React将智能地添加一个新项目，而不是重新呈现整个页面。