# 2505A

**Repository Path**: flyird/2505A

## Basic Information

- **Project Name**: 2505A
- **Description**: 2505A资料
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 7
- **Created**: 2025-12-22
- **Last Updated**: 2026-01-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 第一周

### 类组件模板

```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模板语法

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



### 更新状态

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



### 父传子

父组件：和vue一样

```jsx
<Child list={this.state.list} aa={10} />
```

子组件：使用 `this.props` 接收

```jsx
class Child extends Component {
  this.props.list // 接收到的list
  this.props.aa   // 接收到的aa
}
```



### 子传父

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

父组件：和vue一样

```jsx
<Child updateCheck={this.updateCheck} />
```

子组件：使用 `this.props` 接收

```jsx
class Child extends Component {
  this.props.updateCheck() // 子组件调用传递过来的方法，来更新父组件的状态
}
```



### 上下文传参

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

1. Ctx.jsx 文件

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

2. 父组件

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

3. 后代任何组件，接收

   ```jsx
   import Ctx from '../Ctx.jsx'
   
   class Child1 extends Component {
     static contextType = Ctx // 必须的，将传递的内容绑定到context对象上
     
     this.context.list // 接收到的list 
     this.context.aa   // 接收到的aa
   }
   ```