React篇——第一章 React的基础知识(上篇)

目录1. React简介1.1 什么是React1.2 React的核心优势组件化开发虚拟DOM丰富的生态系统跨平台支持1.3 React的市场地位2. 开发环境搭建2.1 使用create-react-app创建项目2.2 其他创建React项目的方式3. JSX基础3.1 什么是JSX3.2 JSX的优势3.3 JSX的本质3.4 JSX高频使用场景3.4.1 嵌入JavaScript表达式3.4.2 列表渲染3.4.3 条件渲染3.4.4 复杂条件渲染4. React事件处理4.1 基础事件绑定4.2 事件对象4.3 传递自定义参数4.4 同时传递事件对象和自定义参数5. React组件5.1 组件的概念5.2 函数组件5.3 组件的嵌套6. 状态管理useState6.1 什么是状态6.2 useState Hook6.3 状态更新的规则6.4 复杂状态的管理7. 样式处理7.1 行内样式7.2 类名样式7.3 CSS模块7.4 CSS-in-JS8. 实战案例评论列表8.1 功能需求8.2 实现思路8.3 完整代码9. 总结与展望9.1 核心知识点回顾9.2 进阶学习方向React是由Meta开发的JavaScript库用于构建Web和原生交互界面。其核心优势包括组件化开发、虚拟DOM技术提升性能、丰富的生态系统和跨平台支持。开发环境可通过create-react-app快速搭建JSX语法结合JavaScript表达式实现动态UI渲染。React提供useState管理组件状态支持多种样式处理方案并通过实战案例展示评论列表功能实现。学习路径涵盖路由管理、状态管理、性能优化等进阶内容为开发者提供强大的前端开发工具。1. React简介1.1 什么是ReactReact是由Meta原Facebook公司开发的一个用于构建Web和原生交互界面的JavaScript库。它通过组件化的方式让开发者能够高效地构建复杂的用户界面。1.2 React的核心优势组件化开发React采用组件化的开发方式将UI拆分为独立、可复用的组件每个组件都包含自己的逻辑和视图使得代码结构清晰易于维护。虚拟DOMReact通过虚拟DOM技术减少了直接操作真实DOM的次数从而提高了应用的性能。当组件状态发生变化时React会先在虚拟DOM中进行计算和比较然后只更新必要的部分而不是整个页面。丰富的生态系统React拥有庞大的生态系统包括各种第三方库和工具如React Router路由、Redux状态管理、Material-UIUI组件库等这些工具可以帮助开发者更高效地构建应用。跨平台支持React不仅可以用于Web开发还可以通过React Native开发移动应用通过React 360开发VR应用实现了一次编写多处运行的目标。1.3 React的市场地位React是目前全球最流行的前端框架之一被众多大型企业和互联网公司广泛采用如Meta、Netflix、Airbnb、Uber等。掌握React已经成为前端开发者的必备技能之一。2. 开发环境搭建2.1 使用create-react-app创建项目create-react-app是React官方推荐的快速创建React开发环境的工具它底层由Webpack构建封装了配置细节开箱即用。执行命令npx create-react-app react-basic(React项目名)npxNode.js工具命令查找并执行后续的包命令create-react-app核心包固定写法用于创建React项目react-basicReact项目的名称可以自定义2.2 其他创建React项目的方式除了create-react-app还有其他创建React项目的方式如Vite一个现代化的前端构建工具速度更快Next.js一个基于React的全栈框架支持服务器端渲染Remix一个基于React的全栈框架专注于Web标准和性能3. JSX基础3.1 什么是JSXJSX是JavaScript和XMLHTML的缩写表示在JS代码中编写HTML模板结构它是React中构建UI的方式。const message Hello, React! ​ function App(){ return ( div h1Welcome to React/h1 p{message}/p /div ) }3.2 JSX的优势声明式语法使用类似于HTML的语法使代码更直观、易读JavaScript的能力可以在JSX中使用JavaScript表达式实现动态内容类型安全结合TypeScript使用时可以获得类型检查的好处3.3 JSX的本质JSX并不是标准的JavaScript语法它是JavaScript的语法扩展浏览器本身不能识别需要通过Babel等工具编译成标准的JavaScript代码后才能在浏览器中运行。3.4 JSX高频使用场景3.4.1 嵌入JavaScript表达式在JSX中可以通过大括号语法{}嵌入JavaScript表达式如变量、函数调用、方法调用等。const name John const age 25 ​ function getGreeting(name) { return Hello, ${name}! } ​ function App() { return ( div h1{getGreeting(name)}/h1 pAge: {age}/p pDouble age: {age * 2}/p /div ) }3.4.2 列表渲染在JSX中可以使用JavaScript的map方法实现列表渲染。const fruits [ { id: 1, name: Apple }, { id: 2, name: Banana }, { id: 3, name: Orange } ] ​ function App() { return ( ul {fruits.map(fruit ( li key{fruit.id}{fruit.name}/li ))} /ul ) }注意使用map方法渲染列表时必须为每个元素提供一个唯一的key属性以便React能够高效地识别和更新元素。3.4.3 条件渲染在React中可以通过逻辑与运算符、三元表达式?:等实现条件渲染。const isLoggedIn true const loading false ​ function App() { return ( div {/* 使用逻辑与运算符 */} {isLoggedIn pWelcome back!/p} {/* 使用三元表达式 */} {loading ? pLoading.../p : pContent loaded successfully!/p} /div ) }3.4.4 复杂条件渲染对于复杂的条件渲染可以使用自定义函数或变量来组织逻辑。const userRole admin // admin, user, guest ​ function renderUserInterface(role) { switch (role) { case admin: return divAdmin Dashboard/div case user: return divUser Profile/div case guest: return divWelcome, Guest!/div default: return divUnknown Role/div } } ​ function App() { return ( div {renderUserInterface(userRole)} /div ) }4. React事件处理4.1 基础事件绑定React中的事件绑定采用驼峰命名法通过on 事件名称的方式绑定事件处理函数。function App() { const handleClick () { console.log(Button clicked!) } return ( button onClick{handleClick}Click me/button ) }4.2 事件对象在事件处理函数中可以通过参数获取事件对象。function App() { const handleClick (e) { e.preventDefault() // 阻止默认行为 console.log(Button clicked!, e) } return ( a href# onClick{handleClick}Click me/a ) }4.3 传递自定义参数如果需要向事件处理函数传递自定义参数可以使用箭头函数。function App() { const handleClick (name) { console.log(Hello, ${name}!) } return ( button onClick{() handleClick(John)}Click me/button ) }4.4 同时传递事件对象和自定义参数如果需要同时传递事件对象和自定义参数可以在箭头函数中显式传递事件对象。function App() { const handleClick (name, e) { e.preventDefault() console.log(Hello, ${name}!, e) } return ( a href# onClick{(e) handleClick(John, e)}Click me/a ) }5. React组件5.1 组件的概念组件是React应用的基本构建块它是一个独立、可复用的UI单元包含自己的逻辑和视图。5.2 函数组件在React中组件可以是一个函数接收props作为参数返回React元素。// 定义组件 function Greeting(props) { return h1Hello, {props.name}!/h1 } ​ // 使用组件 function App() { return ( div Greeting nameJohn / Greeting nameJane / /div ) }5.3 组件的嵌套组件可以相互嵌套形成组件树。function Header() { return headerh1My App/h1/header } ​ function Content() { return mainpWelcome to my app!/p/main } ​ function Footer() { return footerp© 2026 My App/p/footer } ​ function App() { return ( div Header / Content / Footer / /div ) }6. 状态管理useState6.1 什么是状态状态是组件内部的数据它可以随时间变化当状态变化时组件会重新渲染。6.2 useState HookuseState是React提供的一个Hook用于在函数组件中添加状态。import React, { useState } from react ​ function Counter() { // 声明一个状态变量count初始值为0 // setCount是更新count的函数 const [count, setCount] useState(0) return ( div pCount: {count}/p button onClick{() setCount(count 1)}Increment/button button onClick{() setCount(count - 1)}Decrement/button /div ) }6.3 状态更新的规则状态是只读的不要直接修改状态应该使用set函数更新状态更新是异步的React可能会批量处理状态更新状态更新会触发重新渲染当状态更新时组件会重新渲染6.4 复杂状态的管理对于对象和数组等复杂类型的状态应该创建新的对象或数组来更新状态而不是直接修改原有的对象或数组。import React, { useState } from react ​ function UserProfile() { const [user, setUser] useState({ name: John, age: 25, email: johnexample.com }) const updateAge () { // 正确的做法创建新对象 setUser({ ...user, age: user.age 1 }) } return ( div pName: {user.name}/p pAge: {user.age}/p pEmail: {user.email}/p button onClick{updateAge}Increment Age/button /div ) }7. 样式处理7.1 行内样式可以使用style属性直接在JSX中设置样式样式对象的属性采用驼峰命名法。function App() { return ( div style{{ color: red, fontSize: 20px }} This is a red text with 20px font size /div ) }7.2 类名样式可以使用className属性引用CSS类。import ./App.css ​ function App() { return ( div classNamecontainer h1 classNametitleHello, React!/h1 /div ) }7.3 CSS模块CSS模块是一种局部作用域的CSS方案可以避免类名冲突。import styles from ./App.module.css ​ function App() { return ( div className{styles.container} h1 className{styles.title}Hello, React!/h1 /div ) }7.4 CSS-in-JSCSS-in-JS是一种将CSS直接写在JavaScript中的方案如styled-components。import styled from styled-components ​ const Container styled.div padding: 20px; background-color: #f0f0f0; ​ const Title styled.h1 color: blue; font-size: 24px; ​ function App() { return ( Container TitleHello, React!/Title /Container ) }8. 实战案例评论列表8.1 功能需求渲染评论列表支持删除评论实现导航Tab和高亮支持评论排序按热度和时间8.2 实现思路使用useState管理评论列表数据和当前激活的Tab使用map方法渲染评论列表和导航Tab使用filter方法实现删除评论功能使用orderBy从lodash库实现评论排序功能8.3 完整代码import { useState } from react import ./App.scss import avatar from ./images/avatar.png import orderBy from lodash/orderBy ​ // 评论列表数据 const defaultList [ { rpid: 3, user: { uid: 13258165, avatar: , uname: 周杰伦, }, content: 哎哟不错哦, ctime: 10-18 08:15, like: 88, }, { rpid: 2, user: { uid: 36080105, avatar: , uname: 许嵩, }, content: 我寻你千百度 日出到迟暮, ctime: 11-13 11:29, like: 88, }, { rpid: 1, user: { uid: 30009257, avatar, uname: 前端爱好者, }, content: React真的很强大, ctime: 10-19 09:00, like: 66, }, ] ​ // 当前登录用户信息 const user { uid: 30009257, avatar, uname: 前端爱好者, } ​ // 导航 Tab 数组 const tabs [ { type: hot, text: 最热 }, { type: time, text: 最新 }, ] ​ const App () { // 导航 Tab 高亮的状态 const [activeTab, setActiveTab] useState(hot) const [list, setList] useState(defaultList) ​ // 删除评论 const onDelete rpid { // 如果要删除数组中的元素需要调用 filter 方法并且一定要调用 setList 才能更新状态 setList(list.filter(item item.rpid ! rpid)) } ​ // tab 高亮切换 const onToggle type { setActiveTab(type) let newList if (type time) { // 按照时间降序排序 newList orderBy(list, ctime, desc) } else { // 按照喜欢数量降序排序 newList orderBy(list, like, desc) } setList(newList) } ​ return ( div classNameapp {/* 导航 Tab */} div classNamereply-navigation ul classNamenav-bar li classNamenav-title span classNamenav-title-text评论/span {/* 评论数量 */} span classNametotal-reply{list.length}/span /li li classNamenav-sort {/* 高亮类名 active */} {tabs.map(item { return ( div key{item.type} className{ item.type activeTab ? nav-item active : nav-item } onClick{() onToggle(item.type)} {item.text} /div ) })} /li /ul /div ​ div classNamereply-wrap {/* 发表评论 */} div classNamebox-normal {/* 当前用户头像 */} div classNamereply-box-avatar div classNamebili-avatar img classNamebili-avatar-img src{avatar} alt用户头像 / /div /div div classNamereply-box-wrap {/* 评论框 */} textarea classNamereply-box-textarea placeholder发一条友善的评论 / {/* 发布按钮 */} div classNamereply-box-send div classNamesend-text发布/div /div /div /div {/* 评论列表 */} div classNamereply-list {/* 评论项 */} {list.map(item { return ( div key{item.rpid} classNamereply-item {/* 头像 */} div classNameroot-reply-avatar div classNamebili-avatar img classNamebili-avatar-img src{item.user.avatar || avatar} alt / /div /div ​ div classNamecontent-wrap {/* 用户名 */} div classNameuser-info div classNameuser-name{item.user.uname}/div /div {/* 评论内容 */} div classNameroot-reply span classNamereply-content{item.content}/span div classNamereply-info {/* 评论时间 */} span classNamereply-time{item.ctime}/span {/* 评论数量 */} span classNamereply-time点赞数:{item.like}/span {user.uid item.user.uid ( span classNamedelete-btn onClick{() onDelete(item.rpid)} 删除 /span )} /div /div /div /div ) })} /div /div /div ) } ​ export default App9. 总结与展望9.1 核心知识点回顾React简介React是一个用于构建用户界面的JavaScript库具有组件化、虚拟DOM、跨平台等优势。开发环境使用create-react-app快速创建React项目。JSX在JavaScript中编写HTML模板的语法支持嵌入JavaScript表达式。事件处理使用驼峰命名法绑定事件支持传递自定义参数。组件React应用的基本构建块分为函数组件和类组件。状态管理使用useState Hook管理组件状态遵循不可变原则。样式处理支持行内样式、类名样式、CSS模块和CSS-in-JS等方式。9.2 进阶学习方向React Router学习如何实现单页应用的路由管理。状态管理学习Redux、Context API等状态管理方案。React Hooks深入学习useEffect、useContext、useReducer等Hooks。性能优化学习React的性能优化技巧如memo、useMemo、useCallback等。服务端渲染学习Next.js等服务端渲染框架。React Native学习使用React Native开发移动应用。React是一个强大而灵活的前端库掌握它将为你的前端开发之路打开一扇新的大门。希望本指南能够帮助你快速入门React为后续的深入学习打下坚实的基础。加油