【React 的核心组件】

贺公子之数据科学与艺术

发布于 2025-12-18 08:32:50

1040

React 的核心概念

React 的核心概念围绕组件、状态和 JSX 展开。通过这些概念，可以构建动态且高效的 UI。

组件化 UI 描述

React 将 UI 拆分为可复用的组件。组件分为内置组件（如 div、input）和自定义组件（以大写字母开头，如 CommentBox）。组件以树状结构组织，形成完整的应用。

示例代码：

function CommentBox() {
  return (
    <div>
      <CommentHeader />
      <CommentList />
      <CommentForm />
    </div>
  );
}

状态管理

状态通过 state 和 props 管理。useState Hook 用于在函数组件中声明状态，状态变化触发 UI 更新。props 用于父子组件间传递数据。

计数器示例：

import React from "react";

function CountLabel({ count }) {
  const color = count > 10 ? "red" : "blue";
  return <span style={{ color }}>{count}</span>;
}

export default function Counter() {
  const [count, setCount] = React.useState(0);
  return (
    <div>
      <button onClick={() => setCount(count + 1)}>
        <CountLabel count={count} />
      </button>
    </div>
  );
}

JSX 的本质

JSX 是 JavaScript 的语法糖，编译为 React.createElement 调用。它直接利用 JavaScript 的表达能力，无需额外学习模板语法。

等效代码对比：

// JSX
<div>
  <button onClick={() => setCount(count + 1)}>
    <CountLabel count={count} />
  </button>
</div>

// JavaScript
React.createElement(
  "div",
  null,
  React.createElement(
    "button",
    { onClick: () => setCount(count + 1) },
    React.createElement(CountLabel, { count: count })
  )
);

创建 React 应用

使用官方脚手架（Create React App）

安装工具链 确保已安装 Node.js（≥14.0.0），运行以下命令创建项目：

npx create-react-app my-app
cd my-app
npm start

项目将自动启动开发服务器（默认端口 3000）。

项目结构 生成的标准目录包括：

src/: 源代码（主入口为 index.js）
public/: 静态资源
package.json: 依赖和脚本配置

自定义配置 如需扩展配置（如 Sass、环境变量），可执行：

npm eject

注意：此操作不可逆。

替代方案（Vite）

对于更快的构建工具，可使用 Vite：

npm create vite@latest my-react-app --template react
cd my-react-app
npm install
npm run dev

关键依赖

react 和 react-dom: 核心库
react-scripts（CRA）: 封装构建配置
开发工具（可选）: ESLint、Prettier 等

通过以上步骤，可快速搭建 React 开发环境并应用核心概念构建组件化 UI。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2025-12-15，如有侵权请联系 cloudcommunity@tencent.com 删除

react

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度