狠狠色丁香婷婷综合尤物/久久精品综合一区二区三区/中国有色金属学报/国产日韩欧美在线观看 - 国产一区二区三区四区五区tv

?? 如果還不了解 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這個組件。

使用方法也并沒有不同。

總結

基于今天的講解和練習，最終的項目結構如下：

• ?? 組件是構建 react 應用的基本單元。
• ?? 函數組件通過 JavaScript 函數創建，接受props作為參數并返回 JSX 元素。
• ?? 類組件通過繼承React.Component或React.PureComponent創建。