在 React 开发中，掌握正确的标签（也称为组件）是构建用户界面的基础。本文将详细介绍 React 中常用的标签，帮助新手轻松掌握这一前端框架。

一、React 标签基础

React 标签是 React 元素的一种，用于创建用户界面中的组件。与 HTML 标签不同，React 标签需要使用大写字母开头。

1.1 JSX 语法

JSX（JavaScript XML）是 React 的一个特性，允许你在 JavaScript 代码中编写 HTML 标签。例如：

const element = <h1>Hello, world!</h1>;

1.2 组件

React 组件是构成 React 应用程序的基本单元。组件可以是一个函数或一个类，用于封装 UI 的某个部分。

函数组件

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

类组件

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

二、常用 React 标签

以下是一些 React 中常用的标签：

2.1 标题标签

  • <h1> - <h6>：用于定义标题，<h1> 是最大，<h6> 是最小。

2.2 布局标签

  • <div>：用于创建一个块级元素，用于容器。
  • <span>：用于创建一个行内元素，用于文本。

2.3 文本标签

  • <p>：用于定义段落。
  • <a>：用于创建超链接。

2.4 表单标签

  • <input>：用于创建输入框。
  • <textarea>：用于创建多行文本输入框。
  • <select>：用于创建下拉列表。

2.5 列表标签

  • <ul>：用于创建无序列表。
  • <ol>：用于创建有序列表。
  • <li>：用于定义列表项。

2.6 条件渲染

  • <条件表达式>：用于根据条件渲染内容。
const condition = true;
{condition ? <p>条件为真</p> : <p>条件为假</p>}

2.7 列表渲染

  • map()：用于将数组转换为元素列表。
const items = ['Apple', 'Banana', 'Cherry'];
const listItems = items.map(item => <li>{item}</li>);

三、组件生命周期

React 组件在其生命周期中会经历几个不同的阶段，包括挂载（Mounting）、更新（Updating）和卸载（Unmounting）。

3.1 挂载阶段

  • componentDidMount()：组件挂载到 DOM 后执行。

3.2 更新阶段

  • componentDidUpdate()：组件更新后执行。

3.3 卸载阶段

  • componentWillUnmount()：组件卸载前执行。

四、总结

掌握 React 标签对于学习 React 来说是至关重要的。本文介绍了一些常用标签和组件生命周期，希望对你有所帮助。在学习过程中，不断实践和总结，相信你将能熟练掌握 React。