javascript - 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

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

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