登录react组件(1)---从入门到上手
组件是 React 的核心基石，也是 React 生态中最具代表性的设计思想。它将 UI 拆分为独立、可复用的单元，就像乐高积木一样，通过组合不同的组件可以构建出复杂的页面。从早期的类组件到如今的函数组件 + Hooks，React 组件的开发模式不断进化，变得更加简洁、灵活。本文将从组件本质、分类、创建、核心特性、通信、复用、性能优化等维度，全面解析 React 组件的使用方法与最佳实践，帮助你彻底掌握这一核心技能。
一、React 组件的本质：什么是组件？
1. 组件的定义
React 组件是独立的、可复用的 UI 单元，它接收输入（Props），处理内部逻辑（State/Hooks），最终返回用于描述 UI 的 JSX（或 React 元素）。简单来说，组件就是一个 “函数”：输入数据，输出 UI。
2. 组件的核心思想：模块化与复用
在传统的前端开发中，我们通常按页面划分代码，代码耦合度高，复用性差。而 React 的组件化思想解决了这一问题：
- 单一职责：一个组件只负责完成一个特定的功能（比如一个按钮、一个列表、一个弹窗）；
- 可复用：组件可以在不同页面、不同项目中重复使用；
- 可组合：组件可以嵌套、组合，形成更复杂的组件或页面；
- 可维护：组件独立存在，修改一个组件不会影响其他组件，便于后期维护。
3. 组件的本质：函数或类
无论哪种类型的 React 组件，其本质都是JavaScript 函数或类：
- 函数组件：本质是一个普通的 JavaScript 函数，接收 props 参数，返回 JSX；
-
类组件：本质是继承自
React.Component的类，通过render方法返回 JSX。
举个最简单的例子，一个显示 “Hello React” 的组件：
// 函数组件（主流）
const Hello = () => {
return <h1>Hello React</h1>;
};
// 类组件（旧版写法，现在极少使用）
import React from 'react';
class HelloClass extends React.Component {
render() {
return <h1>Hello React</h1>;
}
}
二、React 组件的分类：不同类型的组件及适用场景
React 组件可以根据实现方式、职责、特性分为不同类型，了解这些分类有助于我们在开发中选择合适的组件类型。
1. 按实现方式划分：函数组件 vs 类组件
这是最核心的分类方式，也是 React 发展的重要分水岭。
| 特性 | 函数组件（Function Component） | 类组件（Class Component） |
|---|---|---|
| 语法复杂度 | 简洁，普通 JS 函数 | 繁琐，需要继承 React.Component，写 render 方法 |
| 状态管理 | 依赖 Hooks（useState、useReducer） | 依赖 this.state 和 this.setState |
| 生命周期 | 依赖 Hooks（useEffect） | 有固定的生命周期方法（componentDidMount 等） |
| 性能 | 略优（无类实例化开销） | 略差（需要实例化类） |
| 适用场景 | 所有场景（React 16.8 + 推荐） | 老项目维护、特殊场景（如需要继承的组件） |
注意：React 16.8 版本引入 Hooks 后，函数组件已经能够实现类组件的所有功能，目前函数组件 + Hooks是 React 开发的主流方式，类组件仅在老项目中存在。
2. 按职责划分：展示组件 vs 容器组件
这是一种基于 “关注点分离” 的分类方式，用于区分组件的功能职责。
展示组件（Presentational Component）
- 职责：只负责 UI 的展示，不处理业务逻辑，也不管理状态；
- 数据来源：通过 Props 接收外部传入的数据和回调函数；
- 特点：纯函数式、可复用性高、无副作用。
// 展示组件：只渲染列表项，不处理数据逻辑
const TodoItem = ({ text, onDelete }) => {
return (
<li>
{text}
<button onClick={onDelete}>删除</button>
</li>
);
};
容器组件（Container Component）
- 职责：负责处理业务逻辑、管理状态、请求数据，不关心 UI 展示；
- 数据来源：自身的 State 或外部状态管理库（Redux、Mobx）；
- 特点：通常不直接渲染 JSX，而是将数据和方法通过 Props 传递给展示组件。
// 容器组件：处理待办事项的逻辑，管理状态
import { useState } from 'react';
const TodoListContainer = () => {
const [todos, setTodos] = useState(['学习React组件', '写博客']);
const handleDelete = (index) => {
setTodos(todos.filter((_, i) => i !== index));
};
return (
<ul>
{todos.map((todo, index) => (
<TodoItem key={index} text={todo} onDelete={() => handleDelete(index)} />
))}
</ul>
);
};
补充：随着 Hooks 的普及，这种分类方式逐渐淡化，因为我们可以通过自定义 Hooks 将业务逻辑抽离，让组件同时兼具展示和逻辑功能。
3. 其他常见分类
-
纯组件（Pure Component） ：类组件中的
React.PureComponent或函数组件中的React.memo，用于优化性能，避免不必要的重渲染； - 高阶组件（Higher-Order Component，HOC） ：一个接收组件并返回新组件的函数，用于复用组件逻辑；
- 门户组件（Portal） ：用于将组件渲染到 DOM 树的其他位置，如弹窗、提示框；
-
懒加载组件：通过
React.lazy和Suspense实现的按需加载组件。
三、组件的创建与基础使用
本节将重点讲解函数组件的创建与使用（类组件仅作简单介绍），包括 Props 接收、默认值、类型校验等核心知识点。
1. 基础函数组件的创建与渲染
（1）创建函数组件
函数组件是一个普通的 JavaScript 函数，返回值为 JSX（或 null、false，表示不渲染任何内容）。
// 无参数的基础组件
const Button = () => {
return <button>点击我</button>;
};
// 箭头函数简写（无大括号时，return可省略）
const Text = () => <p>这是一段文本</p>;
// 普通函数写法（兼容旧版JS）
function Title() {
return <h1>这是标题</h1>;
}
（2）渲染组件
组件创建完成后，可以像使用 HTML 标签一样在其他组件中渲染，注意组件名必须以大写字母开头（React 的约定，用于区分原生 HTML 标签）。
// 根组件
const App = () => {
return (
<div className="app">
<Title />
<Text />
<Button />
</div>
);
};
// 渲染到DOM
import { createRoot } from 'react-dom/client';
const root = createRoot(document.getElementById('root'));
root.render(<App />);
2. Props：组件的输入参数
Props（Properties 的缩写）是组件的输入参数，用于从父组件向子组件传递数据。Props 是只读的，子组件不能修改 Props（这是 React 的单向数据流原则）。
（1）接收与使用 Props
// 子组件：接收props
const Greeting = (props) => {
// props是一个对象，包含父组件传递的所有属性
return <h1>Hello, {props.name}!</h1>;
};
// 父组件：传递props
const App = () => {
return (
<div>
{/* 传递字符串属性 */}
<Greeting name="React" />
{/* 传递非字符串属性（需用{}包裹） */}
<Greeting age={18} />
{/* 传递布尔值 */}
<Greeting isShow={true} />
{/* 传递函数 */}
<Greeting onButtonClick={() => alert('点击了')} />
{/* 传递JSX元素（对应props.children） */}
<Greeting>
<p>这是子元素</p>
</Greeting>
</div>
);
};
（2）Props 解构赋值
为了简化代码，通常使用解构赋值直接提取 Props 中的属性。
// 基础解构
const Greeting = ({ name, age }) => {
return (
<div>
<h1>Hello, {name}!</h1>
<p>年龄：{age}</p>
</div>
);
};
// 解构+默认值
const Greeting = ({ name = '游客', age = 0 }) => {
return (
<div>
<h1>Hello, {name}!</h1>
<p>年龄：{age}</p>
</div>
);
};
（3）默认 Props
除了使用解构赋值设置默认值，还可以通过defaultProps属性设置组件的默认 Props（适用于函数组件和类组件）。
const Greeting = ({ name, age }) => {
return (
<div>
<h1>Hello, {name}!</h1>
<p>年龄：{age}</p>
</div>
);
};
// 设置默认Props
Greeting.defaultProps = {
name: '游客',
age: 0
};
（4）Props 类型校验
为了提高代码的健壮性，我们可以使用prop-types库对 Props 的类型进行校验（React v15.5.0 后，PropTypes 从 React 核心库中移出，需单独安装）。
步骤 1：安装 prop-types
npm install prop-types --save
# 或
yarn add prop-types
步骤 2：使用 PropTypes 进行类型校验
import PropTypes from 'prop-types';
const Greeting = ({ name, age, isShow, onButtonClick, children }) => {
return (
<div>
<h1>Hello, {name}!</h1>
<p>年龄：{age}</p>
{children}
</div>
);
};
// 类型校验
Greeting.propTypes = {
// 字符串，必传
name: PropTypes.string.isRequired,
// 数字（也可以是字符串）
age: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
// 布尔值
isShow: PropTypes.bool,
// 函数
onButtonClick: PropTypes.func,
// 任意React节点
children: PropTypes.node
};
// 默认Props
Greeting.defaultProps = {
name: '游客',
age: 0,
isShow: false
};
3. 类组件的创建（仅作了解）
类组件需要继承React.Component，并实现render方法返回 JSX。
import React from 'react';
import PropTypes from 'prop-types';
class Greeting extends React.Component {
// 默认Props
static defaultProps = {
name: '游客',
age: 0
};
// 类型校验
static propTypes = {
name: PropTypes.string.isRequired,
age: PropTypes.number
};
render() {
const { name, age } = this.props;
return (
<div>
<h1>Hello, {name}!</h1>
<p>年龄：{age}</p>
</div>
);
}
}
