react 元件加上 displayName 屬性的作用是什麼

龙陌發表於2024-03-26
React元件

react 元件加上 displayName 屬性的作用是什麼

在React中，為元件新增displayName屬性的主要作用是方便除錯和識別元件。在開發過程中，尤其是在檢視瀏覽器開發者工具（如React DevTools擴充套件）時，displayName屬性的值會顯示為元件的名稱，這對於追蹤元件層次結構、查詢特定元件以及理解元件之間的互動非常有用。

在React元件類或函式元件定義中，displayName屬性可以這樣設定：

對於類元件：

class MyComponent extends React.Component {
  static displayName = 'MyComponentDisplayName'; // 設定類元件的displayName

  // ...
}

對於函式元件：

const MyFunctionalComponent = (props) => {
  // ...
};

MyFunctionalComponent.displayName = 'MyFunctionalComponentDisplayName'; // 設定函式元件的displayName

或者使用函式表示式時，可以在函式表示式外面直接賦值：

const MyFunctionalComponent = (props) => {
  // ...
};

MyFunctionalComponent.displayName = 'MyFunctionalComponentDisplayName';

另外，如果使用了諸如create-react-app、TypeScript或者其他支援裝飾器的工具鏈，還可以透過裝飾器自動設定displayName：

import { withDisplayName } from 'some-decorator-library';

@withDisplayName('MyDecoratedComponent')
class DecoratedComponent extends React.Component {
  // ...
}

如果省略了displayName屬性，React會嘗試基於元件的建構函式或函式名稱自動推斷一個名稱。
但為了程式碼可讀性和除錯過程中的明確性，尤其是對於簡化的箭頭函式元件，手動設定displayName是一個很好的實踐。
此外，在一些高階用例中，如高階元件包裹後的元件，設定displayName可以幫助在除錯工具中更好地反映元件的真實來源和層級關係。

相關文章