# 2510A-2

**Repository Path**: flyird/2510A2

## Basic Information

- **Project Name**: 2510A-2
- **Description**: 用于自我学习的仓库，记录自己的代码
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-05-19
- **Last Updated**: 2026-05-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 第一周

### 安装vscode插件

<img src="assets/image-20260316152713081.png" alt="image-20260316152713081" style="zoom:50%;" />



<img src="assets/image-20260316152808980.png" alt="image-20260316152808980" style="zoom:50%;" />

### 安装项目

```
pnpm create vite

回车后等一下，输入项目名称
│
◇  Project name:
│  week-1
│
◇  Select a framework:
│  React
│
◇  Select a variant:
│  JavaScript
│
◇  Install with pnpm and start now?
│  No

```

### 最实用开发建议（直接照做）

1. **新项目：React 18 + 函数组件 + React Router v6 **  -------------  主要学习
2. **老项目：React 16 + 类组件 + React Router v5 **      -------------  体验

### 类组件(了解)

注意点：

- 必须继承 Component 
- 必须实现的方法是 render，render里面return页面结构（jsx）
- 调用普通属性，使用this，比如 this.username 【方法也使用this调用】
- 调用静态属性，使用类名，比如 App.height       【静态方法也使用类名调用】

```jsx
import { Componnet } from 'react'

class App extends Component {
  // 1. state状态 ==== 响应式数据，类似vue2的data，类似vue3的ref()
  state = {
    username: 'zzz',
    age: 20,
    list: [...]
  }
           
  // 2. 自定义方法（写成箭头函数）
  abc = () => {
    ...
  }
  updateCheck = (id) => {
    ...
  }
   
  // 3. 必须实现的render，里面 return jsx模板
  render () {
    return (
    	<div>xxxx</div>
    )
  }
}

export default App
```



### JSX模板语法

JSX === JS + XML === 就是JS代码+HTML代码                      XML--可扩展标记语言     HTML--超文本标记语言

1. 变量、表达式等，需要使用 {} 括起来

2. 有且只有一个根

3. Fragment空标签(需要导入)(可以加属性)，可以简写<>(不需要导入)(不能加任何属性)

4. 标签必须闭合，即使是单标记标签，也必须写/，比如 `<input />` `<img />` 

5. class 要写成 className ; 也支持style行内样式，要写成对象格式

6. 条件判断 **1. 三元运算符**  2. 短路运算  **3. 自定义函数返回jsx**

7. 循环遍历：map，必须加key



### 事件写法

```jsx
render () {
  return (
  	<div>
      <button onClick={() => {单击按钮做什么}}>按钮</button>
    </div>
  )
}
```

React中的事件，叫做合成事件。

React会把时间统一绑定到根元素上（16版本绑定到document上；17版本绑定到最大的div上（id=“root”这个div）），以事件委托的方式来实现。

- 事件委托
- 解决了浏览器兼容问题



### Hooks（重点）

一句话，就是React或一些插件提供的 以 use 开头的函数。比如 Vue中的useRouter()   useRoute()

导入React，输出React，里面以use开头的都是React内置的Hook。比如：

- useState()
- useMemo()
- useCallback()
- useEffect()
- useContext()
- useReducer()
- useRef()

> [!IMPORTANT]
>
> 使用原则：hook必须写到函数组件内。而且不能套在for、if、对象内部

#### useState（重点）

- 作用：定义响应式的数据

- 语法：`const [变量名, 修改变量的方法名] = useState(初始值)`

> 修改这个变量，只能使用固定的方法。

```js
const [count, setCount] = useState(100)

onClick={() => setCount(200)}

// 更新时，使用函数
const [height, setHeight] = useState(180)

onClick={() => setHeight(3000)}
onClick={() => setHeight(prev => prev + 1)} // prev是原来的值，你要把height改为prev+1
```

#### useMemo（重点）

```jsx
// 语法：   const 结果 = useMemo(() => { return计算的结果 }, [依赖项])
// 演示：
// 1. 先定义几个状态，用于计算用
const [height, setHeight] = useState(1.7) // 单位是米
const [weight, setWeight] = useState(80)
const [age, setAge] = useState(23)

// 2. 分别演示useMemo的几个写法
// 2.1 后面的依懒项不填 --> 任何变量变化，计算属性都会重新计算
//     const bmi = useMemo(() => { return .... })

// 2.2 后面的依懒项是空数组[] --> 任何变量变化，计算属性都不会重新计算
//     const bmi = useMemo(() => { return ... },  [])

// 2.3 指定依懒项 ---> 指定的依懒项改变后，计算属性才会重新计算
//     const bmi = useMemo(() => { return ... },  [height, age])


const bmi = useMemo(() => {
  console.log('计算属性重新计算了')
  return weight / (height * height)
}, [height, age])
```



### 受控组件&非受控组件

#### 输入框

```jsx
const [title, setTitle] = useState('')

<input value={title} onChange={e => setTitle(e.target.value)} />
```



#### 复选框

```jsx
const [all, setAll] = useState(false)

<input checked={all} onChange={e => setAll(e.target.checked)} />
```



### 父传子

父组件：和vue一样

```jsx
// 加上 list 是一个数组；  changeDogAge 是一个函数
<Child list={list} aa={10} fn={changeDogAge} />
```

子组件：使用 函数的形参`props` 接收

```jsx
function App ({ list, aa, fn }) {
  console.log(list) // 输出传递过来的数据
  console.log(aa) // 输出传递过来的数据
  fn() // 调用传递过来的方法
}
```



### 子传父

> React中没有子传父
>
> 所谓的子传父，就是父组件传递方法给子组件，子组件调用方法来更新父组件的状态



### 上下文传参

上下文传参，作用是向后代传递数据、传递方法等

1. Ctx.jsx 文件

   ```jsx
   import React from 'react'
   const Ctx = React.createContext()
   export default Ctx
   ```

2. 父组件

   ```jsx
   import Ctx from './Ctx.jsx'
   import Child1 from ....
   import Child2 from ....
   render () {
     return (
       <Ctx.Provider value={{list, 10}}>
         <Child1 />
         <Child2 />
       </Ctx.Provider>
     )
   }
   ```

3. 后代任何 组件，接收

   ```jsx
   import Ctx from '../Ctx.jsx'
   import { useContext } from 'react'
   function Child1 () {
     const { list, aa } = useContext(Ctx)
     // list 就是接收到的list数据
     // aa 就是接收到的 10
   }
   ```
   
   

### 总结

#### 一个组件的结构

<img src="assets/image-20260318084200177.png" alt="image-20260318084200177" style="zoom:50%;" />