React 简介

在动手装环境之前,我们先认识一下 React 到底是什么、为什么值得学、能用它做什么。理解了背景和理念,后面学具体语法会更有方向感。

React 是什么?

React 是 Facebook(现 Meta)在 2013 年开源的前端 JavaScript 库,由工程师 Jordan Walke 发起。它最初是为了解决 Facebook 广告和管理后台那种"复杂数据 + 频繁交互"的页面而生的——传统拼字符串、手动改 DOM 的方式根本撑不住那种规模。React 给出的答案是声明式:你只需要描述"界面在某一刻应该长什么样",数据一变 React 自动帮你算出最小改动并更新 DOM。

注意 React 把自己定位成"库"而不是"框架":它只管渲染视图,路由、状态管理、构建工具等都交给生态。这意味着灵活,但也意味着前期要做的选择更多。后来社区围绕它长出了 Next.js(全栈框架)、React Native(写手机 App)、React Three Fiber(3D)等一整片生态。

诞生背景:被复杂度逼出来的革新

2010 年前后,前端流行的是 jQuery + MVC 框架(Backbone、Ember、AngularJS)。这些框架的通病是:数据和 DOM 双向绑定,代码一多就追不清"谁改了谁",大型应用几乎无法维护。Facebook 内部的广告管理后台就是典型——状态一变,页面到处出 bug。

React 团队换了个思路:与其让代码"指挥 DOM 怎么改",不如让代码"描述界面应该长什么样",剩下的让框架去算。这个思路后来被称为 "UI = f(state)"——界面是状态的函数。听起来抽象,但它成了现代前端的事实标准。2013 年公开时,JSX 这种"在 JS 里写 HTML"的写法被很多人嘲笑,但用上手后效率奇高,两年内 Instagram、WhatsApp、Netflix、Airbnb 纷纷采用,React 一统江湖。

核心设计理念

第一个 React 程序

先看一眼最简单的 React 代码,感受一下它的样子。这是一个渲染"你好,React!"到页面的完整程序:

import { createRoot } from "react-dom/client";

// 一个返回 JSX 的函数,就是一个组件
function App() {
  return <h1>你好,React!</h1>;
}

// 把组件挂载到页面里 id="root" 的元素上
createRoot(document.getElementById("root")).render(<App />);

App 是一个普通的 JS 函数,返回一段 JSX——这就是"组件"。createRoot 把它挂到页面真实 DOM 上。下一篇我们会动手搭好环境,自己跑起来。

React 都用在哪?

React vs 其他前端框架

// Vue 写法:模板 + 选项式
<template>
  <button @click="count++">点击 {{ count }}</button>
</template>
<script>
export default { data: () => ({ count: 0 }) };
</script>

// React 写法:JSX + 函数 + Hook
function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>点击 {count}</button>;
}

该不该学 React?

如果你的方向是前端开发、全栈、移动端,React 几乎是必修课。它的就业机会、社区资源、教程数量都在前端框架里排第一,大厂(字节、阿里、腾讯)和海外公司大量使用。学完本系列,你将能独立用 React + Vite 写出可交互的网页、读懂 Next.js 项目、为后续学 React Native 打下基础。

← 返回 React 教程目录

下一篇 React 环境搭建 →

✈️💬