一、React基础夯实

原创

已于 2025-11-03 23:16:56 修改 · 357 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #前端 #javascript

于 2025-09-27 17:06:45 首次发布

一、学习目标

1.项目搭建

0-1手动搭建，基于webpack（少）
vite脚手架搭建（多）

2.React基础语法

jsx
props
state
条件渲染
生命周期
事件处理

3.组件化设计开发

如何拆分管理React组件，提升项目可维护性和复用性

4.hooks设计基础

通过函数组合方式，进一步将ui视图和状态解耦

5.React生态体系

了解React主流技术栈以及方案选型，包括：样式方案、状态方案、路由方案等

6.React性能优化

代码拆分，懒加载，避免不必要的渲染等等

二、补充资料

Vite 初始化 React：https://vitejs.dev/guide/#scaffolding-your-first-vite-project
Webpack 初始化 React：https://github.com/facebook/create-react-app
React 基础架构社区方案：https://github.com/kriasoft/react-starter-kit
React 中文官网：https://zh-hans.react.dev/
React Hooks 套件：https://github.com/streamich/react-use

三、面试真题

1、React18有哪些更新？

React19版本已经更新，但是和React18的更新不明显，主要有1.服务端渲染；2.表单操作优化；

React18的更新：

2、React组件异常如何捕获？

错误边界

3、生命周期

四、React简介

React是由Facebook开发并开源的一个用于构建用户界面的JavaScript库。

它主要用于构建单页应用（SPA）。

核心理念是组件化和声明式编程。

所有视图层的更新不是操作dom，而是驱动数据更新的，状态的变化会引起视图的更新。

ui = render(state)

ui = f(state)

ui component + state hook

1.核心特点

声明式通过定义jsx语法实现
组件化
虚拟DOM（virtual DOM）设计之初是为了解决DOM频繁操作引发的性能问题，随着前端业务场景的复杂化程度加深，类似于飞书文档的复杂文档项目，虚拟DOM本身的建立和整个diff过程在内存中的开销变得巨大，反而会带来一些副作用，现在很多极端的性能优化场景会强调抛弃掉虚拟DOM。vite理念bundless，少打包，只打包浏览器不能解析的内容。
单向数据流
JSX语法 javascript + Html

2.核心概念

组件化设计：类组件（抛弃），函数组件（广泛运用）
状态state：内部数据储存，决定视图更新
属性props：外部数据，不可以修改

3.主要生态系统

态度：举一反三，横向对比

路由React Router
状态管理Redux -> zustand
脚手架CRA（Craete-React-App）-> vite react cli

五、React项目初始化

脚手架方案

手动搭建

使用vite

1.创建项目目录并初始化

mkdir basic
cd basic
初始化项目产出package.json文件
npm init -y

2.在package.json中新增开发环境和生产环境需要的依赖并且定义启动命令

devDependencies中指定react、react-dom的版本，

dependencies中指定vite的版本，

scripts定义启动命令

{
  "name": "1.basic",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "dependencies": {
    "react": "19.1.1",
    "react-dom": "19.1.1"
  },
  "devDependencies": {
    "vite": "7.1.3"
  }
}

3.新增入口文件src/main.js和index.html文件

src/main.jsx

console.log('hello, world');

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=devic

最低0.47元/天解锁文章