学React之前JavaScript要掌握到什么程度？

一、为什么不需要学完整个 JavaScript 才能学 React？

很多初学者在制定前端学习计划时，容易陷入“必须精通所有 JavaScript 语法书再学框架”的误区。实际上，JavaScript 是一门演进了近三十年的多范式语言，包含了大量的历史兼容包袱（如 var 变量提升、隐式全局变量、繁琐的原生 DOM 操作接口）。

现代 React（尤其是 React 16.8+ 全面推行 Hooks 函数式组件之后）本质上是现代 JavaScript（ES6+）函数式子集的一种自然延伸。React 没有专门发明复杂的专有语法模板引擎，它的核心概念 JSX 本质就是标准的 JavaScript 函数调用语法糖。在日常 React 开发中，我们几乎 90% 的时间都在使用 ES6 的常用特性和纯数组变换。

因此，高效的学习策略是“精准对齐 React 的语法交集”，把精力集中在真正支撑 React 运行的心智模型上，其余冷门与旧特性在遇到具体工程问题时再按需补充。

二、必须熟练掌握的现代 JavaScript（ES6+）核心语法

以下六项语法是编写 React 组件的“日常呼吸级”技能，如果对它们感到迟疑，在看 React 教程时就会误把普通的 JS 语法当成 React 专有黑魔法。

1. 变量声明与作用域：从习惯 const 开始

在 React 生态中，变量的作用域和生命周期非常明确。严禁在项目中继续使用 var，应当全面转向 const 和 let：

• 默认使用 const：React 崇尚状态的不可变性（Immutability）。除了在循环或显式重赋值计数器中使用 let 之外，其余函数、对象、数组以及 Hooks 返回的状态引用一律声明为 const。
• 块级作用域：大括号 {} 形成独立作用域，变量不再渗透到外层，杜绝了变量提升引发的逻辑混乱。

2. 箭头函数与隐式返回（Arrow Functions）

React 函数组件本身就是一个函数，JSX 中的事件绑定、内联回调、自定义 Hook 随处都是箭头函数的应用。需要掌握以下两种常见形态：

// 1. 隐式单值返回（常用于 JSX 列表渲染）
const double = x => x * 2;

// 2. 隐式返回对象字面量（必须用圆括号包裹对象的大括号，否则会被误判为函数体）
const createItem = (id, text) => ({ id, text, done: false });

// 3. 事件处理函数内联传递
<button onClick={() => handleClick(item.id)}>删除</button>

3. 解构赋值与默认值（Destructuring）

React 组件之间传递数据通过 props 对象实现，而 useState 等 Hook 则返回数组结构。解构赋值让代码变得极度精炼：

// 1. 对象解构与参数默认值（React Props 解包标准写法）
function UserCard({ name, role = "普通成员", avatar }) {
  return <div>{name} ({role})</div>;
}

// 2. 数组解构（React Hooks 的基础返回值机制）
const [count, setCount] = useState(0);

4. 展开运算符与剩余参数（Spread / Rest）

展开运算符 ... 在 React 中承担两项重要任务：不可变数据更新与Props 属性批量透传。

// 场景 A：向不可变数组尾部追加元素（代替 push）
const newTodos = [...todos, { id: 3, text: "学习React" }];

// 场景 B：修改对象中的某一项属性并保留其余项
const updatedUser = { ...user, role: "管理员" };

// 场景 C：组件属性批量透传
<CustomInput {...props} />

5. 逻辑与（&&）、三元表达式与空值合并（??）

JSX 的大括号 {} 内只允许书写JavaScript 表达式，不能包含 if-else 或 for 语句。因此条件渲染完全依赖逻辑运算符：

// 1. 三元运算符：二选一渲染
{isLoggedIn ? <Dashboard /> : <LoginForm />}

// 2. 逻辑与短路渲染：有条件显示
{unreadCount > 0 && <Badge count={unreadCount} />}

// 3. 空值合并与可选链：安全防御后端返回的 null 或 undefined
const nickname = user?.profile?.nickname ?? "匿名用户";

6. ES Modules 模块化（import / export）

现代 React 项目完全建立在模块化体系上。必须区分默认导出（export default）与具名导出（export）：

// 默认导出只能有一个，导入时可以自定义命名
import React from "react";

// 具名导出可以有多个，导入时需保持同名大括号或使用 as 重命名
import { useState, useEffect as useMountEffect } from "react";

三、决定 JSX 表达能力的数组高阶变换

在传统前端开发中，遍历数据往往习惯使用 for 循环或 forEach。但在 React 中，map 和 filter 是绝对的主角。

原因在于：forEach 和传统循环只执行动作，返回值为 undefined，无法在 JSX 模板中直接求值并吐出新的 UI 节点；而 map 能够将一个普通数据数组一对一映射为包含虚拟 DOM 的新数组：

// 正确范式：使用 map 转换数据为 JSX 列表元素
const products = [
  { id: 101, name: "键盘", price: 299 },
  { id: 102, name: "鼠标", price: 99 },
];

function ProductList() {
  return (
    <ul>
      {products.map(item => (
        <li key={item.id}>
          {item.name} - ¥{item.price}
        </li>
      ))}
    </ul>
  );
}

除了 map 之外，过滤列表使用 filter，聚合数值使用 reduce，条件判定使用 some 或 every。在学 React 前，务必训练自己“不写 for 循环也能完成任意数据清洗与转换”的编码习惯。

四、关键认知跨越：不可变数据与闭包思维

如果说语法只是工具，那么“不可变性（Immutability）”和“闭包（Closure）”就是理解 React 运行时生命周期的两把金钥匙。

1. 为什么 React 强制要求不可变更新？

在 JavaScript 中，基本类型（Number、String、Boolean）按值比较，而复杂类型（Object、Array）按内存引用地址进行比较。

React 组件在决定“数据变了没有、需不需要重新执行渲染函数”时，出于极致性能考量，采用的是 Object.is(prevState, nextState) 浅比较（Shallow Comparison）。如果使用 array.push() 或 obj.name = "new"，虽然内部内容变了，但对象在堆内存中的地址并没有变。React 浅比较判定新旧地址完全相同，就会判定数据未发生改变，从而跳过重新渲染，导致页面毫无反应。

因此，在 React 中修改状态，必须像对待“只读常数”一样对待现有数据，通过展开运算符或纯函数生成一个带有全新引用地址的新对象/新数组。

2. 词法作用域与闭包陷阱（Stale Closure）

函数组件每次重新渲染，都是一次新的函数调用。而在函数内部定义的事件监听器、定时器或 useEffect 回调函数，会捕获当次渲染闭包内的局部变量快照。

如果对闭包缺乏理解，初学者在写类似定时器、异步请求时，很容易疑惑“为什么我的定时器取出来的永远是旧的值”。理解“函数能够访问其声明时所在的词法作用域并维持对其引用的记忆”，能让你在接触 React Hooks 的依赖项数组（Dependency Array）时恍然大悟。

3. 异步编程与 Promise / async-await

现代 Web 应用绝大部分都需要调用后端 RESTful 或 GraphQL 接口。在 React 的 useEffect 或事件处理函数中，异步请求是家常便饭：

// 异步标准模式：配合 try-catch 处理请求状态
async function fetchUserDetail(userId) {
  try {
    const response = await fetch(`/api/users/${userId}`);
    if (!response.ok) {
      throw new Error(`HTTP 错误: ${response.status}`);
    }
    const data = await response.json();
    return data;
  } catch (error) {
    console.error("数据加载失败:", error.message);
    throw error;
  }
}

必须清楚 Promise 的三种状态（Pending、Fulfilled、Rejected），以及 await 会暂停当前异步上下文并等待结果的运行机制。

五、现阶段完全可以延后学习的内容

学习要有轻重缓急，把不紧急的内容放在真正需要时再学，能极大地提升学习成就感并缩短起步周期：

六、学前通关自测：你能否写出以下五道代码？

如果你想在动身开始 React 教程前做一次真实摸底，可以尝试在空白编辑器中不看答案独立写出以下五段 JavaScript 逻辑：

1. 对象深层解构与默认值：从 const response = { data: { user: { name: "李雷" } } } 中，一行代码安全解构出 name 和 role（其中 role 缺省默认值为 "普通用户"）。
2. 不可变数组项修改：有一个用户列表 users = [{ id: 1, name: "A", active: false }, { id: 2, name: "B", active: true }]，在不修改原数组的前提下，生成一个把 id === 1 的 active 属性翻转为 true 的全新数组。
3. 声明式数据变换：利用 filter 和 map 链式调用，从员工数组中筛选出所有 salary >= 10000 的员工，并生成只包含他们名字字符串的数组。
4. 三元运算符嵌套与兜底：将一个包含 status（可能为 "loading"、"success"、"error"）的变量，用单行三元表达式转换为对应的提示文本。
5. 异步数据兜底：写一个使用 async/await 的网络请求函数，当接口抛出网络异常时，使用 try-catch 捕获并将错误信息记录下来，安全返回空数组 []。