Reactjs 呈现组件与返回JSX[React]的函数相比的优势

我理解，在您的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>
  );
}

导出默认函数App（）{
const[count，setCount]=useState（0）；
const someRenderFunction=（）=>嘿
；
返回(
{someRenderFunction（）}
{
设置计数（（c）=>c+1）；
}}
>
增量{'}
{count}

);
}

这是不鼓励的。渲染函数应导出到它自己的组件中，如下所示：

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>
  );
}

constheycomponent=（）=>Hey

导出默认函数App（）{
const[count，setCount]=useState（0）；
返回(
{
设置计数（（c）=>c+1）；
}}
>
增量{'}
{count}

);
}

但我从未真正理解过这种重构的好处。我尝试放置并检查重新渲染行为、卸载行为。还是看不出有什么区别。

---

有人能详细解释一下为什么这个重构是必要的/有益的吗？

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

---

如果您必须只显示一个小函数，那么如果它显示恒定的信息，也可以使用它。

这是关于组件的，因此组件应该是可重用的，并且应该遵循

DRY

原则，在您的情况下，这似乎很简单，正如您所说，将阻止

someRenderFunction（）如果
虚拟dom中的组件没有任何更改，则将重新呈现
，因此最佳做法是始终使用
语法，或者在某些情况下
常量Y=
也更具可读性。测试是创建更多组件并使其更加解耦的另一个原因。想象一下，您需要将
道具
传递给
someRenderFunction（）
，这样您将失去作为
传递道具的jsx功能