我一直在遵循幾個不同的教程學習 React，我注意到組件創建方面的一些差異。
在一個 App.js 檔案中，一個組件如下所示：
import React, { Component } from "react";
import { BrowserRouter as Router, Route } from 'react-router-dom';
import ListEmployees from "./components/listEmployees";
class App extends Component {
render() {
return (
<Router>
<div className="App">
<Route exact path="/" component={ListEmployees} />
</div>
</Router>
)
}
}
export default App;
在另一個專案中，組件的創建方式如下：
import React, { Fragment, Component } from "react";
import { BrowserRouter as Router, Route } from 'react-router-dom';
import './App.css';
import ListEmployees from "./components/listEmployees";
import displayNavbar from "./components/navbar";
const App = () => {
return (
<Fragment>
<div className="container">
<ListEmployees />
</div>
</Fragment>
)
}
export default App;
這兩個組件之間有什么區別，使用一種方式比另一種方式有什么優勢？
uj5u.com熱心網友回復：
您的第一個示例是類組件。這曾經是構建 React 組件的唯一方法（v16.8 之前）。與您的第二個示例中的功能組件相比，它們可能更令人困惑。開發人員和 Facebook 想要更簡單的方法來創建 React 組件。
輸入使用 React Hooks ( https://reactjs.org/docs/hooks-intro.html ) 的功能組件。
根據我的經驗，功能組件更容易撰寫、除錯和維護。Hooks 解決了一些更復雜的問題，您可以在我之前發布的鏈接中閱讀這些問題。
這在很大程度上取決于偏好，但我看到的絕大多數人都使用功能組件。
uj5u.com熱心網友回復：
您給出的第一個示例是類組件。第二個是功能組件。
類組件是制作組件的原始方式。根據 Facebook 的說法，功能組件是未來。
官方檔案：https : //reactjs.org/docs/components-and-props.html
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/349431.html
標籤：javascript 反应