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

Question

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

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

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

2. 带内部函数表达式的函数声明:

export default function MyComponent(props) {

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

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

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

function myHelper() {
  return "something";
}

export default function MyComponent(props) {

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

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

这些方法之一是否存在任何性能问题？或者使用一个高于其他人的任何其他原因？

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

Answer 1

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

另一个赞成的点Method 3是你提到的可测试性.