超碰人人人人人,亚洲AV午夜福利精品一区二区,亚洲欧美综合区丁香五月1区,日韩欧美亚洲系列

?? 如果還不了解 HTML 、 CSS和JS，可以參考本號(hào)下的 HTML21 天入門教程、 CSS 21 天入門教程和JS21天入門教程。

組件是構(gòu)建 react 應(yīng)用的基本單元。

react 組件可以分為函數(shù)組件和類組件。

函數(shù)組件

函數(shù)組件通過 JavaScript 函數(shù)創(chuàng)建，接受props作為參數(shù)并返回 JSX 元素。

函數(shù)組件語(yǔ)法簡(jiǎn)潔，適合簡(jiǎn)單的展示組件或無狀態(tài)組件。

通過 Hooks（如useState、useEffect），函數(shù)組件可以管理狀態(tài)和副作用。關(guān)于 Hooks 后面會(huì)展開，這里暫時(shí)不清楚沒有關(guān)系。

函數(shù)組件避免了類實(shí)例化的開銷，通常性能更好。

基于以上信息，可以看到函數(shù)組件的適用場(chǎng)景，比如簡(jiǎn)單和無狀態(tài)的，更看重性能的。

一個(gè)簡(jiǎn)單的函數(shù)組件

/*SayHello.js*/import React from 'react';function SayHello(props) { return <h1>Hello, {props.name}!</h1>;}export default SayHello;

創(chuàng)建一個(gè)新文件SayHello.js，然后如上代碼，就定義了一個(gè) SayHello 函數(shù)組件。

該組件接受一個(gè)輸入name，且返回一串<h1>代碼，顯示 Hello {輸入}。

/*App.js*/import SayHello from './SayHello';function App() { return (   <div>     <SayHello name="World"></SayHello>   </div> );}export default App;

然后在App.js中先import這個(gè)組件。

然后使用類似于 HTML 標(biāo)簽的方式使用這個(gè)組件<SayHello name="World"></SayHello>。

它傳入?yún)?shù)name，最終在頁(yè)面上看到顯示的是 Hello World！。

類組件

類組件通過繼承React.Component或React.PureComponent創(chuàng)建。

類組件有狀態(tài)和生命周期的概念。

它通過this.state和this.setState管理狀態(tài)。

它有如componentDidMount、componentDidUpdate、componentWillUnmount這樣的管理生命周期的方法，可以生命周期的不同階段執(zhí)行任務(wù)的場(chǎng)景。

所以能看到，類組件適用于需要管理狀態(tài)或使用生命周期方法的場(chǎng)景。

一個(gè)簡(jiǎn)單的類組件

/*SayHelloNew.js*/import React, { Component } from 'react';class SayHelloNew extends Component { render() {   return <h1>Hello, {this.props.name}!</h1>; }}export default SayHelloNew;

創(chuàng)建一個(gè)新文件SayHelloNew.js，然后如上代碼，就定義了一個(gè) SayHello 類組件。

該組件也是接受一個(gè)輸入name，且返回一串<h1>代碼，顯示 Hello {輸入}。

但可以看到它使用了class，也就是類語(yǔ)法。

/*App.js*/import SayHelloNew from './SayHelloNew';function App() { return (   <div>     <SayHelloNew name="World New"></SayHelloNew>   </div> );}export default App;

然后在App.js中同樣要先import這個(gè)組件。

使用方法也并沒有不同。

總結(jié)

基于今天的講解和練習(xí)，最終的項(xiàng)目結(jié)構(gòu)如下：

• ?? 組件是構(gòu)建 react 應(yīng)用的基本單元。
• ?? 函數(shù)組件通過 JavaScript 函數(shù)創(chuàng)建，接受props作為參數(shù)并返回 JSX 元素。
• ?? 類組件通過繼承React.Component或React.PureComponent創(chuàng)建。