完整教程：学习 React 前掌握 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 = () => {
    setCount(count + 1); // 此处能访问count，正是闭包的作用
  };
  return ;
}

4. 回调函数（Callback Functions）

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

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

// 1. 事件处理中的回调函数
function Button() {
  // 回调函数：点击时才执行
  const handleClick = () => {
    console.log("按钮被点击");
  };
  // onClick接收回调函数，不立即执行
  return ;
}
// 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 () => {
    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(() => {
    fetchUserData();
  }, []);
  // 加载状态与数据展示
  return loading ? (
    加载中...
  ) : (
    欢迎，{userData?.user_name || "游客"}
  );
}

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) => (
    
      {user.name}（{user.age}岁）{user.isVip ? "[VIP]" : ""}
    
  ));
  // 2. filter：筛选VIP用户
  const vipUsers = users.filter((user) => user.isVip);
  // 3. reduce：计算用户平均年龄
  const avgAge = users.reduce((sum, user) => sum + user.age, 0) / users.length;
  return (
    
      所有用户
      {userItems}
      VIP用户数：{vipUsers.length}
      平均年龄：{avgAge.toFixed(1)}
    
  );
}

7. 解构（Destructuring）

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

示例：React 中的解构应用

// 1. 解构props（最常用场景）
// 未解构：代码冗长
function Greeting(props) {
  return 你好，{props.name}！年龄：{props.age};
}
// 解构：简洁清晰
function Greeting({ name, age }) {
  return 你好，{name}！年龄：{age};
}
// 2. 解构state
import { useState } from "react";
function Profile() {
  const [user, setUser] = useState({
    name: "张三",
    address: "北京",
    phone: "138****1234",
  });
  // 从user中解构需要的属性
  const { name, address } = user;
  return {name} 住在 {address};
}
// 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，无需逐个写props
  return ;
}
function Child({ name, age, gender }) {
  return {name}，{age}岁，{gender};
}
// 2. 扩展运算符：更新React状态（不可直接修改原状态）
import { useState } from "react";
function Profile() {
  const [profile, setProfile] = useState({
    name: "张三",
    age: 25,
  });
  // 只更新age，保留其他属性（正确写法）
  const updateAge = () => {
    setProfile({ ...profile, age: 26 }); // ...profile复制原有属性
  };
  return (
    
      年龄：{profile.age}
      
    
  );
}
// 3. 剩余运算符（...）：收集多个参数
function sum(...numbers) {
  // numbers是一个数组，包含所有传入的参数
  return numbers.reduce((total, num) => 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 ? (
    欢迎，{user.name}！
  ) : (
    
  );
}
// 注意：空数组[]是真值，需判断长度
function List({ data }) {
  // 错误：data为[]时，if(data)为true，会显示“有数据”
  // if (data) return 有数据;
  // 正确：判断数组长度
  if (data.length > 0) {
    return 有数据：{data.map(item => {item.name}
)};
  }
  return 无数据;
}

10. DOM 与事件（基础）

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

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

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

为什么这些概念如此重要？

理论上，即使不掌握这些概念，你也能 “拼凑” 出一个 React 应用 —— 但代价是：频繁困惑、卡壳，只能从 Stack Overflow（或国内的掘金、CSDN）复制代码，却不懂背后的逻辑。

这些概念是 React 开发的 “地基”：它们不仅帮你写出代码，更能让你理解 “React 为什么要这么设计”（比如 Hooks 依赖闭包、状态不可直接修改）。

posted on 2025-10-13 22:11 slgkaifa 阅读(7) 评论(0) 收藏举报

刷新页面返回顶部

slgkaifa