javascript - react 无状态组件-如何组织内部功能？

有没有理由更喜欢使用这些方法之一来编写无状态组件？

具有内部函数声明的函数声明

export default function MyComponent(props) {

  function myHelper() {
    return "something";
  }

  return (
    <p>
      {myHelper()}
    </p>
  );

}

具有内部函数表达式的函数声明:

export default function MyComponent(props) {

  const myHelper = () => {
    return "something";
  };

  return (
    <p>{myHelper()}</p>
  );

}

具有外部函数声明的函数声明:

function myHelper() {
  return "something";
}

export default function MyComponent(props) {

  return (
    <p>
      {myHelper()}
    </p>
  );

}

我不喜欢将函数表达式用作主要组件函数，因此我跳过了这些可能性。

这些方法之一是否存在性能问题？还是有其他原因要优先使用？

方法3.更易于测试，因为我可以将辅助函数编写为纯函数，将其导出并导入到测试文件中。但是，我只能找到唯一的论点。

最佳答案

我认为Method 3将是最好的，因为在每个渲染调用中，助手仅创建一次并执行多次。
在其他情况下，每次渲染组件时都会创建帮助程序，这可能会导致性能问题。

支持Method 3的另一点是您提到的可测试性。