React 中的 JSX 与组件化开发：以函数为单位构建现代前端应用

React 中的 JSX 与组件化开发：以函数为单位构建现代前端应用
在现代前端工程中，React 以其独特的理念和强大的生态体系，成为众多开发者首选的 UI 构建框架。而其中最核心、最具标志性的特性之一，便是JSX（JavaScript XML）语法与组件化开发思想的深度融合。本文将围绕这两个关键点，深入探讨 React 如何通过“函数即组件”的范式，彻底改变我们构建用户界面的方式。

---

一、JSX：在 JavaScript 中书写 HTML
JSX 是 React 的模板语法扩展，它允许我们在 JavaScript 代码中直接编写类似 HTML 的结构：

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

这行代码看起来像 HTML，但它实际上是 JavaScript 的语法糖。JSX 最终会被 Babel 等编译工具转换为React.createElement()调用，从而生成虚拟 DOM 节点。
JSX 的优势：

• 直观清晰：开发者可以像写 HTML 一样组织 UI 结构，降低认知负担。
• 逻辑与视图融合：不再需要在模板和逻辑之间来回切换，所有内容都在同一个函数作用域内。
• 类型安全与静态分析：配合 TypeScript，可以在编译期捕获潜在错误。

import { useState, createElement } from 'react'; import './App.css'; function App() { const [name, setName] = useState("vue"); const [todos, setTodos] = useState([...]); const [isLoggedIn, setIsLoggedIn] = useState(false); setTimeout(() => { setName("react"); }, 3000); const toggleLogin = () => { setIsLoggedIn(!isLoggedIn); }; const element = <h2>JSX 是 React 中用于描述用户界面的语法扩展。</h2>; const element2 = createElement('h2', null, 'JSX 是 React 中用于描述用户界面的语法扩展。'); return ( <> {element} {element2} <h1>Hello <span className="title">{name}!</span></h1> { todos.length > 0 ? ( <ul> {todos.map((todo) => ( <li key={todo.id}>{todo.title}</li> ))} </ul> ) : (<div>暂无待办事项</div>) } {isLoggedIn ? <div>已登录</div> : <div>未登录</div>} <button onClick={toggleLogin}> {isLoggedIn ? "退出登录" : "登录"} </button> </> ); } export default App;

正如你所见，在这串代码中，我们不仅写了<h1>，还能嵌入 JavaScript 表达式（如{name}）、条件渲染（isLoggedIn ? ... : ...）以及列表映射（todos.map(...)）。这种“XML in JS”（即 JSX）的设计，让 UI 开发变得极其灵活。

---

二、组件化：从“砌砖”到“搭积木”
传统前端开发中，HTML 是结构、CSS 是样式、JavaScript 是行为——三者分离，如同“三明治”。而 React 则采取了截然不同的思路：一切皆组件。
什么是组件？
在 React 中，组件就是一个返回 JSX 的 JavaScript 函数。例如：

function JuejinHeader() { return ( <header> <h1>Juejin首页</h1> </header> ); }

这个函数就是组件。它封装了特定的 UI 片段及其相关逻辑，可独立开发、测试和复用。
组件化带来的变革：

• 分工明确：大型页面被拆解为多个小组件（如<Checkin />、<TopArticles />），团队协作更高效。
• 组合优于继承：通过嵌套和组合组件（如App中组合JuejinHeader、Articles等），构建复杂界面如同“搭积木”。
• 状态驱动更新：借助useState等 Hook，组件能响应数据变化自动重新渲染，实现响应式 UI。

function JuejinHeader() {return (...)} function Articles() {return (...)} function Checkin() {return (...)} function TopArticles() {return (...)} function App() { return ( <div> <JuejinHeader /> <main> <Articles /> <aside> <Checkin /> <TopArticles /> </aside> </main> </div> ) } export default App

在这串代码中，根组件App并不直接写所有 HTML，而是通过调用子组件来组装页面。这种“自上而下”的组件树结构，正是 React 应用的核心骨架。

---

三、函数即组件：简洁而强大的抽象
React 的函数式组件（Function Component）是其哲学的集中体现：

• 轻量：无需类、生命周期等复杂概念，一个普通函数即可成为组件。
• 纯函数倾向：理想情况下，组件接收 props，返回 UI，无副作用，易于推理和测试。
• Hook 赋能：通过useState、useEffect等 Hook，函数组件也能拥有状态和副作用处理能力，媲美类组件。

例如：

const [name, setName] = useState("vue"); setTimeout(() => setName("react"), 3000);

短短几行代码，就实现了状态初始化与异步更新，UI 自动响应变化——这正是 React 响应式数据绑定的体现。

---

四、组件树：取代 DOM 树的新抽象层
React 并不直接操作真实 DOM，而是维护一棵虚拟 DOM 树（Virtual DOM），而这棵树的本质，就是组件树。

• 每个组件节点对应一个 UI 单元。
• 当状态变化时，React 会重新渲染受影响的组件子树，并通过高效的 diff 算法更新真实 DOM。
• 开发者只需关注“当前状态应该渲染什么 UI”，无需手动操作 DOM。

这种声明式编程范式，极大提升了开发效率与代码可维护性。

---

五、对比视角：为何说 React 更“激进”？
共同目标：让 UI 自动响应数据变化
在现代前端开发中，无论是 Vue 还是 React，都围绕三个核心理念构建：响应式（Reactive）、数据绑定（Data Binding）和组件化（Component）。它们让开发者不再手动操作 DOM，而是专注于“数据如何驱动界面”
关键差异：React 更激进，门槛更高
虽然目标一致，但React 的设计哲学更“激进”，对开发者要求更高：

1. 一切皆 JavaScript

• React 认为：UI 逻辑和视图本就密不可分，所以直接在 JS 里写 HTML（JSX）。
• 优点：逻辑集中，灵活性强；
• 缺点：新手要同时理解 JS、函数、作用域、闭包、JSX 语法，学习曲线陡峭。

Vue 则保留了“模板”的边界感，HTML 还是 HTML，JS 还是 JS，更符合传统前端思维。

1. 状态管理需显式控制

• 在 React 中，没有“自动响应”。你必须：
  • 用useState声明状态；
  • 用 setter 函数更新状态；
  • 理解“不可变性”（不能直接修改数组/对象）；
  • 掌握 Hook 规则（只能在顶层调用，不能在条件中使用等）。
• 
  
• Vue 则“更智能”：你直接修改this.message = 'new'或message.value = 'new'，框架自动追踪并更新视图。

对新手来说，Vue 更“开箱即用”；React 则要求你先理解其运行机制。

3.更少的“魔法”，更多的自由

• Vue 提供了大量内置指令（v-if,v-for,v-model），开箱即用；
• React 几乎不提供“语法糖”，所有逻辑都用 JavaScript 实现：
  • 条件渲染 → 用&&或三元表达式；
  • 列表渲染 → 用.map()；
  • 表单双向绑定 → 手动监听onChange+value。

这种“去模板化”的设计让 React 更灵活，但也意味着更多代码和更高出错风险。

---

结语：成为 UI 的“包工头”
如果说传统前端开发是在一块一块地砌砖（写标签、加样式、绑事件），那么 React 则让我们升级为“包工头”——先规划好整体结构（组件树），再分派任务给各个“施工队”（子组件），最终高效、有序地建成整栋大厦（完整应用）。
JSX 提供了表达力极强的 UI 描述语言，而函数式组件则提供了简洁、组合性强的构建单元。二者结合，使得 React 不仅是一个库，更是一种思维方式的革新。
正如 Facebook（现 Meta）最初创造 React 的初衷：让构建复杂用户界面变得更简单、更可预测。而今天，这一目标正通过 JSX 与组件化，被全球数百万开发者践行着。

原文： https://juejin.cn/post/75846518