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無狀態組件 - 如何組織內部函數？

回答

相關問題