react快速入门 - 技术栈

一、为什么要学习 React？

✅1. 行业主流，就业刚需

全球大厂广泛采用：Meta（Facebook）、Netflix、Airbnb、微软、字节、腾讯等。

国内中大型企业前端技术栈首选之一。

招聘需求常年稳居前端框架榜首。

✅ 2. 生态强大，能力边界广

Web 端：React + Next.js（SSR/SSG）

移动端：React Native（一套代码多端运行）

桌面端：Electron + React

VR/AR：React 360

几乎覆盖所有现代前端开发场景。

✅ 3. 思想先进，提升编程能力

强调组件化、函数式编程、状态驱动 UI。

学习 React 能让你更深入理解声明式编程和数据流管理。

对后续学习 Redux、Zustand、Recoil 等状态库打下基础。

✅ 4. 社区活跃，资源丰富

GitHub Stars 超 200k（Vue 约 210k，两者相当）。

npm 包数量庞大，解决方案成熟。

中文文档完善，教程极多。
二、React vs Vue：核心区别（一句话总结）

Vue = "精装修房" ------ 开箱即用，上手快

React = "毛坯房" ------ 自由度高，可定制强

维度	React	Vue
定位	UI 库（只管视图层）	渐进式框架（提供完整方案）
语法	JSX（JS + 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?spm=5176.28103460.0.0.62be6308yKASNW#components

1.react基础语法

一句话总结就是：React = 组件 + 状态 + JSX

组件（Component）：把页面拆成独立可复用的"乐高积木"
状态（State）：数据变了，界面自动更新
JSX：在 JavaScript 里写类似 HTML 的语法

1.1组件

函数就是组件

javascript 复制代码

function MyButton() {
  return (
    <button>
      我是一个按钮
    </button>
  );
}

export default function MyApp() {
  return (
    <div>
      <h1>欢迎来到我的应用</h1>
      <MyButton />
    </div>
  );
}

1.2样式和数据回显

JSX 比 HTML 更加严格。你必须闭合标签，如 <br />。你的组件也不能返回多个 JSX 标签。你必须将它们包裹到一个共享的父级中，比如 <div>...</div> 或使用空的 <>...</> 包裹：

样式有两种引入方式：

在主函数中调用

javascript 复制代码

import MyButton from "./test.tsx";


export default function App() {
    
    return (
        <div>
          
            <MyButton></MyButton>
        </div>
    );
}

效果如下：

1.3条件渲染

使用if else 或者三元表达式

javascript 复制代码

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列表渲染

javascript 复制代码

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事件

javascript 复制代码

function MyButton() {
  function handleClick() {
    alert('You clicked me!');
  }

  return (
    <button onClick={handleClick}>
      点我
    </button>
  );
}

1.6更新状态

你将从 useState 中获得两样东西：当前的 state（count），以及用于更新它的函数（setCount）。你可以给它们起任何名字，但按照惯例会像 [something, setSomething] 这样为它们命名。

javascript 复制代码

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 "向上" 移动

例如下面的例子：

javascript 复制代码

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>
    );
}

共享版本呢，改动如下：

javascript 复制代码

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