React超详细学习指南
·
React超详细讲解
一、React介绍
React 是由 Meta 推出的用于构建用户界面的 JavaScript 库。
特点：
- 组件化开发
- 虚拟DOM
- 单向数据流
- Hooks
- JSX语法
- 生态丰富
官方文档：
- React官方：https://react.dev/
- React中文：https://zh-hans.react.dev/
二、React学习前置知识
1.HTML/CSS
需要掌握：
- Flex布局
- Grid布局
- 响应式
- CSS动画
- BEM命名规范
2.JavaScript
重点：
- ES6+
- Promise
- async/await
- 解构
- 闭包
- 原型链
- this
- 模块化
推荐文档：
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript
三、React基础知识
1.创建React项目
使用Vite（推荐）
npm create vite@latest
选择：
React
TypeScript
安装依赖：
npm install
启动：
npm run dev
2.React项目目录
src
├── assets
├── components
├── pages
├── router
├── hooks
├── store
├── api
├── utils
├── styles
├── App.jsx
└── main.jsx
3.JSX语法
const name = "React";
function App() {
return (
<div>
<h1>Hello React</h1>
<p>{name}</p>
</div>
);
}
重点：
- class → className
- for → htmlFor
- JS使用 {}
- 必须有根节点
4.组件
函数组件
function Header() {
return <h1>Header</h1>;
}
使用：
<Header />
5.Props
function User(props) {
return <h1>{props.name}</h1>;
}
<User name="张三" />
解构写法：
function User({ name, age }) {
return (
<div>
{name} - {age}
</div>
);
}
6.useState状态
import { useState } from "react";
function App() {
const [count, setCount] = useState(0);
return (
<button onClick={() => setCount(count + 1)}>
{count}
</button>
);
}
7.事件绑定
<button onClick={handleClick}>
点击
</button>
传参：
<button onClick={() => del(id)}>
删除
</button>
8.条件渲染
{
isLogin ? <Home /> : <Login />;
}
{
show && <Modal />;
}
9.列表渲染
const list = ["Vue", "React"];
{
list.map((item) => (
<li key={item}>{item}</li>
));
}
10.useEffect
useEffect(() => {
console.log("页面加载");
return () => {
console.log("页面卸载");
};
}, []);
用途：
- 请求接口
- 定时器
- DOM操作
- 监听事件
11.表单处理
const [value, setValue] = useState("");
<input
value={value}
onChange={(e) => setValue(e.target.value)}
/>
12.组件通信
父传子
props
子传父
function Child({ onSend }) {
return (
<button onClick={() => onSend("hello")}>
发送
</button>
);
}
跨层通信
Context
const ThemeContext = createContext();
四、React Hooks详解
1.useState
const [state, setState] = useState(initial);
2.useEffect
useEffect(() => {
fetchData();
}, []);
3.useRef
const inputRef = useRef();
<input ref={inputRef} />
4.useMemo
const result = useMemo(() => {
return heavyFn(data);
}, [data]);
5.useCallback
const fn = useCallback(() => {
console.log("缓存函数");
}, []);
6.自定义Hooks
function useTitle(title) {
useEffect(() => {
document.title = title;
}, [title]);
}
五、React Router路由
安装：
npm install react-router-dom
基础：
import {
BrowserRouter,
Routes,
Route
} from "react-router-dom";
六、接口请求
推荐：
Axios
安装：
npm install axios
使用：
axios.get("/api/user")
.then(res => {
console.log(res.data);
});
七、状态管理
1.Context
适合小项目。
2.Redux
大型项目常用。
核心：
- store
- reducer
- action
官方：
https://redux.js.org/
3.Zustand
轻量级状态管理。
八、项目实战方向
1.后台管理系统
重点：
- 权限
- 动态路由
- 表格
- 图表
- 国际化
UI推荐：
- Ant Design
- MUI
2.电商项目
重点：
- 商品列表
- 搜索
- 购物车
- 支付
3.AI项目
适合：
- Chat界面
- Markdown渲染
- SSE
- WebSocket
4.企业官网
推荐：
Next.js
重点：
- SEO
- SSR
- 响应式
- 动画
九、React性能优化
1.memo
export default memo(Component);
2.useMemo
缓存计算。
3.useCallback
缓存函数。
4.懒加载
const Home = lazy(() => import("./Home"));
5.虚拟列表
推荐：
- react-window
- react-virtualized
十、React常用生态
UI库
- Ant Design
- MUI
- shadcn/ui
动画
- Framer Motion
图表
- ECharts
表单
- React Hook Form
十一、React学习路线
第一阶段
学习：
- JSX
- 组件
- Props
- State
项目：
TodoList
第二阶段
学习：
- Hooks
- Router
- Axios
项目：
博客系统
第三阶段
学习：
- Redux
- 权限
- 封装
项目：
后台管理系统
第四阶段
学习：
- Fiber
- React源码
- SSR
- Next.js
项目：
企业级架构
十二、React后续提升方向
1.TypeScript
React + TS 已成主流。
重点：
- 泛型
- interface
- 类型推导
2.Next.js
重点：
- SSR
- SEO
- 服务端组件
3.React Native
React开发App。
4.React源码
重点：
- Fiber
- Hooks原理
- Diff算法
5.工程化
重点：
- Vite
- Webpack
- ESLint
- Prettier
- CI/CD
十三、React面试常考题（附答案）
1.React是什么？
答：
React 是 Meta 推出的用于构建用户界面的 JavaScript 库，核心思想是组件化开发。
2.React为什么快？
答：
原因：
- 虚拟DOM
- Diff算法
- Fiber架构
- 局部更新
3.什么是虚拟DOM？
答：
虚拟DOM本质是JS对象，用于描述真实DOM结构。
React会先对比虚拟DOM差异，再更新真实DOM。
4.React中key有什么作用？
答：
用于提高Diff算法效率。
要求：
- 唯一
- 稳定
不推荐使用index。
5.useEffect和useLayoutEffect区别？
答：
useEffect：
- 异步执行
- 不阻塞页面渲染
useLayoutEffect：
- 同步执行
- DOM更新后立即执行
6.React为什么不能直接修改state？
答：
React依赖状态变化触发更新。
直接修改不会触发重新渲染。
错误：
state.count++;
正确：
setState();
7.React Hooks为什么不能写在if中？
答：
Hooks依赖调用顺序。
放在if中会导致顺序变化。
8.useMemo和useCallback区别？
答：
useMemo：
缓存值。
useCallback：
缓存函数。
9.React组件通信方式有哪些？
答：
- props
- Context
- Redux
- Zustand
- 自定义事件
10.React生命周期有哪些？
答：
类组件：
- componentDidMount
- componentDidUpdate
- componentWillUnmount
函数组件：
- useEffect
11.React Fiber是什么？
答：
React16后的新架构。
特点：
- 可中断渲染
- 优先级调度
- 提升性能
12.React18新特性有哪些？
答：
- 自动批处理
- 并发渲染
- Suspense
- useTransition
13.受控组件和非受控组件区别？
答：
受控组件：
React控制表单数据。
非受控组件：
DOM自身管理数据。
14.React中如何做性能优化？
答：
- memo
- useMemo
- useCallback
- 懒加载
- 虚拟列表
- key优化
15.React中为什么推荐函数组件？
答：
因为：
- Hooks更强大
- 逻辑复用更方便
- 代码更简洁
- 官方推荐
16.React路由模式有哪些？
答：
- BrowserRouter
- HashRouter
17.React中的高阶组件是什么？
答：
高阶组件（HOC）本质是一个函数，接收组件并返回新组件。
18.React中的Portals是什么？
答：
用于把组件渲染到父组件DOM之外。
常用于：
- Modal
- Dialog
- Tooltip
19.React中的受控组件是什么？
答：
由React state控制value的组件。
20.React中的Diff算法原理？
答：
React采用同层比较策略：
- type不同直接替换
- key辅助识别节点
- 减少DOM操作
十四、React学习建议
1.不要只看视频
一定要：
- 自己敲代码
- 自己封装组件
- 自己做项目
2.多做项目
推荐：
- TodoList
- 博客
- AI Chat
- 后台管理系统
- 电商项目
3.深入源码
建议学习：
- Fiber
- Hooks原理
- React调度机制
十五、推荐学习资源
官方文档
React：
React中文：
UI库
Ant Design：
MUI：
状态管理
Redux：
Zustand：
视频平台
B站：
YouTube：
十六、React最终学习目标
最终应该达到：
- 独立开发React项目
- 会Hooks
- 会组件封装
- 会性能优化
- 会状态管理
- 会企业级架构
- 能应对中高级面试
- 能阅读React源码
AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念，把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起，为开发者提供从开发、训练到部署的一站式体验。
更多推荐
9
0- 0
已为社区贡献3条内容
所有评论(0)