?? 如果還不了解 HTML 、 CSS和JS，可以參考本號下的 HTML21 天入門教程、 CSS 21 天入門教程和JS21天入門教程。
組件是構建 react 應用的基本單元。
react 組件可以分為函數組件和類組件。
函數組件
函數組件通過 JavaScript 函數創建，接受props作為參數并返回 JSX 元素。
函數組件語法簡潔，適合簡單的展示組件或無狀態組件。
通過 Hooks（如useState、useEffect），函數組件可以管理狀態和副作用。關于 Hooks 后面會展開，這里暫時不清楚沒有關系。
函數組件避免了類實例化的開銷，通常性能更好。
基于以上信息，可以看到函數組件的適用場景，比如簡單和無狀態的，更看重性能的。
一個簡單的函數組件
/*SayHello.js*/import React from 'react';function SayHello(props) { return <h1>Hello, {props.name}!</h1>;}export default SayHello;
創建一個新文件SayHello.js，然后如上代碼，就定義了一個 SayHello 函數組件。
該組件接受一個輸入name，且返回一串<h1>代碼，顯示 Hello {輸入}。
/*App.js*/import SayHello from './SayHello';function App() { return ( <div> <SayHello name="World"></SayHello> </div> );}export default App;
然后在App.js中先import這個組件。
然后使用類似于 HTML 標簽的方式使用這個組件<SayHello name="World"></SayHello>。
它傳入參數name，最終在頁面上看到顯示的是 Hello World！。
類組件
類組件通過繼承React.Component或React.PureComponent創建。
類組件有狀態和生命周期的概念。
它通過this.state和this.setState管理狀態。
它有如componentDidMount、componentDidUpdate、componentWillUnmount這樣的管理生命周期的方法，可以生命周期的不同階段執行任務的場景。
所以能看到，類組件適用于需要管理狀態或使用生命周期方法的場景。
一個簡單的類組件
/*SayHelloNew.js*/import React, { Component } from 'react';class SayHelloNew extends Component { render() { return <h1>Hello, {this.props.name}!</h1>; }}export default SayHelloNew;
創建一個新文件SayHelloNew.js，然后如上代碼，就定義了一個 SayHello 類組件。
該組件也是接受一個輸入name，且返回一串<h1>代碼，顯示 Hello {輸入}。
但可以看到它使用了class，也就是類語法。
/*App.js*/import SayHelloNew from './SayHelloNew';function App() { return ( <div> <SayHelloNew name="World New"></SayHelloNew> </div> );}export default App;
然后在App.js中同樣要先import這個組件。
使用方法也并沒有不同。
總結
基于今天的講解和練習，最終的項目結構如下：
- ?? 函數組件通過 JavaScript 函數創建，接受
props作為參數并返回 JSX 元素。 - ?? 類組件通過繼承
React.Component或React.PureComponent創建。
該文章在 2024/12/4 15:10:03 編輯過
400 186 1886
