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

Posted 2023-02-22

【中文标题】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;

【参考方案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