在功能性無狀態React組件中是否有很多內部“輔助”功能會導致性能下降

Question

我一直在嘗試使用React Hooks，所以避免使用類。 在最近的代碼審查中，我的一位同事建議我使用類組件而不是使用Hooks的功能組件來重寫我的組件。 他的觀點是，每次渲染我的組件時，所有“內部成員函數”都會重新創建，這可能會導致性能下降。 我的印象是，React團隊希望人們盡可能放棄課程。 在無狀態功能組件中包含大量輔助功能是否真的會導致性能下降？

const Foo = () => {
   const helper = () => {
      doSomething()
   }
   return (<View />)
 }

OR

class Bar extends Component {
   helper = () => {
      doSomething()
   }
   render() {
      return (<View/>)
   }
}

Answer 1

在第一個示例中，每次Foo運行時都必須創建一個新的函數對象。 因此，除非JavaScript引擎可以對其進行優化，否則就不需要內存流失。 （當然，與幾乎所有性能問題一樣，當您遇到性能問題時，也要擔心這種事情。盡管如果您在許多小型組件中進行此操作，則可能會加起來。）

根據helper需求，您可以在SFC外部定義它，然后在其中使用它。

// I'm assuming this is in a module, so it's not a global
const helper = () => {
    doSomething()
}

const Foo = () => {
    // Presumably you use `helper` here somewhere
    return (<View />)
}

如果出於某種原因您不使用模塊（!!），則為了避免helper處於全局狀態，您可以執行通常的作用域檢查。 也許：

const Foo = (() => {
    const helper = () => {
        doSomething()
    }

    return () => {
        // Presumably you use `helper` here somewhere
        return (<View />)
    }
})()

Answer 2

您的同事在技術上是正確的，內部函數將在每次調用render()實例化並綁定，但是除非您非常頻繁地渲染大量組件（由於狀態快速改變或其他原因），否則總成本應該可以忽略不計。

Answer 3

每次渲染組件時，都會重新創建您編寫的輔助函數。 您不必像在組件內那樣定義輔助函數。 如果您真的想在項目中使用React Hooks，請查看在不同情況下適合您需求的鈎子。 例如，如果您需要幫助器函數來調用有關用戶交互的某些操作，則可以使用useCallback 。 您的代碼將如下所示：

const Foo = () => {
   const helper = useCallback(() => {
      doSomething()
   }, []);
   return (<View />)
 }

僅在第一個渲染上創建此函數。 如果您的函數依賴於某些道具，則可以將這些道具作為輸入值傳遞給useCallback 。 發生更改時將重新創建此回調。 例如：

const Foo = (props) => {
   const helper = useCallback(() => {
      doSomething(props.id);
   }, [props.id]);
   return (<View />)
 }