React 组件

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

什么是组件？

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

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

组件的类型

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

函数组件

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

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

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

类组件

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

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

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

组件的属性（Props）

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

传递 Props

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

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

接收 Props

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

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