如何僅將 React 與 function 組件和掛鈎一起使用？

Question

擁有一個 React 項目，其中一些組件以 Class 樣式編寫，而其他一些組件則以 Hooks styles 編寫，這會使新手感到困惑並且難以重用通用邏輯。 有沒有辦法，例如：

• 像 Preact、Inferno 等替代庫，它與 React 兼容，但僅支持 hooks
• 或 ESLint 功能，每次有人嘗試創建 React class 組件時都會發出警告
• ...

防止我的開發人員編寫 Class 組件，因為我希望我的 React 項目中的所有組件都是僅帶有鈎子的功能組件。

Answer 1

使用 eslint 的 react 插件https://www.npmjs.com/package/eslint-plugin-react並在你的 eslint 配置中設置react/prefer-stateless-function為 true

Answer 2

我還想要一個 lint 規則來完成這個，所以我寫了eslint-plugin-react-prefer-function-component 。

唯一不能寫成 function 組件的是那些實現componentDidCatch的組件，因此默認情況下允許實現該方法的組件。 此選項是可配置的。

eslint-plugin-react/prefer-stateless-function （在其他答案中提到）允許 class 組件具有 state 或實現任何 class 方法。