目录
2.4.1 函数式组件的state, 用React.useState()
2.4.4 函数式组件的componentDidMount(), 用React.useEffect
2.4.5 函数组件的componentWillUnmount()
1. antd
1.1 进入ant.design官网做初步了解
（1）定义：antd是基于Ant Design设计体系的React UI组件库，主要用于研发企业级中后台产品
（2）了解一些常用组件 button, table等。 ProComponents, ProTable(高级，属性多，样式复杂，直接使用，提升了开发效率)一些常用组件 button, table等。 ProComponents, ProTable(高级，属性多，样式复杂，直接使用，提升了开发效率)
1.2 安装antd
（1）VScode里面创建一个antd项目，create-react-app antd
（2）cd antd
（3）npm install -g yarn
（4）yarn add antd
（5）yarn
（6）yarn start
其实启动的页面，就是类似之前React其他案例。只是这里安装了antd组件库之后，在后面就可以直接使用antd的很多组件, 比如<Button > </Button>
1.3 动手实际操作
试着在App.js中直接引用antd组件库的一些组件，具体组件的效果，代码，每个组件的API属性等，都可以在https://ant.design/页面上查找
2. ant design pro
2.1 antd pro介绍
（1）antd首页下拉，找到antd pro
（2）具体看官网详细介绍
2.2 antd pro安装
（1）yarn create umi auto-platform (这个名称自己定义)
（2）依次选：Ant Design Pro， Pro V4, TypeScript,? simple, antd@4
（3）cd auto-platform
（4）yarn
（5）yarn start
补充：
（1）要先安装git然后重启，否则(2)失败
（2）切换yarn镜像
yarn config get registry 查看当前源
yarn config set registry https://registry.npm.taobao.org 切换为淘宝源
yarn config set registry https://registry.yarnpkg.com 切换为自带的
2.3 andt pro 项目目录介绍
（1）上述安装启动后，在VScode中生成一个项目目录，下面包含很多文件
（2）我们写的很多内容，都在src下
pages下存放很多代码，很重要
TableList
（3）mock可以去做我们的模拟接口返回，针对前后端分离的情况, package.json下有Mock信息
listTableList.ts
notices.ts
route.ts
user.ts
（4）config目录
config.dev.ts
config.ts
defaultSettings.ts
proxy.ts
routes.ts? 路由中的信息，对应到src下的具体每个页面的信息 ！！！非常重要。里面./表示src/pages下的页面，路径
（5）怎么加一个页面？
首先，在config/routes.ts下加信息：
{
name: 'helloworld',
icon: 'crown',
path:'/hello',
component:'./Hello',
}
然后，要去加一个页面。去src/page/下加一个目录Hello, 然后new 一个Hello.tsx, 接下来就是创建一个类组件或者功能组件
（6）ProComponents，ProTables
（7）补充：
BEJSON网页，可以格式化校验页面的response结果
开发的时候，更多的是在封装好的组件上选择使用哪些属性，选好，拼装，然后往里面写变化的参数等
2.4 函数式组件的扩展
（比如如何使用类似state...）? hooks
2.4.1 函数式组件的state, 用React.useState()
（1）返回的是一个数组。第一个数是state的key, 比如count. 第二个是修改第一个值, 比如setCount， 是个函数 (这俩名字都可以自己起)
（2）括号里可以设默认值
（3）示例代码
function Welcome(){
? ? const [count, setCount] = React.useState(0)
? ? const [name, setName] = React.useState("Mike")
? ? const add = () => {
? ? setCount(count + 1)
}
const changeName = () => {
? ? setName("Kevin")
}
return (
? ? <div>
? ? ? ? <h2> 当前数值为{count}, 名字为{name}</h2>
? ? ? ? <button onClick={add}>+1</button>
?? ? ? ? <button onClick={changeName}>change name</button>
? ? </div>
);
}
多个变量要定义为多个const [count, setCount] = React.useState(0)。
而类式组件中state可以写成JSON的形式（键值对）
开头可以写成 const Welcome: React.FC = () => {}. 官方写法，规范使用
2.4.2 函数式组件的props
其实就是函数定义时传的参数，形参
const Welcome: React.FC = (a) => {}
a就是参数，类似props
2.4.3 函数式组件的ref，用React.useRef
function Welcome(){
? ? myRef = React.useRef()
? ? show = () => {
? ? ? ? alert(myRef.current.value)
}
return (
? ? <div>
?? ? ? ? <input type="text" ref={myRef} />
?? ? ? ? <button onClick={show}>click</button>
? ? </div>
);
}
补充，可以在最上面引入 import React， {useState, useRef} from 'react', 所以下面就可以直接写 useState, useRef。。。
2.4.4 函数式组件的componentDidMount(), 用React.useEffect
(回调函数，指明对哪些方法做监听)
并不等同于compoenentDidMount()
useEffect则是，页面上任意一个state发生了变更的话，都会去调这个回调函数（第一个参数）
针对上面的问题，需要传第二个参数，来控制要监听哪些值，当这些值发生变化时，才调用这个回调函数。 当第二个参数设置为空数组的话，不管页面发生了什么，都不调用回调函数。（只在刷新或第一次渲染时调用）
示例代码：
React.useEffect(() => {
? ? setInterval(()=>{console.log(123)}, 1000)
}, [ ])
示例代码：
React.useEffect(() => {
? ? setInterval(()=>{setCount(count => count+1)}, 1000)
}, [ ])
注意这里的setCount要写成箭头函数，而不是setCount(count+1)
2.4.5 函数组件的componentWillUnmount()
用?const unmount = () => {? ?
ReactDOM.unmountComponentAtNode(document.getElementById('root'))
}
//卸载时需要用根节点的ID
删除的时候，需要注意删定时器。（报错，组件已经卸载了，但是里面的定时器还在更新,导致内存泄露）
示例代码：
React.useEffect(() => {
? ? let timer = setInterval(()=>{setCount(count => count+1)}, 1000)?? ?
? ? return () => {
? ? ? ? clearInterval(timer)
? ? }
}, [ ])
这个清空是在ComponentWillUnmount阶段起作用？！
