有两个助手可用于在渲染时添加内容:

  ... 
 
  const DisplayA = () => <div className={'containerA'}> 
    <button onClick={handleToggleA}>{"A toggled: " + toggledA.toString()}</button> 
  </div> 
 
  const displayB = () => <div className={'containerB'}> 
    <button onClick={handleToggleB}>{"B toggled: " + toggledB.toString()}</button> 
  </div> 
 
  return ( 
    <> 
      <DisplayA /> 
      { displayB() } 
    </> 
  ); 
 
  ... 

问题在于，在第一个助手中，React 总是丢弃整个子树并从头开始重新创建它，如下所示:

The demo

我知道，第一种方法是 React.createElement 的语法糖，因此每次渲染都会创建一个新组件。然而，第二种方式，每次渲染也会创建一个不同的箭头函数。

1. 为什么 React 不知道如何以第一种方式重用子树，但知道第二种方式？ 幕后发生了什么？

2. 我们如何发现 DOM 子树何时被丢弃并在每次渲染时重新创建？假设不应创建内联组件而仅使用内联函数就足够了吗？

请注意，助手可以来自 Prop ，例如(渲染 Prop 模式)。

请您参考如下方法:

这将取决于 DisplayA 的定义范围。功能组件通常应定义在文件的顶层。在您的演示中，DisplayA 是在 App 的 render 内部创建的组件，因此每次 App 都会渲染一个创建新的功能组件，而不是同一组件的新调用。

要解决此问题，请在文件中将 DisplayA 设置为顶层并将 props 传递给它。

const DisplayA = ({handleToggle, toggled}) => <div className={'containerA'}> 
  <button onClick={handleToggle}>{"A toggled: " + toggled.toString()} </button> 
</div> 
 
const App = () => { 
  ... 
  return <> 
    <DisplayA handleToggle={() => {...}} toggle={...} /> 
  </> 
} 

第二种方法不会创建一个传递给 React 进行协调的组件，而是一个在渲染时调用的函数，并将包含的元素放入该组件的渲染中。