# react脚手架基础

**Repository Path**: javafdx/react-scaffold-foundation

## Basic Information

- **Project Name**: react脚手架基础
- **Description**: react脚手架基础
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-07-29
- **Last Updated**: 2023-01-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README


#### $ git config --global user.name "付东旭"
#### $ git config --global user.email "www.fu.cn@qq.com"


#### 安装 axios

yarn install
yarn add axios

#### 显示 webpack

要提交本地代码
yarn eject

#### 生命周期

---- 顺序执行----

1. 执行 constructor 方法
2. 执行 render 方法
3. 执行 componentDidMount 方法

----更新执行----（setState(),forceUpdate()）

1. 执行 render 方法
2. 执行 componentDidUpdate 方法

---销毁移除---

1. 执行 componentWillUnmount 方法

#### Constructor:

如果不初始化 state 或不进行方法绑定，则不需要为 React 组件实现构造函数；
constructor 通常只做两件事情：（1.通过给 this.state 赋值对象来初始化内部的 state 2. 为事件绑定实例 this）

#### componentDidMount:

1. componentDidMount()会在组件挂载后（插入 DOM 树中）立即调用
2. componentDidMount 中通常进行的操作：(依赖于 dom 操作，发送网络请求，添加订阅，会在 componentWillUnmount 取消订阅)

#### componentDidUpdate:

1. 会在更新后会被立即调用，首次渲染不会执行此方法
2. 当组件更新后，可以此处对 DOM 进行操作
3. 也可以在此处进行网络请求

#### componentWillUnmopunt:

1. 销毁之前调用
2. 执行必要的清理操作（清除 timer,取消网络请求）

#### 组件之间的通信

1. 父传子通信--类组件
   父引入子 `<ChildCpn name="why" age="18" height="1.88" />`
   子接受配置 -----
   <!-- constructor(props) {
   super(props); -->
    <!-- super(); -->
    <!-- this.props = props; -->
   <!-- } -->

   render() {
   const {name, age, height} = this.props;
   return (
   <h2>子组件展示的数据：{name + "," + age}</h2>
   )
   }

   ***

2. 父传子通信--函数组件

---

父组件
export default class App extends Component {
render() {
return (

<div>
<ChildCpn name="wht" age="18" height="1.88"></ChildCpn>
</div>
    )

}
}
子组件：
function ChildCpn(props) {
const {name, age, height} = props;
return (

<h2>{name, age, height}</h2>
)
}

---

3. 父传子属性验证
   /\_

   1. 引入
      import PropTypes from 'prop-types';

   ChildCpn.propTypes = {
   name: PropTypes.string,
   age: PropTypes.number,
   height: PropTypes.number,
   names: PropTypes.array
   }

   设置默认值
   ChildCpn.defaultProps = {
   name: "why",
   age: 30
   }

   2. 类组件--实现方法
      class ChildCpn extends Component {
      static propTypes = {

   }
   static defaultprops = {}
   }
   或者
   ChildCpn.propTypes = {

}
\_/

4. 子传父通信

---

父：
<CounterButton increment={this.increment} />
increment = () => {使用箭头函数才能识别 this,或者 dom 绑定时 this.increment.bind(this),e => this.increment
this.setState({
counter: this.state.counter + 1
})
}
子：
render() {
const {increment} = this.props
return <button onClick={increment}></button>
}

---

##### 安装浏览器--插件--React Developer Tools

##### StrictMode 严格模式

1. <React.StrictMode>

##### 安装 css in js 库

npm i styled-components
yarn add styled-components

vscode 安装语法提示插件
vscode-styled-components

#### 动态添加 class 属性

yarn add classnames
npm i classnames

#### 安装 antDesign

npm install antd -save
yarn add antd

react 版本官网：
https://ant.design/components/button-cn/

另外安装 icon 图标库
npm install --save @ant-design/icons
yarn add @ant-design/icons

全局导入样式文件
import 'antd/dist/antd.css'

#### 安装时间组件库

npm i moment

#### 修改项目配置(更换 antd 主题)

yarn add @craco/craco
npm i @craco/craco

需要修改启动项目命令
"start": "craco start

新建 craco.config.js(此文件会和 webpack 配置文件合并)

yarn add craco-less
npm i craco-less

#### 安装 axios

yarn add axios
npm install axios@0.19.2

#### 模拟请求数据网站

https://httpbin.org

#### 安装过渡动画库

npm install react-transition-group --save
yarn add react-transition-group

#### 引入 redux

yarn add redux
npm install redux

#### 引入 react-redux

yarn add react-redux
npm install react-redux@7.2.0

#### 引入 react-thunk

yarn add redux-thunk
npm install redux-thunk
中间件--应用于异步请求数据

#### 另一 redux 异步请求工具

yarn add redux-saga
npm install redux-saga

#### react-router 路由

yarn add react-router-dom@5.2.0

#### 统一管理路由

yarn add react-router-config@5.1.1
npm install react-router-config@5.1.1

#### vscode 插件---代码片段

ES7+ React/Redux/React-Native snippets

```
02_learn_scaffol
└─ src
   ├─ 01_组件的定义方式
   ├─ 02_组件的生命周期
   ├─ 03_组件间的通信
   ├─ 04_组件通信案例
   ├─ 05_React实现slot
   │  ├─ App.js
   │  ├─ NavBar.js
   │  ├─ NavBar2.js
   │  └─ style.css
   ├─ 06_跨组件的通信
   │  ├─ 01_跨组件通信-props.js
   │  ├─ 02_跨组件通信-context.js
   │  ├─ 03_跨组件通信-context函数.js
   │  └─ 04_跨组件通信-多个context.js
   ├─ 07_setState的使用
   │  ├─ 01_为什么使用setState.js
   │  ├─ 02_setState是异步更新.js
   │  ├─ 03_setState是同步更新.js
   │  ├─ 04_setState数据的合并.js
   │  └─ 05_setState本身的合并.js
   ├─ 08_React性能优化
   │  ├─ 01_列表中keys的作用.js
   │  ├─ 02_组件嵌套的render调用.js
   │  ├─ 03_shouldComponentUpdate.js
   │  ├─ 04_PureComponent.js
   │  └─ 05_memo的使用.js
   ├─ 09_前面知识点的补充
   │  ├─ 01_setState不可变的力量.js
   │  └─ 02_全局事件传递.js
   ├─ 10_受控和非受控组件
   │  ├─ 01_refs的使用.js
   │  ├─ 02_受控组件的基本使用.js
   │  └─ 03_受控组件-select的使用.js
   ├─ index.js
   └─ testDefault.js

```