Question

当我有一个React.js组件并且将console.log（this）放在render函数的顶部时，当它触发时，React告诉我我的组件正在渲染虚拟dom还是实际的dom？我是否应该对此进行优化以使其尽可能不出现？呈现虚拟dom或实际dom更昂贵？

import React from 'react';

class ItemRow extends React.Component {

  render() {
    console.log(this)
    return (
      <div className="item">
        Hi
      </div>
    )
  }
}

export default ItemRow;

Answer 1

“ this”实际上是根据Javascript元素的使用上下文来引用的。

console.log（this）。在我这边，我得到了整个物体。

props: {history: {…}, location: {…}, match: {…}, staticContext: undefined, 
data: {…}, …}
refs: {}
state: null

React自动处理虚拟dom操作。它实现了Diffing Algorithm之类的东西，它协调了dom元素。它仅更新更改的属性。这就是为什么虚拟dom操作比实际dom操作更快的原因。请点击此链接以获得更深入的见解。 https://reactjs.org/docs/reconciliation.html

Answer 2

实际dom更新更为昂贵。事实是，即使执行了多个渲染，虚拟dom仅在值发生更改时才更新。如果有更改，则它将新更改修补到原始dom。

显示的react组件的render方法中的console.log是什么？

2 个答案: