Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead 原因與解決方法

在使用 React 開發應用時，你可能會遇到 Console 出現以下警告：

以圖中的警告個為例子，錯誤訊息開頭 waring: header 明確指出 function header 出現警告，警告訊息： Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead

Warning: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.

這個警告表示，在未來的 React 版本中，函數組件將不再支持 defaultProps，建議改用 JavaScript 的默認參數來設置屬性默認值。本文將介紹這一變更的背景以及如何應對。

為什麼要移除 defaultProps

defaultProps 主要用於類組件和函數組件中設置屬性的默認值。然而，隨著 JavaScript 語言的發展，ES6 引入了默認參數，使得在函數定義中設置默認值變得更加簡潔和直觀。這種方式減少了代碼的冗餘，並提高了可讀性和可維護性。

如何使用默認參數替代 defaultProps

舊方法：使用 defaultProps來定義

const MyComponent = (props) => {
  const { title, description } = props
  return (
    <div>
      <h1>{title}</h1>
      <p>{description}</p>
    </div>
  );
};

MyComponent.defaultProps = {
  title: 'Default Title',
  description: 'Default Description',
};

或

const MyComponent = ({ title, description }) => {

  return (
    <div>
      <h1>{title}</h1>
      <p>{description}</p>
    </div>
  );
};

MyComponent.defaultProps = {
  title: 'Default Title',
  description: 'Default Description',
};

新方法：使用默認參數直接定義

const MyComponent = ({ 
  title = 'Default Title',
  description = 'Default Description' 
}) => {
  return (
    <div>
      <h1>{title}</h1>
      <p>{description}</p>
    </div>
  );
};

這樣，你就不再需要使用 defaultProps，而是直接在函數參數中設置默認值。這種方式不僅簡化了代碼，還避免了未來版本中可能的兼容性問題​。

特殊情況處理

在某些情況下，如需要設置複雜的默認值或者在多層級結構中傳遞屬性，你可能需要考慮更靈活的解決方案。例如，利用高階組件（HOC）或自定義 hooks 來處理默認值邏輯。

移除 defaultProps 支持是 React 發展中的一個重要變更，目的是鼓勵開發者使用更現代的 JavaScript 特性。通過使用默認參數來設置屬性默認值，你可以保持代碼的簡潔和高效，並確保應用的未來兼容性。

希望這篇文章能夠幫助你順利過渡到新的默認值設置方式。
如有其他問題，歡迎隨時提出！