💡 如果还不了解 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创建。