尝试无数次终于用上了react 基础知识篇

stpzhf

372人浏览 · 2026-04-27 11:35:55

stpzhf · 2026-04-27 11:35:55 发布

一、React 零基础入门：从准备到上手，一步到位
很多新手误以为学 React 要先掌握很多复杂知识，其实不然。先搞定「环境准备 + 核心基础」，就能写出第一个 React 组件，剩下的都是慢慢积累和优化。

先搞懂：什么是 React？（不用死记，理解就好）
React 不是一门新语言，而是一个用于构建「用户界面」的 JavaScript 库，就像我们常用的 jQuery 一样，本质是帮我们更高效地写前端页面。
它的核心优势就两个，记住就够了：

组件化：把复杂的页面拆成一个个独立、可复用的小模块（比如按钮、导航栏、卡片），写一次能反复用，后续维护也方便。
数据驱动视图：只要修改数据，页面就会自动更新，不用手动操作 DOM（比如以前用 jQuery 改内容，现在不用了），大大减少代码量。

开发前准备：只装两个东西，简单不复杂
入门阶段，不用装太多工具，搞定这两个就够了，全程下一步操作，小白也能搞定：
Node.js：自带 npm 包管理工具，后续创建 React 项目、安装依赖都靠它。直接去 Node.js 官网下载，选择 LTS 版本（稳定版），安装时一路下一步即可。
代码编辑器：推荐 VS Code，轻量、免费，还能安装 React 相关插件（比如 ES7+ React Snippets，能快速生成 React 代码片段，提高开发效率）。
快速创建第一个 React 项目（一行命令搞定）
环境准备好后，不用手动配置任何东西，终端输入一行命令，就能自动生成一个可运行的 React 项目，步骤如下：
打开 VS Code 的终端（顶部菜单栏：终端 → 新建终端）；
输入命令创建项目（my-react-app 是项目名，可自定义）：
npx create-react-app my-react-app
等待项目创建完成（大概1-3分钟，取决于网络）；
进入项目目录，启动项目：
cd my-react-app
npm start
启动成功后，浏览器会自动打开http://localhost:3000，看到一个 React 官方默认页面，就说明项目创建成功了！
React 核心基础语法（必学，新手优先掌握这些）
React 最核心的就是「函数组件 + JSX + Hooks」，这是现在 React 开发的主流写法，也是新手必须先掌握的内容，其他复杂概念可以后续慢慢学。
（1）函数组件：最简单的组件写法
组件就是一个 JavaScript 函数，返回一段页面结构（JSX 语法），这是 React 中最推荐的组件写法，简洁高效。
// src/components/Hello.jsx
// 一个最简单的 React 组件
function Hello() {
// 返回的就是页面要渲染的内容（JSX 语法）
return
你好，React！零基础也能轻松上手～
;
}

// 导出组件，供其他页面引入使用
export default Hello;
然后在 App.jsx 中引入这个组件，就能在页面上看到对应的内容了：
// src/App.jsx
import Hello from ‘./components/Hello’;

function App() {
return (

{/* 引入并使用 Hello 组件 */}

);
}

export default App;
（2）JSX 语法：在 JS 里写 HTML（重点注意3点）
JSX 是 React 特有的语法，允许我们在 JavaScript 代码中直接写 HTML 标签，不用拼接字符串，非常方便，但有3个注意点，新手很容易踩错：

所有标签必须闭合：比如要写成，
要写成
，否则会报错；
样式类名用 className 代替 class：HTML 里的 class，在 JSX 里要写成 className（因为 class 是 JavaScript 的关键字）；
嵌入 JavaScript 变量/表达式：用 { } 包裹，比如要显示一个变量，就写 {变量名}。
// 正确的 JSX 写法示例
function Demo() {
const name = “React 新手”;
const isShow = true;
return (
{/* 用 className */}
我是 {name}，正在学习 JSX
{/* { } 嵌入变量 */} {/* 标签闭合 */} {/* 条件渲染：isShow 为 true 才显示 */} {isShow &&
条件渲染生效啦～
}
);

}
（3）useState：管理组件状态（最常用的 Hook）
状态就是组件里的数据（比如计数、输入框内容、列表数据），useState 就是用来存储和修改这些数据的，只要数据变了，页面就会自动更新，不用手动操作 DOM。
用法很简单，记住固定格式：[状态值, 修改状态的方法] = useState(初始值)
// 计数器示例：点击按钮，计数+1
import { useState } from ‘react’; // 先引入 useState

function Counter() {
// 定义状态：count 是状态值（初始值0），setCount 是修改状态的方法
const [count, setCount] = useState(0);

return (

当前计数：{count}

{/* 点击按钮，调用 setCount 修改状态 */}
<button onClick={() => setCount(count + 1)}>+1

);
}
重点提醒：不能直接修改状态值（比如 count = count + 1 是错误的），必须通过 setCount 方法修改，否则页面不会更新！
（4）useEffect：处理副作用（请求接口、定时器等）
副作用就是组件中除了渲染页面之外的操作（比如请求接口、设置定时器、监听事件），这些操作都要放在 useEffect 里，避免影响组件渲染。
最常用的场景：页面加载时请求接口，获取数据并渲染。
import { useEffect, useState } from ‘react’;

function ProductList() {
// 定义状态，存储商品列表数据
const [list, setList] = useState([]);

// useEffect 接收两个参数：回调函数、依赖数组
useEffect(() => {
// 模拟请求接口（真实开发中替换成自己的接口地址）
fetch(“https://api.example.com/products”)
.then(res => res.json()) // 解析接口返回的数据
.then(data => setList(data)); // 把数据存入状态

// 清理函数：组件销毁时执行（比如清除定时器、取消接口请求）
return () => {
  console.log("组件卸载了，清理副作用");
};

}, []); // 依赖数组：空数组 = 只在组件挂载时执行一次

// 渲染商品列表
return (

{list.map(item => (

商品名称：{item.name}

商品价格：{item.price} 元

))}

);
}
（5）组件传值：父组件给子组件传数据（props）
组件之间不是孤立的，经常需要传递数据，最基础的就是「父传子」，用 props 实现，步骤很简单：
// 子组件：接收父组件传递的数据
function Child(props) {
// 通过 props 获取父组件传递的 msg 和 age
return (

父组件传给我的消息：{props.msg}

父组件传给我的年龄：{props.age}

);
}

// 父组件：传递数据给子组件
function Parent() {
const msg = “欢迎学习 React 组件传值”;
const age = 18;

// 像 HTML 标签传属性一样，把数据传给子组件
return ;
}
二、React 开发日常坑点：新手 90% 都会踩，记住就能避坑
入门之后，写代码时总会遇到各种报错，很多时候不是你学得不好，而是踩了 React 的“坑”。下面这些是我日常开发中最常遇到的坑，每一个都附了错误写法和正确写法，记下来，能节省你大量调试时间。
坑 1：直接修改 state，页面不更新（最常见的坑）
新手最容易犯的错误：以为直接修改 state 的值，页面就会更新，结果发现无论怎么改，页面都没反应。
// ❌ 错误写法：直接修改 state
const [user, setUser] = useState({ name: “张三” });
user.name = “李四”; // 直接修改，页面不更新！

// ✅ 正确写法：用 set 方法，创建新对象/数组
setUser({ …user, name: “李四” }); // 展开原对象，修改需要改的属性
核心原因：React 会通过比较 state 的“引用”是否变化来判断是否重新渲染组件，直接修改原 state，引用没变，所以页面不更新。必须通过 set 方法，创建一个新的对象/数组，修改引用，页面才会更新。
坑 2：useEffect 依赖数组写错，导致无限请求 / 逻辑不执行
useEffect 的依赖数组是新手的重灾区，要么漏写依赖，要么多写依赖，导致逻辑异常。
// ❌ 错误写法1：漏写依赖，keyword 变化时不重新请求
const [keyword, setKeyword] = useState(“”);

useEffect(() => {
// 希望 keyword 变化时，重新请求数据
fetchData(keyword);
}, []); // 空依赖，只有组件挂载时执行一次，keyword 变了也不执行

// ❌ 错误写法2：多写依赖，导致无限循环
useEffect(() => {
fetchData(keyword);
setKeyword(“”); // 修改了依赖中的 keyword，导致 useEffect 重新执行，无限循环
}, [keyword]);

// ✅ 正确写法：只放用到的依赖，不修改依赖中的值
useEffect(() => {
fetchData(keyword);
}, [keyword]); // 只有 keyword 变化时，才重新执行
坑 3：循环列表没写 key，控制台报错
用 map 渲染列表时，必须给每一项加一个唯一的 key，否则控制台会报错，而且会影响列表的性能和渲染正确性。
// ❌ 错误写法：没有 key
list.map(item => (

{item.name}

))

// ✅ 正确写法：加唯一 key（优先用后端返回的 id）
list.map(item => (

{item.name}

)) 注意：key 必须是唯一的，不能用 index（索引）当 key（如果列表有新增、删除操作，index 会变化，导致组件重新渲染，影响性能）。坑 4：事件绑定写成函数调用，页面一加载就执行新手很容易把事件绑定写成函数调用，导致页面一加载，函数就执行了，点击按钮反而没反应。 // ❌ 错误写法：直接调用函数，页面一加载就执行点击请求数据

// ✅ 正确写法：包一层箭头函数，点击时才执行
<button onClick={() => fetchData()}>点击请求数据

// 如果不需要传参，也可以直接写函数名（不加括号）
点击请求数据
坑 5：样式不生效 / 类名写错
React 中写样式，有两个容易踩错的点，尤其是刚从 HTML 转过来的新手：
// ❌ 错误写法：用 class 定义样式类名，行内样式写字符串

标题

// ✅ 正确写法：用 className 定义类名，行内样式写对象格式

const handleClick = () => {
setCount(count + 1);
// 异步操作：setTimeout 里拿不到最新的 count
setTimeout(() => {
console.log(count); // 输出的是修改前的值（0），不是 1
}, 1000);
};

// ✅ 解决方案1：用 useRef 存储最新值
import { useRef } from ‘react’;

const countRef = useRef(0);
const handleClick = () => {
countRef.current += 1;
setCount(countRef.current);
setTimeout(() => {
console.log(countRef.current); // 输出最新值
}, 1000);
};

// ✅ 解决方案2：用 setCount 的函数形式
const handleClick = () => {
setCount(prev => prev + 1); // prev 是最新的 state 值
setTimeout(() => {
setCount(prev => {
console.log(prev); // 输出最新值
return prev;
});
}, 1000);
};
坑 7：项目启动报错：依赖冲突 / 端口被占用
新手启动项目时，经常会遇到两个报错，解决方案很简单，记下来就能快速解决：

端口被占用：报错提示“Port 3000 is already in use”，要么关闭占用 3000 端口的程序（比如其他启动的 React 项目），要么修改项目端口；
依赖冲突：报错提示“dependency tree”相关内容，删除项目根目录下的 node_modules 和 package-lock.json 文件，然后重新执行 npm install，再启动项目即可。
三、React 新手学习路线（简单高效，不绕弯）
很多新手学 React 会陷入“越学越乱”的困境，其实不用一上来就学所有内容，按这个路线来，循序渐进，效率最高：

基础阶段：搞定函数组件 + JSX 语法（掌握前面讲的注意点）；
核心阶段：掌握 useState、useEffect 两个最常用的 Hook，能实现简单的交互（比如计数器、表单输入）；
进阶阶段：学会组件传值（props）、列表渲染、条件渲染，能开发简单的页面（比如商品列表、登录页）；
实战阶段：学会用 fetch 或 axios 发起接口请求，对接后端数据；
拓展阶段：学习 React Router（页面跳转）、状态管理（Context / Redux，大型项目需要）。
重点提醒：新手不用一开始就学 Redux、自定义 Hook 等复杂内容，先把基础打牢，多写实战案例，慢慢就能上手。
四、总结
React 入门其实不难，核心就是「组件化 + 数据驱动视图」，最常用的就是函数组件、JSX、useState 和 useEffect。而日常开发中的坑，大多是因为忽略了 React 的基础规则（比如不能直接修改 state、useEffect 依赖要写对）。
这篇文章涵盖了新手入门最需要掌握的所有内容，以及最常踩的坑，建议收藏起来，学习和开发时随时查看。刚开始写代码报错很正常，不用慌，对照着避坑指南排查，多练几次，就能慢慢熟练。
最后，祝所有 React 新手都能少走弯路，快速上手，在前端开发的路上稳步成长～