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

【问题标题】：What is console.log in the render method of a react component showing?react 组件的 render 方法中显示的 console.log 是什么？
【发布时间】：2019-11-26 13:36:57
【问题描述】：

当我有一个 React.js 组件并将 console.log(this) 放在渲染函数的顶部时，当它触发时，React 是在告诉我我的组件正在渲染虚拟 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;

【问题讨论】：

标签： javascript reactjs react-redux

【解决方案1】：

实际的 dom 更新更昂贵。事实上，即使有多个渲染执行，虚拟 dom 也只会在值发生变化时更新。如果有更改，那么它将修补原始 dom 的新更改。

【讨论】：

【解决方案2】：

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

console.log(这个)。在我这边，我得到了整个对象。

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

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

【讨论】：