React入门学习——指北指南（第三节）

React 组件

在前面的内容中，我们了解了 React 的基础知识和入门案例。本节将深入探讨 React 中最核心的概念之一 —— 组件。组件是构建 React 应用的基础，理解组件的工作原理和使用方法，对于掌握 React 开发至关重要。

什么是组件？

在 React 中，组件是具有独立功能和 UI 的可复用代码块。可以将组件看作是构建用户界面的 “积木”，通过组合不同的组件，能够搭建出复杂的页面。

组件就像一个函数，它可以接收输入（称为 “props”），并返回 React 元素，用于描述页面应该呈现的内容。例如，一个按钮、一个表单或者一个完整的页面，都可以封装成组件。

组件的类型

React 中有两种主要的组件类型：函数组件和类组件。

函数组件

函数组件是用 JavaScript 函数定义的组件。它是最简单的组件形式，接收 props 作为参数，并返回 React 元素。

function Welcome(props) {&#x20; return \<h1>Hello, {props.name}\</h1>;}

在 React 16.8 引入 Hooks 之后，函数组件具备了与类组件相同的功能，并且写法更加简洁，因此成为了推荐的组件定义方式。

类组件

类组件是基于 ES6 类定义的组件，它需要继承React.Component，并且必须实现render()方法，该方法返回 React 元素。

class Welcome extends React.Component {&#x20; render() {&#x20;   return \<h1>Hello, {this.props.name}\</h1>;&#x20; }}

类组件在 Hooks 出现之前是实现复杂功能的主要方式，虽然现在函数组件更受青睐，但在一些旧项目中仍然会遇到类组件。

组件的属性（Props）

Props是组件的输入参数，用于在组件之间传递数据。Props 是只读的，组件不能修改自身接收的 props，这保证了组件的纯函数特性。

传递 Props

父组件可以通过在子组件标签上添加属性的方式，向子组件传递 props。

function App() {&#x20; return \<Welcome name="Alice" age={25} />;}

接收 Props

子组件通过参数接收父组件传递的 props。对于函数组件，props 是函数的参数；对于类组件，props 通过this.props访问。

// 函数组件接收propsfunction Welcome(props) {&#x20; return (&#x20;   \<div>&#x20;     \<h1>Hello, {props.name}\</h1>&#x20;     \<p>Age: {props.age}\</p>&#x20;   \</div>&#x20; );}// 类组件接收propsclass Welcome extends React.Component {&#x20; render() {&#x20;   return (&#x20;     \<div>&#x20;       \<h1>Hello, {this.props.name}\</h1>&#x20;       \<p>Age: {this.props.age}\</p>&#x20;     \</div>&#x20;   );&#x20; }}

Props 的默认值

可以为组件的 props 设置默认值，当父组件没有传递该 props 时，将使用默认值。

// 函数组件设置