# react-95

**Repository Path**: errlei/react-95

## Basic Information

- **Project Name**: react-95
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-02-01
- **Last Updated**: 2024-02-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## React



### 1. 创建

```
npx create-react-app react-basic  这一种使用的底层是webpack创建的

还有一种方式创建react项目，使用vite
pnpm create vite my-react-app --template react


创建完以后，安装依赖，然后启动项目
pnpm i
npm run dev
```



## 2. JSX语法

1. 什么是jsx？

在javascript里面写html标签的这种形式， JSX是JavaScript和XMl。是在React中构建UI的方式

2. 列表渲染

```
<ul>
	{list.map(item => (<li key={item.id}>{item.name}</li>))}
</ul>
```

3. 条件渲染

```
3种形式的条件渲染
if(flag){
    return (<div>xxxxxx</div>)
}

{ flag && <div>xxxxx</div> }

{ flag ? (<div>xxxx</div>) : (<span>xxx</span>) }
```

4. 事件绑定

```
<button onClick={(e) => fn(xxx, e) }>xx</button>
```



## 3. 类组件与函数数组修改 状态变量 更新UI

1. 类组件

```jsx
class Header extends React.Component {
    state = {
        count:0
    },
    fn = () => {
    	// setState既更新数据又更新UI结构
        this.setState({
            count: this.state.count + 1
        })
    }
    render() {
        return (
        	<>
        		<div>{this.state.count}</div>
        		<button onClick={this.fn}>xxx<button>
        	</>
        )
    }
}
```

2. 函数组件有了hooks（react v16.8+）

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

function Header() {
    const [count, setCount] = useState(0)
    const fn = () => {
        setCount(count + 1)
    }
    return (
    	<p>{count}</p>
    	<button onClick={fn}>xxxx<button>
    )
}
```



## 4. 生命周期

react里面组件分为类组件和函数组件

在react v16.8以前，说的生命周期只针对类组件。 16.8+以后，函数组件结合hooks也近似于有了生命周期

**挂载时 +  更新时 + 销毁时**



1. 挂载时常用的有3个：  constructor ----> render ----> componentDidMounted
   1. constuctor一般的作用是  1. 初始化state 2. 创建 Ref 3. 使用 bind 解决 this 指向问题等 -----  类似于 vue2的created
   2. render是渲染页面的函数，是类组件里面必须写函数--- 一定要注意里面不能调用this.setState(),否则就死循环
   3. componentDidMounted 组件挂载成功， 一般1. 发送网络请求 2.DOM操作。  类似与vue2的mounted
2. 更新的常用的有2个   render----> componentDidUpdate
   1. 什么时候会触发更新： setState -----  父向子传值props改变也会更新组件 ---- forceUpdate(用的少)
   2. 父子组件一起的时候，更新的生命周期函数的执行顺序   父render --- 子render--子componentDidUpdate--- 父componentDidUpdate
   3. vue的父子组件生命周期的顺序  父组件3  b - c -bm   ---> 子4个 ---> 父组件的mounted





> vue2的组件更新有哪几种方式？

1. v-if 直接销毁创建组件
2. 使用this.$forceUpdate() 强行更新组件
3. 使用自定义key，手动改变key，组件就会更新  `<Header :key="mykey"></Header>`