渲染组件与返回 JSX 的函数的优点 [React]

Question

我明白，在你的 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>
  );
}

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

Answer 1

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

如果您只需要显示一个小功能，那么如果它显示恒定的信息，也可以使用它。