反应无状态组件 - 如何组织内部函数？

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的另一点是你提到的可测试性。