渲染函數裏面的反應函數

Question

在反應組件內部放置函數的位置有一個偏好。我仍然在學習反應，所以試圖找出最佳實踐。

class Content extends React.Component { 
    /// Whats the difference between putting functions here such as 
    Hello(){ 

    } 

    render(){ 
     /// or here 
    Hello(){ 

    } 


    return()(
     <div>blah blah </div> 

    ) 

    } 


    } 

Answer 1

渲染方法中的一個函數將被創建，每個渲染都會造成輕微的性能下降。如果你把它們放在渲染中，這也是一團糟，這是一個更重要的原因，你不應該在渲染中滾動代碼來查看html輸出。總是把它們放在班上。

對於無狀態組件，最好將函數保存在主函數之外並傳遞道具，否則函數也會被創建。我沒有測試性能，所以我不知道這是否是一種微型優化，但值得注意。

例子：

const MyStatelessComponent = ({randomProp}) => (
    render() { 
     doSomething(randomProp); 

     return <div /> 
    } 
); 

doSomething = (randomProp) => { 
    //Do something here 
}