学习 React 前，你必须掌握的 10 个 JavaScript 核心概念

news/2025/9/24 14:50:59/文章来源:https://www.cnblogs.com/powertoolsteam/p/19109219

学习 React 前，你必须掌握的 10 个 JavaScript 核心概念

如果你正计划入门 React.js，先稍等一下 —— 问问自己：“我的 JavaScript 基础真的扎实吗？”

React 并非写过几行 JS 就能直接上手的框架。它要求你清楚 JavaScript 的底层工作原理，尤其是那些看似简单、却支撑着整个 React 生态的核心概念。

下面就为大家详细拆解，每个 React 开发者在写出第一个 JSX 之前，必须掌握的 10 个 JavaScript 核心概念。

🔹 1. let、const 与 var

在 React 中，你会频繁声明变量。但如果使用不当，很容易引发难以排查的 bug。理解这三者的作用域规则、重声明限制以及暂时性死区，能帮你节省大量调试时间。

示例：三者的区别与应用场景

// var：函数级/全局作用域，存在变量提升，可重复声明
console.log(name); // 输出 undefined（变量提升但未赋值）
var name = "张三";
function testVar() {var name = "李四"; // 函数内重声明，不影响外部console.log(name); // 输出 李四
}
testVar();
console.log(name); // 输出 张三
// let：块级作用域，无变量提升，存在暂时性死区，不可重复声明
console.log(age); // 报错（暂时性死区，无法访问未初始化的let变量）
let age = 25;
if (true) {let age = 30; // 块内声明，不影响外部console.log(age); // 输出 30
}
console.log(age); // 输出 25
// const：块级作用域，必须初始化，不可重新赋值（引用类型内部可修改）
const PI = 3.14159;
PI = 3.14; // 报错（常量不可重新赋值）
const user = { name: "王五" };
user.name = "赵六"; // 可行（引用类型内部属性可修改）
console.log(user.name); // 输出 赵六

🔹 2. 变量提升（Hoisting）

React 组件本质就是 JavaScript 函数。但如果不理解变量提升，你常会遇到 “变量还没使用就报错” 的困惑 —— 这其实是提升机制在背后起作用。

示例：变量提升的表现与注意点

// 函数声明会整体提升，可在声明前调用
sayHello(); // 输出 Hello!
function sayHello() {console.log("Hello!");
}
// var声明的变量仅提升“声明”，不提升“赋值”
console.log(num); // 输出 undefined（声明提升，赋值未提升）
var num = 10;
console.log(num); // 输出 10
// let/const 无变量提升，存在暂时性死区
console.log(str); // 报错（无法访问未初始化的let变量）
let str = "test";

🔹 3. 闭包（Closures）

闭包不只是面试题考点 —— 它是 React Hooks（尤其是useState、useEffect）和事件处理的核心动力。没有闭包，React 的状态保存与行为逻辑几乎无法实现。

示例：闭包在 React 中的实际应用

// 闭包基础：内部函数访问外部函数变量，变量不会被销毁
function createCounter() {let count = 0; // 外部函数变量，被内部函数引用return function () {count++;return count;};
}
const counter = createCounter();
console.log(counter()); // 输出 1
console.log(counter()); // 输出 2（count状态被保留）
// React中闭包的典型场景：useState依赖闭包保存状态
import { useState } from "react";
function CounterComponent() {const [count, setCount] = useState(0);// 事件处理函数通过闭包访问count状态const handleIncrement = () =&gt; {setCount(count + 1); // 此处能访问count，正是闭包的作用};return <button onclick="{handleIncrement}">计数：{count}</button>;
}

🔹 4. 回调函数（Callback Functions）

React 严重依赖回调函数 —— 从事件处理（onClick）到副作用管理（useEffect）都离不开它。掌握 “如何传递函数”“如何延迟执行” 以及 “如何避免回调地狱”，是 React 开发的基础。

示例：React 中的回调函数与优化

// 1. 事件处理中的回调函数
function Button() {// 回调函数：点击时才执行const handleClick = () =&gt; {console.log("按钮被点击");};// onClick接收回调函数，不立即执行return <button onclick="{handleClick}">点击我</button>;
}
// 2. 避免回调地狱：用async/await优化异步请求
async function getUserOrders() {try {// 第一步：获取用户信息const userRes = await fetch("/api/user");const user = await userRes.json();// 第二步：获取用户订单（无需嵌套）const ordersRes = await fetch(`/api/user/${user.id}/orders`);const orders = await ordersRes.json();console.log("用户订单：", orders);} catch (error) {console.error("请求失败：", error);}
}

🔹 5. Promise 与 Async/Await

在 React 中，调用 API 获取数据是日常操作（如用fetch或国内常用的axios）。掌握 Promise 与 async/await，能让你写出不阻塞浏览器的异步代码，避免页面 “卡死”。

示例：结合 axios 的异步数据请求（国内常用场景）

import { useState, useEffect } from "react";
import axios from "axios"; // 国内常用的HTTP库
function DataComponent() {const [userData, setUserData] = useState(null);const [loading, setLoading] = useState(false);// 用async/await封装异步请求const fetchUserData = async () =&gt; {setLoading(true);try {// 示例：请求掘金用户接口（需处理跨域，实际项目需后端代理）const res = await axios.get("https://api.juejin.cn/user_api/v1/user/get");setUserData(res.data.data); // 赋值返回的用户数据} catch (error) {console.error("数据获取失败：", error);} finally {setLoading(false); // 无论成功失败，都结束加载状态}};// 组件挂载时执行请求useEffect(() =&gt; {fetchUserData();}, []);// 加载状态与数据展示return loading ? (<div>加载中...</div>) : (<div>欢迎，{userData?.user_name || "游客"}</div>);
}

🔹 6. 数组方法（map、filter、reduce）

React 开发围绕数组展开：用map渲染列表、用filter筛选数据、用reduce统计信息 —— 这些方法能让你的 UI 逻辑更简洁高效。

示例：React 中数组方法的高频用法

import { useState } from "react";
function UserList() {const [users, setUsers] = useState([{ id: 1, name: "张三", age: 16, isVip: false },{ id: 2, name: "李四", age: 20, isVip: true },{ id: 3, name: "王五", age: 22, isVip: true },]);// 1. map：渲染列表（React必用，需加key）const userItems = users.map((user) =&gt; (<li key="{user.id}">{user.name}（{user.age}岁）{user.isVip ? "[VIP]" : ""}</li>));// 2. filter：筛选VIP用户const vipUsers = users.filter((user) =&gt; user.isVip);// 3. reduce：计算用户平均年龄const avgAge = users.reduce((sum, user) =&gt; sum + user.age, 0) / users.length;return (<div><h3>所有用户</h3><ul>{userItems}</ul><p>VIP用户数：{vipUsers.length}</p><p>平均年龄：{avgAge.toFixed(1)}</p></div>);
}

🔹 7. 解构（Destructuring）

在 React 中，从props或state中提取值时，解构能让代码更简洁易读 —— 尤其在函数组件中，几乎是 “标配” 写法。

示例：React 中的解构应用

// 1. 解构props（最常用场景）
// 未解构：代码冗长
function Greeting(props) {return <h1>你好，{props.name}！年龄：{props.age}</h1>;
}
// 解构：简洁清晰
function Greeting({ name, age }) {return <h1>你好，{name}！年龄：{age}</h1>;
}
// 2. 解构state
import { useState } from "react";
function Profile() {const [user, setUser] = useState({name: "张三",address: "北京",phone: "138****1234",});// 从user中解构需要的属性const { name, address } = user;return <div>{name} 住在 {address}</div>;
}
// 3. 数组解构（配合useState）
const [count, setCount] = useState(0); // 解构useState返回的数组

🔹 8. 扩展与剩余运算符（Spread & Rest Operators）

这两个运算符在 React 中高频出现：处理props传递、更新状态、合并对象等场景都能用到，极大简化了数据操作逻辑。

示例：React 中的运算符应用

// 1. 扩展运算符（...）：传递所有props
function Parent() {const user = { name: "张三", age: 25, gender: "男" };// 用...将user的所有属性传递给Child，无需逐个写propsreturn <child {...user} />;
}
function Child({ name, age, gender }) {return <div>{name}，{age}岁，{gender}</div>;
}
// 2. 扩展运算符：更新React状态（不可直接修改原状态）
import { useState } from "react";
function Profile() {const [profile, setProfile] = useState({name: "张三",age: 25,});// 只更新age，保留其他属性（正确写法）const updateAge = () =&gt; {setProfile({ ...profile, age: 26 }); // ...profile复制原有属性};return (<div><p>年龄：{profile.age}</p><button onclick="{updateAge}">增加年龄</button></div>);
}
// 3. 剩余运算符（...）：收集多个参数
function sum(...numbers) {// numbers是一个数组，包含所有传入的参数return numbers.reduce((total, num) =&gt; total + num, 0);
}
console.log(sum(1, 2, 3)); // 输出 6

🔹 9. 真值与假值（Truthy and Falsy Values）

React 的条件渲染完全依赖 JavaScript 的真值 / 假值判断。理解 “哪些值被视为 true，哪些被视为 false”，能帮你避免 UI 渲染异常（如空数组显示 “有数据”）。

示例：条件渲染中的真值 / 假值应用

// JavaScript中的假值（仅6个）：false、0、""、null、undefined、NaN
// 其他值均为真值（包括 "0"、{}、[]、true 等）
import { useState } from "react";
function LoginStatus() {const [user, setUser] = useState(null); // 未登录时为null（假值）// 条件1：用户登录（user为真值）显示欢迎语// 条件2：用户未登录（user为假值）显示登录按钮return user ? (<div>欢迎，{user.name}！</div>) : (<button onclick="{()" => setUser({ name: "张三" })}&gt;登录</button>);
}
// 注意：空数组[]是真值，需判断长度
function List({ data }) {// 错误：data为[]时，if(data)为true，会显示“有数据”// if (data) return <div>有数据</div>;// 正确：判断数组长度if (data.length &gt; 0) {return <div>有数据：{data.map(item =&gt; <p key="{item.id}">{item.name}</p>)}</div>;}return <div>无数据</div>;
}

🔹 10. DOM 与事件（基础）

React 虽然封装了 DOM（虚拟 DOM），但仍需与原生 DOM 交互。理解基础的 DOM 操作和原生事件，能帮你搞懂 React 合成事件的底层逻辑，避免 “事件绑定失效” 等问题。

示例：原生 DOM 与 React 合成事件对比

// 1. 原生DOM操作（理解原理）
// HTML：<button id="nativeBtn">原生按钮</button>
const nativeBtn = document.getElementById("nativeBtn");
nativeBtn.addEventListener("click", () =&gt; {console.log("原生按钮被点击");
});
// 2. React合成事件（开发常用）
import { useState } from "react";
function ReactButton() {const [count, setCount] = useState(0);// React合成事件：onClick（驼峰命名，区别于原生onclick）const handleClick = (e) =&gt; {setCount(count + 1);// e是React合成事件对象，可通过e.nativeEvent获取原生事件console.log("原生事件对象：", e.nativeEvent);};// React自动管理事件解绑，无需手动移除return <button onclick="{handleClick}">点击次数：{count}</button>;
}
// 3. 阻止默认行为（如表单提交）
function Form() {const handleSubmit = (e) =&gt; {// 阻止表单默认提交（原生与React写法一致）e.preventDefault();console.log("表单已处理，不刷新页面");};return (<form onSubmit="{handleSubmit}"><button type="submit">提交表单</button></form>);
}