React学习指南

闲来无事, 学习一下React, 现在从零开始学起, 然后做个项目

1. 安装

• 
  

  使用vite创建reactd ts项目 vite: https://vitejs.cn/guide/
  
  pnpm create vite

  
  


• 
  

  项目说明

  
  

my-app/

├── node_modules/       # 项目依赖的第三方库

├── public/             # 静态资源文件夹

│   └── ...             # 应用的静态资源（如图片、字体等）

├── src/                # 项目源代码

│   ├── assets          # 项目静态资源

│   ├── App.tsx         # 主组件

│   ├── App.css         # 主组件的样式

│   ├── main.tsx        # 项目入口文件

│   ├── index.css       # 全局样式

│   └── ...             # 其他组件和资源

├── package.json        # 项目配置和依赖管理

├── pnpm-lock.yaml      # 依赖的精确版本锁定文件

├── .gitignore          # git忽略文件

├── index.html          # HTML 入口，包含 #root 挂载点

├── eslint.config.js    # ESLint 代码检查规则

├── tsconfig.app.json   # TypeScript 编译配置: 前端代码配置，编译 src/ 下的代码

├── tsconfig.json       # TypeScript 编译配置: 入口配置, 定义 references 引用另外两个

├── tsconfig.node.json  # TypeScript 编译配置: 构建工具配置，只编译 vite.config.ts

├── vite.config.ts      # Vite 构建配置，启用了 React 插件和 React Compiler

└── README.md           # 项目说明文档

​

• 创建一个demo

// APP.tsx 文件

import { useState } from 'react'

function App() {

  const [count, setCount] = useState(0)

​

  return (

    <div className='app'>

      首页

      <div className='counter'>{count}</div>

      <button onClick={() => setCount(count + 1)}>+</button>

      <button onClick={() => setCount(count - 1)}>-</button>

    </div>

  )

}

​

export default App

2. jsx

JSX（JavaScript XML）是看起来像 XML 的 JavaScript 语法扩展，React 中常用它替代常规 JavaScript 来编写 UI 组件，让你能用类 HTML 的方式描述组件结构与行为。

1. 
   

   放在return()的括号中

   
   


2. 
   

   class使用className代替

   
   


3. 
   

   必须是闭合标签,例如

   
   


4. 
   

   内部使用{ }放变量

   
   


5. 
   

   注释: {/* 注释内容 */}。 可用注释快捷键

   
   

3. 组件

3.1类组件

import React from 'react'

class Cap extends React.Component {

  render() {

    return <div className='capp'>类组件</div>

  }

}

3.2函数组件

import { useState } from 'react'

function App() {

  const [count, setCount] = useState(0)

  return (

    <div className='app'>

        <div className='counter'>{count}</div>

        <button onClick={() => setCount(count + 1)}>+</button>

        <button onClick={() => setCount(count - 1)}>-</button>

    </div>

  )

}

3.3组件生命周期

组件的生命周期(仅类组件有生命周期)可分成三个状态：

• 
  

  Mounting(挂载)：已插入真实 DOM

  
  


• 
  

  Updating(更新)：正在被重新渲染

  
  


• 
  

  Unmounting(卸载)：已移出真实 DOM

  
  

1. 
   

   挂载阶段

   
   
   
   
   • 
     

     constructor(): 在 React 组件挂载之前，会调用它的构造函数。

     
     
   
   
   • 
     

     render(): render() 方法是 class 组件中唯一必须实现的方法。

     
     
   
   
   • 
     

     componentDidMount(): 在组件挂载后（插入 DOM 树中）立即调用。

     
     
   
   
   
   


2. 
   

   更新阶段

   
   
   
   
   • componentDidUpdate(): 在更新后会被立即调用。
   
   
   
   


3. 
   

   卸载阶段

   
   
   
   
   • componentWillUnmount(): 在组件卸载及销毁之前直接调用。