React 是什么？一文读懂这个 JavaScript UI 库

React 是一个用组件构建用户界面的 JavaScript 库。你描述在当前数据下屏幕应该是什么样子，数据变化时，React 会更新页面使之匹配。React、React JS 和 ReactJS 指的是同一个东西：一个由 Facebook（现在的 Meta）创建的开源库。

import { useState } from 'react';

function Counter({ label }) {
    const [count, setCount] = useState(0);

    return (
        <p>
            {label}: {count}{' '}
            <button onClick={() => setCount(count + 1)}>Add one</button>
        </p>
    );
}

export default function App() {
    return (
        <div>
            <h3>Fruit basket</h3>
            <Counter label="Apples" />
            <Counter label="Pears" />
        </div>
    );
}

点一点两个按钮。每个 Counter 都有自己的数字，因为每一个都是这个组件的独立副本，拥有自己的状态。再加一行 <Counter label="Plums" />，就会出现一个新的、互不影响的计数器。

这个简短的示例已经展示了 React 的三个核心概念：组件（Counter 和 App 是返回 UI 的函数）、JSX（return 里那种类似 HTML 的语法）和状态（count，一个变化时会让 React 重新绘制组件的值）。

React 解决了什么问题

用户界面是一组数据的画面。数据变化时，画面也要跟着变，屏幕上每一个依赖这份数据的部分都要一起变。如果不用库，这些代码就得你手写：找到每个元素，再亲自设置它的文字、class 或可见性。每加一个新功能，就多一个你必须记得去更新的地方。

React 把这件事反过来了。你只写一个函数，说明在某个状态下屏幕应该是什么样子，React 会算出页面上哪些部分需要改变。这叫作声明式 UI，与之相对的是一步步列出每次 DOM 改动的命令式代码。下面在同一个示例里并排展示这两种风格：

import { useEffect, useRef, useState } from 'react';

function ByHand() {
    const boxRef = useRef(null);

    useEffect(() => {
        // Plain DOM code: no React state, no JSX.
        const box = boxRef.current;
        box.innerHTML = 'By hand: <span class="num">0</span> is <span class="parity">even</span> <button>+1</button>';
        let count = 0;
        const button = box.querySelector('button');

        function handleClick() {
            count += 1;
            box.querySelector('.num').textContent = count;
            box.querySelector('.parity').textContent = count % 2 === 0 ? 'even' : 'odd';
        }

        button.addEventListener('click', handleClick);
        return () => button.removeEventListener('click', handleClick);
    }, []);

    return <p ref={boxRef} />;
}

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

    return (
        <p>
            Declarative: {count} is {count % 2 === 0 ? 'even' : 'odd'}{' '}
            <button onClick={() => setCount(count + 1)}>+1</button>
        </p>
    );
}

export default function App() {
    return (
        <div>
            <ByHand />
            <Declarative />
        </div>
    );
}

ByHand 把它的段落交给普通的 DOM 代码处理（effect 只会在 React 创建好段落之后运行那段代码）。它把数字保存在一个变量里，用 querySelector 找到每个元素，再手动设置文字。Declarative 只说明“显示计数，并显示它是不是偶数”。删掉 handleClick 里设置 .parity 的那一行，然后点几下：第一行会声称 3 是偶数，而第二行不可能不同步，因为它的文字每次渲染都根据 count 计算出来。

React 如何更新页面

状态变化时，React 会再次调用你的组件函数。这次调用就是一次渲染。函数返回一份全新的 UI 描述，React 把它和上一份进行比较，然后只修改真实页面中不同的部分。人们常把这份存在内存里的描述叫作虚拟 DOM。

import { useState } from 'react';

export default function App() {
    const [name, setName] = useState('');

    console.log('App rendered, name is', JSON.stringify(name));

    return (
        <div>
            <input
                value={name}
                onChange={(e) => setName(e.target.value)}
                placeholder="Type your name"
            />
            <p>Hello, {name || 'stranger'}!</p>
        </div>
    );
}

打开预览下方的控制台，输入几个字母。每次按键都会打印一次带新值的渲染。输入框保持焦点和光标位置不变，因为 React 只改动了段落的文字和输入框的值，而不是整个页面。渲染一文详细讲解了组件到底在什么时候重新渲染。

组件、JSX 和状态速览

组件是名称以大写字母开头的 JavaScript 函数。它们返回应该显示在屏幕上的内容，用起来就像 HTML 标签：<Counter />。一个页面是一棵组件树，小到一个按钮，大到整个设置页面。参见组件。

JSX 是让你在 JavaScript 里编写标记的语法。花括号让你回到 JavaScript，所以 {count} 会显示一个值，{items.map(...)} 会把数组变成列表。在浏览器运行之前，构建工具会把 JSX 编译成普通的函数调用。

状态是组件在多次渲染之间记住的数据。你用 useState 这个 Hook 创建它，调用它的 setter 就是在告诉 React 有东西变了。数据通过 props 从父组件流向子组件，props 就是组件的参数。

下面的示例把这些全都用上了：一个根据状态里的数组渲染出的列表，以及一个往列表里添加内容的表单。

import { useState } from 'react';

function TaskList({ tasks }) {
    if (tasks.length === 0) return <p>Nothing to do.</p>;
    return (
        <ul>
            {tasks.map((task) => (
                <li key={task}>{task}</li>
            ))}
        </ul>
    );
}

export default function App() {
    const [tasks, setTasks] = useState(['Learn JSX', 'Learn props']);
    const [draft, setDraft] = useState('');

    function addTask() {
        if (draft.trim() === '') return;
        setTasks([...tasks, draft.trim()]);
        setDraft('');
    }

    return (
        <div>
            <input value={draft} onChange={(e) => setDraft(e.target.value)} />
            <button onClick={addTask}>Add</button>
            <TaskList tasks={tasks} />
            <p>{tasks.length} tasks</p>
        </div>
    );
}

添加一个任务，两处会同时变化：列表和它下面的计数。你从没让计数去更新，但两者都读取 tasks，所以都会跟着变。把初始数组改成 []，列表就会改为显示“Nothing to do.”。

React 不是什么

React 是一个库，不是完整的框架。它负责组件、状态以及把它们变成 UI，并刻意不包含完整应用需要的几样东西：

• 路由。 没有内置的方法把 URL 映射到页面。React Router 和各框架的路由填补了这个空缺。
• 数据请求和服务端渲染。 React 提供了 effect 和 Suspense 等工具，但不规定数据从哪里来，也不规定页面如何在服务器上渲染。
• 构建配置。 浏览器看不懂 JSX，所以你需要 Vite 这样的工具来编译它。

框架在 React 之上提供了这些部分。Next.js 和 React Router 的框架模式加入了路由、服务端渲染和数据加载，React 团队也推荐用其中之一来开始一个完整的应用。如果是纯客户端应用或者用来学习，Vite 加上原生 React 是一个小巧又快速的起点；参见如何安装 React。

React 和 React Native

React 本身只描述组件以及它们如何变化，由另一个渲染器把它们变成你能看到的东西。React DOM 渲染到网页，本站的每个示例用的都是它。React Native 把同样的组件渲染成原生的 iOS 和 Android 视图，所以你写的是 <View> 和 <Text>，而不是 <div> 和 <p>，也没有 HTML 或 CSS 文件。组件、props、状态和 Hook 在两者中的用法一样，所以你在这里学到的东西可以直接用过去。

什么时候学 React

先学好 JavaScript 基础再学 React，因为 React 里的一切都是 JavaScript。开始之前，你应该熟悉：

• 变量、函数和箭头函数
• 数组以及它的 map 和 filter 方法
• 对象、解构和展开语法（...）
• import 和 export
• Promise 和 async/await，用于加载数据

如果这些你都不陌生，就从 JSX 和组件学起，然后是 props 和状态。等你能自然地写出小型交互组件后，再学 effect、ref、context 和性能优化工具。