React学习：组件化思想

前言

Vue 用得顺手，模板语法清晰，三部分（模板、脚本、样式）分离得特别清楚，上手快，生态也成熟。但工作中总会遇到一些团队或项目在用 React，甚至很多大厂的前端岗位都更偏好 React。React 的理念更"激进"------它把一切都交给 JavaScript，强调"All in JS"。学了之后发现，这种方式虽然入门门槛高一点，但一旦上手，写复杂交互和大型应用时反而更灵活。

React 和 Vue 都是现代前端框架，它们有很多共同点：

• 都支持响应式（数据变了，界面自动更新）
• 都支持数据绑定
• 都推崇组件化开发

但实现方式和哲学完全不同。Vue 更像"渐进式"，你可以用得很简单，也可以用得很复杂；React 则从一开始就逼着你接受它的整套玩法。

一、JSX：React 最亮眼也最让人迷惑的地方

React 最出名的就是 JSX------在 JavaScript 里直接写类似 HTML 的代码。

return (
  <div>
    <h1>Hello React!</h1>
  </div>
);

第一次看到这种写法，我的第一反应是："这不是把 HTML 塞到 JS 里吗？多乱啊！" Vue 是把 HTML 模板单独写在 template 里，逻辑在

但用着用着就发现，JSX 其实是一种"语法糖"，它的本质是调用 React.createElement 函数。比如上面那段 JSX，底层其实是：

return React.createElement("div", null, 
  React.createElement("h1", null, "Hello React<p align=left>!")</p>
);

React 官方提供了 JSX 这种更可读的写法，让我们少写一大堆 createElement。

关键点来了：JSX 不是字符串，也不是 HTML，它是一种 JavaScript 的语法扩展，最终会被 Babel 编译成普通的 JS 函数调用。这就是为什么 React 敢说"Learn once, write anywhere"------一切都是 JS。

和 Vue 对比：

• Vue：模板是声明式的，指令（v-if、v-for）很直观
• React：没有指令，所有逻辑都在 JS 里，用 JS 的方式控制渲染（三元运算符、map 等）

这也是很多人觉得 React 难上手的原因：你得习惯用 JS 的思维写界面。

二、组件：React 开发的基本单位

React 一上来就告诉你：整个应用是由组件组成的。

一个最简单的组件就是一个函数，返回 JSX：

function JuejinHeader() {
  return (
    <div>
      <header>
        <h1>掘金的首页</h1>
      </header>
    </div>
  );
}

然后在另一个组件里像用 HTML 标签一样使用它：

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

看到没？组件就是可以复用、组合的积木块。我们不再像传统开发那样直接操作 DOM 树，而是构建一棵组件树。

这点和 Vue 很像，Vue 也是组件化，但 Vue 的单文件组件（.vue）把模板、脚本、样式明确分开，React 则更倾向于"一个文件就是一个组件"，HTML（JSX）、JS 逻辑、CSS 都可以写在一起（当然也可以分开导入）。

React 的组件必须首字母大写，这是和普通函数的区别，也是为了让 JSX 区分原生 HTML 标签和自定义组件。

最外层必须只有一个根元素，或者用碎片 <></> 包裹，这是因为 React 的 return 只能返回一个元素。

三、useState：React 的响应式核心

Vue 的响应式很"魔法"------你定义一个 ref 或 reactive，改值界面就自动更新，几乎感觉不到背后在做什么。

React 则更"显式"。它通过 Hook 来管理状态，最常用的是 useState：

import { useState } from "react";

function App() {
  const [name, setName] = useState("vue");
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  const toggleLogin = () => {
    setIsLoggedIn(!isLoggedIn);
  };

  // 3秒后自动改成 react
  setTimeout(() => {
    setName("react");
  }, 3000);

  return (
    <>
      <h1>
        Hello <span className="title">{name}</span>
      </h1>
      {isLoggedIn ? <div>已登录</div> : <div>未登录</div>}
      <button onClick={toggleLogin}>
        {isLoggedIn ? "退出登录" : "登录"}
      </button>
    </>
  );
}

注意几点：

1. useState 返回一个数组：[当前状态值, 更新函数]，我们用解构赋值取出来。
2. 更新状态必须调用 setXxx，不能直接改 name = 'xxx'，因为 React 要靠这个知道要重新渲染。
3. 类名用 className，因为 class 是 JS 关键字。
4. 事件用驼峰命名，比如 onClick，不是 onclick。

和 Vue 对比：

• Vue：ref 修改 .value，或者 reactive 直接改属性，Vue 内部通过 Proxy 劫持
• React：必须通过 setState 函数更新，更新是"显式"的

React 的这种方式更可预测，你一眼就能看出哪里会触发重新渲染。

四、条件渲染和列表渲染：用原生 JS 的方式

Vue 有 v-if 和 v-for，很直观。

React 完全用 JavaScript 表达式：

{todos.length > 0 ? (
  <ul>
    {todos.map((todo) => (
      <li key={todo.id}>{todo.title}</li>
    ))}
  </ul>
) : (
  <div>暂无待办事项</div>
)}

• 条件渲染：三元运算符或 &&
• 列表渲染：array.map()
• 一定要加 key，和 Vue 的 :key 作用一样，帮助 React 高效更新 DOM

这也是 React "All in JS"的体现：没有新的模板语法，全部用你已经会的 JS。

五、组件化思想：从"写页面"到"搭积木"

传统开发：我们关心的是页面长什么样，直接写一堆 HTML + CSS + JS 操作 DOM。

React 开发：我们关心的是页面由哪些组件组成。

就像盖房子：

• 传统方式：自己一块砖一块砖砌墙
• React 方式：先设计好"门组件""窗组件""墙组件"，然后像搭乐高一样组合

Facebook 就是用这种方式管理极其复杂的界面。每个小功能都是独立组件，改一个不会影响其他。

组件的好处：

• 可复用：同一个按钮组件可以在多个页面用
• 可维护：逻辑集中在组件内部，改起来不怕牵一发而动全身
• 可组合：复杂页面由简单组件嵌套而成
• 团队协作：不同的人负责不同的组件

六、React 和 Vue 的核心区别总结

方面	Vue	React
模板语法	独立的模板 + 指令（v-if、v-for）	JSX（JS 中写 HTML）
响应式机制	隐式（Proxy 自动追踪）	显式（通过 setState 触发）
组件写法	单文件组件（.vue），模板/脚本/样式分离	函数组件或类组件，通常一个文件一个组件
学习曲线	较平缓，上手快	较陡峭，需要适应"一切都是 JS"的思维
灵活性	渐进式，可简单可复杂	从一开始就拥抱函数式和 Hook，适合大型应用
状态管理	Vuex / Pinia	Redux / Context / Zustand 等多种选择
生态	官方维护路由、状态管理等	社区驱动，生态更碎片化但选择多

写在最后：我的真实感受

刚开始学 React 时，确实很不适应。没有指令、没有模板，一切都要用 JS 写，感觉像退回到了原生开发。但当你写完第一个有状态的组件，看到数据一改界面就自动更新，那种"原来可以这样"的感觉特别爽。

React 逼着你用更纯粹的 JavaScript 思考问题，这其实是在提升你的 JS 基本功。组件化的思想也让我重新审视以前写的流水面条式的代码

React 不是要取代 Vue，它们只是不同的工具。选哪个不重要，重要的是理解背后的组件化、响应式、数据驱动这些现代前端的核心思想。

上手了，我越来越觉得：不管用什么框架，能写出清晰、可维护的代码，才是最重要的。