前言

先学一下react有备无患，发现挺容易上手的，还记得大三的时候学vue学的特别慢，现在看react看了一天就可以看大项目了；具体历程就是：

  • 看官方文档，看视频 1day
  • 看github react项目，标准的管理系统入手

React 简介

  • 是什么？
    React 是 Facebook 开发的用于构建用户界面的 JavaScript 库，专注于组件化和声明式编程。
  • 核心概念
    • 组件化：将 UI 拆分为独立、可复用的代码块。
    • 虚拟 DOM：高效更新界面，提升性能。
    • 单向数据流：数据从父组件流向子组件。

JSX 语法

  • 什么是 JSX？
    一种类似 HTML 的语法扩展，最终会被转换为 JavaScript。
  • 基础用法：
    const element = <h1>Hello, React!</h1>;
  • 嵌入 JavaScript 表达式：
    const name = "Alice";
    const element = <h1>Hello, {name}</h1>;
  • 注意事项：
    • 使用 className 代替 class。
    • 标签必须闭合（如 <img />）。

组件（Components）

函数组件

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

类组件

（了解即可，推荐用函数组件+Hooks）

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

使用组件

function App() {
  return (
    <div>
      <Welcome name="Alice" />
      <Welcome name="Bob" />
    </div>
  );
}

Props 和 State

Props（父传子数据）

function User(props) {
  return <p>{props.name} - {props.age}</p>;
}

// 使用
<User name="Alice" age={25} />

State（组件内部状态）

使用 useState Hook：

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}

事件处理

  • 语法：使用驼峰命名（如 onClick）。
  • 示例：
    function Button() {
      const handleClick = () => {
        alert('Button clicked!');
      };

      return <button onClick={handleClick}>Click Me</button>;
    }

条件渲染

  • 使用 if 或三元运算符：
    function Greeting({ isLoggedIn }) {
      return isLoggedIn ? <p>Welcome back!</p> : <p>Please sign in.</p>;
    }

列表渲染

  • **使用 map 和 key**：
    function TodoList() {
      const todos = ['Learn React', 'Build a project', 'Deploy'];

      return (
        <ul>
          {todos.map((todo, index) => (
            <li key={index}>{todo}</li>
          ))}
        </ul>
      );
    }

生命周期与副作用（useEffect）

  • 副作用操作：数据获取、订阅等。
  • **使用useEffect**：
    import { useEffect } from 'react';

    function Timer() {
      const [seconds, setSeconds] = useState(0);

      useEffect(() => {
        const interval = setInterval(() => {
          setSeconds(s => s + 1);
        }, 1000);

        return () => clearInterval(interval); // 清理函数
      }, []); // 空数组表示只在组件挂载时运行

      return <div>Seconds: {seconds}</div>;
    }

路由（React Router）

  1. 安装：

    npm install react-router-dom

  2. 基本配置：

    import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

    function App() {
      return (
        <Router>
          <nav>
            <Link to="/">Home</Link>
            <Link to="/about">About</Link>
          </nav>

          <Route path="/" exact component={Home} />
          <Route path="/about" component={About} />
        </Router>
      );
    }

状态管理（进阶）

  • Context API：跨组件共享状态。
  • Redux：第三方库，适合复杂应用。

构建与部署

  1. 构建生产代码：
    npm run build
  2. 部署：将 build 文件夹内容上传至服务器或使用 Vercel/Netlify 等平台。