React 是现在最流行的前端 JavaScript 框架，GitHub 星标超过 20 万，Facebook 开发出来，现在全世界大公司小创业公司都在用，做前端基本绕不开。

我用 React 写过好几个项目，从 SPA 到 SSR 都玩过，聊聊它到底好在哪，适合什么场景，新手入门怎么样。

React 解决了什么问题

以前写前端，操作 DOM 全靠 JavaScript 手动改，数据一变界面没更，界面改了数据没同步，写着写着就乱了，维护起来痛苦。React 用了虚拟 DOM，数据一变自动帮你更新界面，你只需要管好数据，不用管怎么更新 DOM。

组件化开发，你把界面拆成一个个小组件，每个组件管自己的状态和渲染，复用方便，改一个组件不影响别的，项目大了好维护。

单向数据流，数据从父组件传到子组件，修改数据方向清晰，不容易出莫名其妙的 bug，debug 方便。

现在生态太完善了，路由、状态管理、HTTP 请求全都有现成的，你不用自己拼，拿来就用，开发快。

基础例子看一下

安装创建项目，现在用 Vite 创建很快：

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

写个简单组件：

// App.jsx
import { useState } from 'react'

function App() {
  const [count, setCount] = useState(0)

  return (
    <div>
      <h1>Hello React</h1>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  )
}

export default App

就是这样，JSX 语法，HTML 直接写在 JavaScript 里面，看起来怪，用习惯了挺方便，组件结构一眼能看到。

核心好用的特性

组件化

把界面拆成小组件，每个组件做一件事，复用方便，你写个按钮组件到处能用，不用重写。项目大了分工方便，每个人改自己组件，不打架。

JSX

JavaScript 和 HTML 写一块，组件逻辑和渲染放一块，改需求的时候，逻辑视图一起改完，不用来回切文件，真的省心。语法不难，学一会儿就会了。

虚拟 DOM

数据变了，React 算好最小改动更新 DOM，不用你自己操作 DOM，省很多事，性能也不错。

单向数据流

数据从上到下流，修改数据方向清晰，不容易乱，理解起来容易，出问题好 debug。

Hooks

现在写组件用函数组件加 Hooks，不用 class 那一套，代码更简洁，逻辑复用方便，自定义 Hooks 抽逻辑，好用。

哪些场景用 React

单页应用 SPA，现在前端项目基本上单页应用多，React 天生适合，路由配合做起来顺滑。大型前端项目，组件化加单向数据流，项目大了好维护，很多大公司大项目都在用，扛得住。

移动端开发，React Native 用 React 语法写原生应用，一套代码多端运行，省钱省事。服务端渲染 SSR，Next.js 基于 React，SSR 做好了，首屏快，SEO 好，适合博客电商这些。

React 有哪些优缺点

优点说不完，组件化开发真的舒服，代码好维护，生态太大了，你想要什么轮子都有，不用自己写。社区活跃，资料多，新手入门遇到问题一搜就有答案，找工作也需要，前端岗位基本要求会 React。

Facebook 维护，一直更新，新特性加得稳，不会瞎改，老项目升级一般没问题。

缺点也有，上手容易精通难，很多概念，Hooks 依赖那些，新手容易写错依赖，出问题不知道怎么改。打包出来体积不小，要优化 Tree Shaking 代码分割，新手配置不好包就大。

确实很多东西要第三方，状态管理 Redux，路由 React Router，都得自己学，一开始要学的东西多。

现在 React 发展得怎么样

出来快十年了，现在还是前端框架第一梯队，用户最多，star 最多，一直更新，现在 React 18 也出来了，并发特性越来越好。

生态越来越完善，Vite 开发快，Next.js 做 SSR 方便，React Native 也一直更，跨平台越来越稳。工作需求大，前端招聘基本上都要求会 React，学会了找工作好找。

现在学 React 值得吗

做前端开发，肯定值得学，现在前端工作基本上都要求会，不会找不到前端工作。

入门其实不难，JS 基础够，跟着教程写几个项目，一个月就能上手做简单项目，高阶用法慢慢在项目里积累。

生态这么好，各种轮子都有，学会了开发快，做项目效率高，就算你用别的框架，懂了 React 思想学别的也快，绝对值。

项目地址：https://github.com/facebook/react

目里积累。

生态这么好，各种轮子都有，学会了开发快，做项目效率高，就算你用别的框架，懂了 React 思想学别的也快，绝对值。

项目地址：https://github.com/facebook/react