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
模块化

三、React基础知识

1.创建React项目

使用Vite（推荐）

bash 复制代码

npm create vite@latest

选择：

bash 复制代码

React
TypeScript

安装依赖：

bash 复制代码

npm install

启动：

bash 复制代码

npm run dev

2.React项目目录

bash 复制代码

src
├── assets
├── components
├── pages
├── router
├── hooks
├── store
├── api
├── utils
├── styles
├── App.jsx
└── main.jsx

3.JSX语法

jsx 复制代码

const name = "React";

function App() {
  return (
    <div>
      <h1>Hello React</h1>
      <p>{name}</p>
    </div>
  );
}

重点：

class → className
for → htmlFor
JS使用 {}
必须有根节点

4.组件

函数组件

jsx 复制代码

function Header() {
  return <h1>Header</h1>;
}

使用：

jsx 复制代码

<Header />

5.Props

jsx 复制代码

function User(props) {
  return <h1>{props.name}</h1>;
}

<User name="张三" />

解构写法：

jsx 复制代码

function User({ name, age }) {
  return (
    <div>
      {name} - {age}
    </div>
  );
}

6.useState状态

jsx 复制代码

import { useState } from "react";

function App() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      {count}
    </button>
  );
}

7.事件绑定

jsx 复制代码

<button onClick={handleClick}>
  点击
</button>

传参：

jsx 复制代码

<button onClick={() => del(id)}>
  删除
</button>

8.条件渲染

jsx 复制代码

{
  isLogin ? <Home /> : <Login />;
}

jsx 复制代码

{
  show && <Modal />;
}

9.列表渲染

jsx 复制代码

const list = ["Vue", "React"];

{
  list.map((item) => (
    <li key={item}>{item}</li>
  ));
}

10.useEffect

jsx 复制代码

useEffect(() => {
  console.log("页面加载");

  return () => {
    console.log("页面卸载");
  };
}, []);

用途：

请求接口
定时器
DOM操作
监听事件

11.表单处理

jsx 复制代码

const [value, setValue] = useState("");

<input
  value={value}
  onChange={(e) => setValue(e.target.value)}
/>

12.组件通信

父传子

props

子传父

jsx 复制代码

function Child({ onSend }) {
  return (
    <button onClick={() => onSend("hello")}>
      发送
    </button>
  );
}

跨层通信

Context

jsx 复制代码

const ThemeContext = createContext();

四、React Hooks详解

1.useState

jsx 复制代码

const [state, setState] = useState(initial);

2.useEffect

jsx 复制代码

useEffect(() => {
  fetchData();
}, []);

3.useRef

jsx 复制代码

const inputRef = useRef();

<input ref={inputRef} />

4.useMemo

jsx 复制代码

const result = useMemo(() => {
  return heavyFn(data);
}, [data]);

5.useCallback

jsx 复制代码

const fn = useCallback(() => {
  console.log("缓存函数");
}, []);

6.自定义Hooks

jsx 复制代码

function useTitle(title) {
  useEffect(() => {
    document.title = title;
  }, [title]);
}

五、React Router路由

安装：

bash 复制代码

npm install react-router-dom

基础：

jsx 复制代码

import {
  BrowserRouter,
  Routes,
  Route
} from "react-router-dom";

六、接口请求

推荐：

Axios

安装：

bash 复制代码

npm install axios

使用：

jsx 复制代码

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

jsx 复制代码

export default memo(Component);

2.useMemo

缓存计算。

3.useCallback

缓存函数。

4.懒加载

jsx 复制代码

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依赖状态变化触发更新。

直接修改不会触发重新渲染。

错误：

jsx 复制代码

state.count++;

正确：

jsx 复制代码

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：

https://react.dev/

React中文：

https://zh-hans.react.dev/

UI库

Ant Design：

https://ant.design/

MUI：

https://mui.com/

状态管理

Redux：

https://redux.js.org/

Zustand：

https://zustand-demo.pmnd.rs/

视频平台

B站：

https://www.bilibili.com/

YouTube：

https://www.youtube.com/

十六、React最终学习目标

最终应该达到：

独立开发React项目
会Hooks
会组件封装
会性能优化
会状态管理
会企业级架构
能应对中高级面试
能阅读React源码