# react-andt

**Repository Path**: wangxinyanqc/react-andt

## Basic Information

- **Project Name**: react-andt
- **Description**: react + andt 初始化模板
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-09-21
- **Last Updated**: 2024-06-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### react + andt 模板

### react官方脚手架默认是将webpack配置隐藏起来了，在进行配置之前需要将webpack给暴露出来，输入命令 npm run eject 输入y回车，即可在根目录出现config文件夹

##### import { Routes, Route } from "react-router-dom"  // react-router 6.16.0以上语法使用

<Routes>
    <Route path="/home" element={<Home/>} />
    <Route path="/works" element={<Works/>} />
    <Route path="/antds" element={<Antds/>} />
    <Route path="/request" element={<Request/>} />
    <Route path="/my" element={<My/>} />
</Routes>
            

### import { Switch, Route } from "react-router-dom"  // react-router 5.2.0以上语法使用

<Switch>
    <Route path="/home" component={Home} />
    <Route path="/works" component={Works} />
    <Route path="/antds" component={Antds} />
    <Route path="/request" component={Request} />
    <Route path="/my" component={My} />
</Switch>

##### 路由跳转 this.props.history.push('/my')

##### <Fragment key={1}></Fragment>  fragment和<> 都能忽略标签嵌套，但fragment可以写key，适合数据遍历场景

# useEffect 钩子相当于 componentDidMount、componentDidUpdate、componentWillUnmount 这三个钩子函数，取决于第二个参数，不写[]就相当于componentDidMount、componentDidUpdate ，[]对象就相当于 componentDidMount， 在方法里写 return 回调相当于卸载回调
useEffect(()=> {
    console.log('模拟函数式组件生命周期...')
    return () => {
        console.log('相当于卸载组件的钩子...')
    }
},[])