react快速入门

一、为什么要学习 React✅1. 行业主流就业刚需全球大厂广泛采用MetaFacebook、Netflix、Airbnb、微软、字节、腾讯等。国内中大型企业前端技术栈首选之一。招聘需求常年稳居前端框架榜首。✅ 2. 生态强大能力边界广Web 端React Next.jsSSR/SSG移动端React Native一套代码多端运行桌面端Electron ReactVR/ARReact 360几乎覆盖所有现代前端开发场景。✅ 3. 思想先进提升编程能力强调 组件化、函数式编程、状态驱动 UI。学习 React 能让你更深入理解 声明式编程 和 数据流管理。对后续学习 Redux、Zustand、Recoil 等状态库打下基础。✅ 4. 社区活跃资源丰富GitHub Stars 超 200kVue 约 210k两者相当。npm 包数量庞大解决方案成熟。中文文档完善教程极多。二、React vs Vue核心区别一句话总结Vue “精装修房” —— 开箱即用上手快React “毛坯房” —— 自由度高可定制强维度ReactVue定位UI 库只管视图层渐进式框架提供完整方案语法JSXJS HTML 混写模板语法HTML 扩展学习曲线较陡需理解函数组件、Hooks、闭包陷阱平缓模板贴近 HTML响应式直观官方配套路由React Router、状态Redux/Zustand均为第三方官方提供 Vue Router、Pinia、Vite灵活性⭐⭐⭐⭐⭐ 极高架构自由⭐⭐⭐ 中等约定优于配置TypeScript 支持极佳Meta 主推 TS优秀Vue 3 全面 TS 重写性能虚拟 DOM Diff 优化响应式依赖追踪 编译时优化官网地址如下https://zh-hans.react.dev/learn?spm5176.28103460.0.0.62be6308yKASNW#components1.react基础语法一句话总结就是React 组件 状态 JSX组件Component把页面拆成独立可复用的“乐高积木”状态State数据变了界面自动更新JSX在 JavaScript 里写类似 HTML 的语法1.1组件函数就是组件function MyButton() { return ( button 我是一个按钮 /button ); } export default function MyApp() { return ( div h1欢迎来到我的应用/h1 MyButton / /div ); }1.2样式和数据回显JSX 比 HTML 更加严格。你必须闭合标签如br /。你的组件也不能返回多个 JSX 标签。你必须将它们包裹到一个共享的父级中比如div.../div或使用空的.../包裹样式有两种引入方式在主函数中调用import MyButton from ./test.tsx; export default function App() { return ( div MyButton/MyButton /div ); }效果如下1.3条件渲染使用if else 或者三元表达式const user { name: 张三, imageUrl: https://i.imgur.com/yXOvdOSs.jpg, imageSize: 90, }; export default function Profile() { return ( // 根标签 {/*三元表达式if-else*/} div {user.name.length 0 ? (h1我是哥哥/h1): (h2我是弟弟/h2)} /div / ); }1.4列表渲染const products [ { title: Cabbage, id: 1 }, { title: Garlic, id: 2 }, { title: Apple, id: 3 }, ]; //便利数组 const listItems products.map((item) { return ( li key{item.id} {item.title} /li ) }); export default function Profile() { return ( // 根标签 ul{listItems}/ul / ); }1.5事件function MyButton() { function handleClick() { alert(You clicked me!); } return ( button onClick{handleClick} 点我 /button ); }1.6更新状态你将从useState中获得两样东西当前的 statecount以及用于更新它的函数setCount。你可以给它们起任何名字但按照惯例会像[something, setSomething]这样为它们命名。import {useState} from react; export default function Profile() { const [data,setData] useState(0) const handleClick () { setData( data 1) } return ( // 根标签 div{data}/div button onClick{handleClick}点我加加/button / ); }如果需要组件之间共享数据那么就需要将各个组件的 state “向上” 移动例如下面的例子import { useState } from react; export default function MyApp() { return ( div h1独立更新的计数器/h1 MyButton / MyButton / /div ); } function MyButton() { const [count, setCount] useState(0); function handleClick() { setCount(count 1); } return ( button onClick{handleClick} 点了 {count} 次 /button ); }共享版本呢改动如下import { useState } from react; export default function MyApp() { const [count, setCount] useState(0); function handleClick() { setCount(count 1); } return ( div h1共同更新的计数器/h1 MyButton count{count} onClick{handleClick} / MyButton count{count} onClick{handleClick} / /div ); } function MyButton({ count, onClick }) { return ( button onClick{onClick} 点了 {count} 次 /button ); }1.7使用Hook以use开头的函数被称为Hook。useState是 React 提供的一个内置 Hook