企业官网建设流程全解析

网站诊断方案,c2c平台分类,公司网站如何被百度快照,网站与网页之间的区别是什么意思React 入门#xff1a;从 JSX 到组件化#xff0c;搞定核心知识点 #x1f680; 一、 什么是 React 为什么选择 React#xff1f;#x1f3af; 如果你问前端圈的程序猿 “现在最火的 UI 库是什么”#xff0c;十有八九会听到 “React” 这个名字。简单来说#xf…React 入门从 JSX 到组件化搞定核心知识点 一、 什么是 React 为什么选择 React如果你问前端圈的程序猿 “现在最火的 UI 库是什么”十有八九会听到 “React” 这个名字。简单来说React 是 Facebook现在的 Meta推出的一个用于构建用户界面的 JavaScript 库它就像一个超级高效的 “UI 建筑师”让我们能轻松搭建出交互丰富、性能能打的网页。为什么要学 React 呢“react 一开始就是组件思想非常的纯粹”。和传统前端开发相比React 有三个 “撒手锏”响应式数据变了 UI 自动更、数据绑定数据和 UI 手拉手、组件化把页面拆成一块块可复用的 “积木”。虽然有人说它入门门槛比 Vue 高一点但一旦上手你会发现这种 “激进” 的设计思路特别适合复杂应用开发毕竟谁不想写一次代码到处复用呢二、JSX 语法在 JS 里写 HTML这操作有点秀✨2.1 什么是 JSX第一次看到 JSX 代码的同学可能会懵“这到底是 JS 还是 HTML” 其实官方解释很直白 ——JSX 就是 “XML in JS”在 JavaScript 里写 XML而我们熟悉的 HTML本质上就是一种特殊的 XML。看看下面的例子jsx// JSX写法 const element h2JSX 是 React 中用于描述用户界面的语法扩展/h2 // 等效的原生JS写法JSX的编译结果 const element2 createElement(h2, null,JSX 是 React 中用于描述用户界面的语法扩展);这两行代码效果完全一样但显然 JSX 版本更像 “人话”。所以说JSX 本质是createElement函数的语法糖它的存在就是为了让我们写 UI 时少掉点头发毕竟谁愿意对着一堆嵌套的函数调用流泪呢2.2 JSX 的基本语法虽然 JSX 看起来像 HTML但它有几个 “小怪癖” 需要注意必须有根元素包裹就像快递必须有包装盒JSX 返回的内容也得有个 “根容器”。比如下面用div当容器也可以用 React 提供的Fragment文档碎片当 “隐形容器”避免多一层不必要的 DOM 节点。jsx// 正确有根元素包裹 return ( div h1title/h1 pcontent/p /div ) // 错误没有根元素 return ( h1title/h1 pcontent/p )class 要写成 className如果你在 JSX 里写div classboxReact 会给你抛错 —— 因为class是 JavaScript 的关键字所以得改用className。比如jsx// 正确写法 span classNametitleHello/span // 错误写法会报错 span classtitleHello/span表达式要用大括号包起来想在 JSX 里插入变量或表达式用{}就行比如jsxconst name React; const isLoggedIn true; // 插入变量 return h1Hello {name}!/h1; // 插入条件表达式 return {isLoggedIn ? div已登录/div : div未登录/div};三、组件化前端开发的 “乐高积木”3.1 什么是组件组件就像网页的 “功能模块”—— 把 HTML、CSS、JS 打包成一个独立单元完成特定功能。比如下面的JuejinHeader是头部组件Ariticles是文章列表组件它们就像乐高积木拼在一起就成了完整页面。jsx// 头部组件 function JuejinHeader() { return( div header h1JueJin首页/h1 /header /div ) } // 文章列表组件 const Ariticles () { return( div Articles /div ) }3.2 为什么 React 选函数当组件React 里的组件大多是函数这可不是随便选的。函数适合做组件因为能将 JSX 逻辑封装成一个组件。想想看函数接收参数、处理逻辑、返回结果组件接收数据、处理交互、返回 UI简直是天造地设比如最简化的组件长这样jsx// 一个简单的签到组件 const Checkin () { return( divCheckin/div ) }一行不多一行不少逻辑和 UI 完美融合3.3 根组件与子组件组合形成组件树整个 React 应用就像一棵大树有一个 “根组件”其他组件都是它的 “子组件”。以掘金首页为例展示根组件、子组件以及组件树的知识内容。下面代码的JuejinHeader、Ariticles都是APP的子组件jsxfunction JuejinHeader() { return( // jsx 最外层 div header h1JueJin首页/h1 /header /div ) } const Ariticles () { return( div Articles /div ) } const Checkin () { return( div Checkin /div ) } const TopArticles () { return( div TopArticles /div ) } // 根组件 function APP() { // 子组件们 return( div {/* h1Hello bReact!/b/h1 */} {/* 头部组件 */} JuejinHeader / main {/* 组件也和html 一样声明自定义组件 */} {/* 组件化让我们像搭积木一样组合成页面 */} Ariticles / aside Checkin / TopArticles / /aside /main /div ) } export default APP组件树以一个根组件为起点就像树干其他组件作为 “子组件”树枝和树叶嵌套在其中形成明确的层级关系。整个 React 应用的 UI 结构本质上就是一棵组件树的可视化呈现。上面这段代码形成的组件树结构如下APP根 ├─ JuejinHeader └─ main ├─ Ariticles └─ aside ├─ Checkin └─ TopArticles四、状态让组件 “动” 起来的魔法4.1 什么是 state 状态如果说组件是 “身体”那状态state就是 “灵魂”—— 它是组件内部的 “数据仓库”决定了组件的样子和行为。比如用户是否登录、待办事项列表、当前显示的名字这些都是状态。4.2 useState状态管理的 “金钥匙”React 提供了useState这个钩子函数来管理状态它的用法就像 “拆盲盒”jsx// 引入useState import { useState } from react; // 声明状态初始值为vuesetName用于更新状态 const [name, setName] useState(vue);这几行代码做了三件事声明了一个叫name的状态初始值是 “vue”得到一个更新状态的函数setName当setName被调用时组件会重新渲染UI 自动更新比如 3 秒后更新状态页面会自动变化jsx// 3秒后将name从vue改为react setTimeout(() { setName(react); }, 3000);效果展示4.3 多种状态管理一个组件可以有多个状态就像一个人可以有 “姓名”“年龄”“职业” 多个属性。比如同时管理三个状态jsx// 框架名称状态 const [name, setName] useState(vue); // 待办事项列表状态 const [todos, setTodos] useState([ { id: 1, title: 学习react, done: false }, { id: 2, title: 学习node, done: false } ]); // 登录状态 const [isLoggedIn, setIsLonggedIn] useState(false);每个状态独立管理互不干扰代码逻辑清晰得很五、渲染让数据 “长” 成 UI 的艺术️5.1 条件渲染根据状态 “变魔术”React 里的条件渲染就像 “if-else” 的可视化版本jSX中不能直接使用“if-else”语法因为 JSX 大括号{}内只能放表达式而if else是语句通常使用三目运算符代替。比如判断待办事项是否为空jsx// 有数据时显示列表无数据时显示提示 todos.length 0 ? ( ul {/* 列表内容 */} /ul ) : ( div暂无待办事项/div )登录状态的显示也是同理jsx// 根据登录状态显示不同内容 {isLoggedIn ? div已登录/div : div未登录/div}5.2 列表渲染用 map () 批量 “生产” UI当需要渲染列表比如待办事项、商品列表时map()方法就是神器。比如渲染 todos 列表jsxul { todos.map((todo) ( // 每个列表项必须有唯一key li key{todo.id} {todo.title} /li )) } /ul这里有个小细节每个列表项必须加key属性通常用唯一 ID这是 React 的 “性能暗号”帮助它快速识别哪些项没变避免重复渲染 —— 不加 key 虽然能运行但可能会有性能问题哦六、 事件处理给组件 “装开关”React 里的事件处理就像给组件装开关点击、输入等操作都会触发对应的函数。语法上有个小特点事件名要用驼峰命名比如onClick而不是onclick。比如登录按钮的点击事件jsx// 切换登录状态的函数 const toggleLogin () { setIsLonggedIn(!isLoggedIn); }; // 按钮绑定点击事件 button onClick{toggleLogin} {isLoggedIn ? 退出登录 : 登录} /button点击按钮时toggleLogin函数会切换isLoggedIn状态按钮文字和登录状态显示会自动更新 —— 这就是 “数据驱动 UI” 的魅力我们只需要管数据怎么变UI 自然会跟上。七、实战演练-简单的学习任务清单登陆界面7.1 代码展示// JSX 负责UI // use 使用 // state 数据状态 import {useState} from react; import ./App.css; function App() { // const name vue; // useState 会返回一个数组 // 数组的第一个元素是状态值第二个元素是更新状态值的函数 const [name,setName] useState(vue); const [todos, setTodos] useState([{ id: 1, title: 学习react, done: false, }, { id: 2, title: 学习node, done: false, }]); const [isLoggedIn,setIsLonggedIn] useState(false); setTimeout(() { setName(react); },3000); // 组件的数据业务、交互等 // JSX js里面class 是js 关键字 不能用用className const toggleLogin () { setIsLonggedIn(!isLoggedIn); } return( // 文档碎片标签 div h1Hello span classNametitle{name}!/span/h1 { todos.length 0 ? ( ul { todos.map((todo) ( li key{todo.id} {todo.title} /li )) } /ul ) : (div暂无待办事项/div) } {isLoggedIn ? div已登录/div:div未登录/div} button onClick {toggleLogin} {isLoggedIn?退出登录:登录} /button /div ) } export default App7.2 项目介绍这个项目是一个基于 React 的简单示例主要展示了 React 的核心特性具体如下技术基础使用 React 框架开发采用 JSX 语法描述 UI 界面通过import引入 React 的useState状态管理API。核心功能动态文本展示通过name状态控制标题文本初始显示 “Hello vue!”3 秒后自动更新为 “Hello react!”。待办事项列表基于todos状态渲染待办事项列表若列表为空则显示 “暂无待办事项”。登录状态切换通过isLoggedIn状态管理登录状态点击按钮可切换 “登录 / 退出登录” 状态并同步显示对应的状态文本。React 特性体现状态管理使用useState钩子管理组件内部状态name、todos、isLoggedIn通过状态更新函数如setName、setIsLonggedIn触发 UI 重新渲染。条件渲染通过三元表达式根据状态如todos.length、isLoggedIn动态展示不同 UI 内容。JSX 语法在 JavaScript 中直接编写类似 HTML 的标签同时支持嵌入变量如{name}和表达式。整体是一个用于演示 React 状态与 UI 联动、组件化开发思想的基础示例。7.3 效果亮个相八、总结React 核心知识清单 结语8.1 知识清单React 是专注于 UI 的库核心是组件化和响应式JSX 是 “JS 里写 XML” 的语法糖简化 UI 开发组件是函数封装 UI 和逻辑可组合成组件树用useState管理状态状态变则 UI 变条件渲染用三目运算符列表渲染用map()key事件处理用驼峰命名绑定函数操作状态8.2 结语学 React 就像学搭积木 —— 一开始可能觉得 “这零件怎么拼”但掌握了 JSX、组件、状态这些 “基础块” 后你会发现再复杂的页面也能一步步搭出来。React 更加激进但这种激进恰恰让它成为前端开发的 “瑞士军刀”—— 无论是小应用还是大型项目都能应对自如。现在你已经掌握了 React 的核心概念接下来就动手写写代码吧毕竟实践才是最好的老师