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

是否有任何理由更喜欢这些方法之一来编写无状态组件？ React无状态组件 - 如何组织内部函数？

：

与内函数声明

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

函数声明与内函数表达式函数声明

功能的外部函数声明的声明：

function myHelper() { 
 
    return "something"; 
 
} 
 

 
export default function MyComponent(props) { 
 

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

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

这些方法之一是否有任何性能问题？或者有其他理由使用上面的其他理由？

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

来源

2016-07-27 kzg

你可以分享为什么你不喜欢使用函数表达式作为主要组件函数。例如：'const MyComponent =（）=>（//你的代码...）;' –

http://stackoverflow.com/questions/37288950/why-does-the-airbnb-style-guide-say-that-依赖函数名称推理是解释 – kzg

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

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

来源

2016-07-27 18:15:21

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

回答

相关问题