# 2507-react-学习

**Repository Path**: flyird/2507-react-learning

## Basic Information

- **Project Name**: 2507-react-学习
- **Description**: 自己学习，总结用的仓库
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2026-03-26
- **Last Updated**: 2026-04-02

## 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?
│  Yes

```

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

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
```



### 类组件更新状态1（了解）

拷贝新对象：

```js
let 新对象 = JSON.parse(JSON.stringify(原对象))
```



1. 不可变，指的是，不能单独修改对象中的某个属性；不能单独修改数组中的某个元素。

2. 如果要修改，只能使用 `this.setState({ 状态名称: 新的值, 状态名称2: 新的值, ... })` 去修改

```jsx
// 修改username
this.setState({ username: '李四' })

// 修改age
this.setState({ age: 23 })

// 修改list
let newList = JSON.parse(JSON.stringify(this.state.list))
针对newList做修改、添加、删除等等
this.setState({ list: newList })
```

### 类组件更新状态2（了解）

```js
let 新对象 = { ...原对象 }
```

```jsx
state = {
  count: 100,
  dog: {
    age: 3,
    name: '旺财'
  }
}

// 1. 【必须】使用setState这个方法修改
	// 语法： this.setState({ 数据名: 新的值 })
	// 比如： this.setState({ count: 200 })
  // 比如： this.setState({ dog: 新的dog })
  // 比如： this.setState({ list: 新的list })
```

### Hooks（重点）

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

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

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

> [!IMPORTANT]
>
> 使用原则：hook必须写到函数组件内。

#### 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
```



### 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）），以事件委托的方式来实现。

### 父传子

父组件：和vue一样

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

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

```jsx
function App (props) {
  console.log(props.list) // 输出传递过来的数据
  console.log(props.aa) // 输出传递过来的数据
  props.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: list, aa: 10}}>
         <Child1 />
         <Child2 />
       </Ctx.Provider>
     )
   }
   ```

3. 后代任何 组件，接收

   ```jsx
   import Ctx from '../Ctx.jsx'
   import { useContext } from 'react'
   function Child1 (props) {
     const { list, aa } = useContext(Ctx)
   }
   ```
   
   

### 总结

#### 一个组件的结构

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