渲染组件与返回 JSX 的函数的优势 [React]答案

【问题标题】：Advantages of rendering a component vs a function returning JSX [React]渲染组件与返回 JSX 的函数的优势 [React]
【发布时间】：2021-02-22 09:57:38
【问题描述】：

我知道，在你的 React 组件中，渲染一个组件而不是使用渲染一些 JSX 的函数总是好的。我的意思是，

这样做：

export default function App() {
  const [count, setCount] = useState(0);
  const someRenderFunction = () => <p>Hey</p>;
  return (
    <div className="App">
      {someRenderFunction()}
      <button
        onClick={() => {
          setCount((c) => c + 1);
        }}
      >
        Increment{" "}
      </button>
      <p>{count}</p>
    </div>
  );
}

不鼓励。渲染函数应该导出到它自己的组件中，像这样：

const HeyComponent = () => <p>Hey</p>

export default function App() {
  const [count, setCount] = useState(0);
  return (
    <div className="App">
      <HeyComponent />
      <button
        onClick={() => {
          setCount((c) => c + 1);
        }}
      >
        Increment{" "}
      </button>
      <p>{count}</p>
    </div>
  );
}

但我从来没有真正理解过这种重构的好处。我尝试检查重新渲染行为，卸载行为。还是没看出有什么区别。谁能详细解释为什么这个重构是必要的/有益的？

【问题讨论】：

标签： reactjs rendering

【解决方案1】：

这都是关于components，所以组件应该是可重用的，并且应该遵循DRY 原则，在你的情况下，这似乎很简单，正如你所说的那样会阻止someRenderFunction() 被重新渲染如果virtual dom 中的该组件没有任何更改，那么最佳实践是始终使用<X /> 语法，或者在某些情况下const Y = <X /> 也更具可读性。测试是创建更多组件并使它们更加解耦的另一个原因。想象一下，您需要将props 传递给您的someRenderFunction()，这样您将失去将道具传递为<X prop={PROP}/> 的jsx 功能。

【讨论】：

【解决方案2】：

两者的实际区别在于返回 JSX 的函数不是组件，所以它没有自己的状态。当你在函数中使用useState时，状态改变会导致App被重新渲染。

【讨论】：

【解决方案3】：

遵循呈现组件的代码作为最佳实践。使用组件，我们可以将状态值传递给子组件，并可用于显示数据。相同的组件可以在其他地方重复使用。

如果你只需要显示一个小函数，如果它显示常量信息也可以使用。

【讨论】：