关于渲染中的反应传递组件的问题答案

【问题标题】：Question about react pass component in render关于渲染中的反应传递组件的问题
【发布时间】：2021-08-26 03:15:27
【问题描述】：

我正在阅读很棒的博客，发现一些我不太清楚的地方。 https://kentcdodds.com/blog/optimize-react-re-renders 这是我无法理解的代码 sn-p。

https://codesandbox.io/s/react-performance-1-fast-sgz8f?file=/src/index.js

import * as React from 'react'
import ReactDOM from 'react-dom'
function Logger(props) {
  console.log(`${props.label} rendered`)
  return null // what is returned here is irrelevant...
}
function Counter(props) {
  const [count, setCount] = React.useState(0)
  const increment = () => setCount(c => c + 1)
  return (
    <div>
      <button onClick={increment}>The count is {count}</button>
      {props.logger}
    </div>
  )
}
ReactDOM.render(
  <Counter logger={<Logger label="counter" />} />,
  document.getElementById('root'),
)

我的问题是为什么每次我们更新计数状态时 Logger 组件都不会呈现？这种方式如何防止 logger 功能组件更改其 props 对象？为什么我们不在 Counter 组件的每个渲染上都创建新的 Logger props 对象？

感谢您的帮助！

【问题讨论】：

标签： reactjs

【解决方案1】：

function Counter({logger}) {
  const [count, setCount] = React.useState(0)
  const increment = () => setCount((c) => c + 1)
  return (
    <div>
      <button onClick={increment}>The count is {count}</button>
      <Logger label="counter" />
    </div>
  )
}

如果您希望Logger 组件重新渲染，而不是{props.logger}，您可以定义Logger 组件，如上所示，那么您将在每次按钮单击时看到counter rendered。

至于为什么会出现这种行为，仅仅是因为您已经通过 props 传递了组件，如下所示

<Counter logger={<Logger label="counter" />} />

并直接在Counter组件中渲染

function Counter(props) {
  const [count, setCount] = React.useState(0)
  const increment = () => setCount(c => c + 1)
  return (
    <div>
      <button onClick={increment}>The count is {count}</button>
      {props.logger}
    </div>
  )
}

每当Counter 组件被重新渲染时，props 中存在相同的Logger 实例，当组件被重新渲染时，props 中的对象不会被重新初始化。

好问题！

【讨论】：

【解决方案2】：

如果您阅读了您引用的文章中的说明，则会详细说明此行为。

这是解释的部分 - https://kentcdodds.com/blog/optimize-react-re-renders#lets-bring-it-back-together

【讨论】：