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

Question

是否有任何理由更喜欢其中一种方法来编写无状态组件？

1. 带有内部函数声明的函数声明

export default function MyComponent(props) {
  
  function myHelper() {
    return "something";
  }
  
  return (
    <p>
      {myHelper()}
    </p>
  );
       
}

1. 带有内部函数表达式的函数声明：

export default function MyComponent(props) {

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

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

1. 带有外部函数声明的函数声明：

function myHelper() {
  return "something";
}

export default function MyComponent(props) {

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

我不喜欢使用函数表达式作为主要组件函数，所以我跳过了这些可能性。

其中一种方法是否存在性能问题？或者任何其他理由使用一个高于其他的？

方法 3. 更容易测试，因为我可以将助手编写为纯函数，将它们导出并导入到测试文件中。但我能找到的唯一论据。

Answer 1

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

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