React note14（hook&typescript初体验&ts与react&Ant Design）

Hook

---

Hook概念

React Hooks是React 16.8.0版本推出的新特性，主要的作用就是让无状态组件可以使用状态（在react开发中状态的管理是必不可少的 ，以前为了进行状态管理，需要使用类组件或者redux等来管理）。

useState()就是React提供最基础、最常用的Hook，主要用来定义和管理本地状态。


useState返回的是一个数组(长度为2)，数组的第一个对象表示当前状态的值，第二个对象表示用于更改状态的函数，类似于类组件的setState。

let [val,setVal]=useState(当前状态的初始值)

val：当前状态的值
setVal：改变状态的函数

在类组件中使用状态

修改脚手架app.js：

无状态组件中使用 Hook–useState

使用useState() ：

使用useRef()：hooks中可以通过 useRef()获取Dom节点。

多个状态怎么办 useState()

1、声明对象类型的状态
2、多次声明（建议用第二种）

Hooks–useEffect与生命周期

useEffect：函数组件中没有生命周期，那么可以使用 useEffect 来替代。

可以把 useEffect Hook 看做 componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合。

typescript初体验

---

什么是TypeScript

TypeScript：是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集。而且本质上，TypeScript扩展了JavaScript的语法，解决了JavaScript弱类型、没有命名空间导致很难模块化的"痛点"。

为什么要用TypeScript

• 开源
• 简单
  TypeScript 是 JavaScript 的超集，这意味着他支持所有的 JavaScript 语法。
• 兼容性好
  TScript 是 JS的强类型版本。虽然浏览器不能直接解析ts，但是ts有专门的解释器，将ts代码解释成js语法。
  然后在编译期去掉类型和特有语法，生成纯粹的 JavaScript 代码。由于最终在浏览器中运行的仍然是 JS，所以 TScript 并不依赖于浏览器的支持，也并不会带来兼容性问题。任何现有的JS程序可以不加改变的在TScript下工作。

与js相比的优势

TypeScript工具使重构更变的容易、快捷。

TypeScript 引入了 JavaScript 中没有的“类”概念。

TypeScript 中引入了模块的概念，可以把声明、数据、函数和类封装在模块中。

类型安全功能能在编码期间检测错误，这为开发人员创建了一个更高效的编码和调试过程。

安装

TypeScript解释器：npm install -g typescript -g
测试是否安装成功：tsc -v

文件声明与使用

文件创建，注意后缀是ts： xxx.ts

编译ts文件 ：在终端输入命令 tsc 文件名，会自动生成xxx.js文件

然后你可以在.html文件中使用script标签引用新生成的xxx.js文件。

变量

let(块变量)和const（常量）是JavaScript里相对较新的变量声明方式。

注意：let变量不能重复声明。
注意：const它拥有与 let相同的作用域规则，但是不能对它们重新赋值。

语法格式：   let/var 变量名称：数据类型 = value;

数据类型

TypeScript支持与JavaScript几乎相同的数据类型，此外还提供了实用的枚举类型方便我们使用。

（一）基础数据类型 boolean、number、string、数组

布尔值 ：boolean

数字 ：number

字符串 ：string，可以使用双引号（ "）或单引号（’）表示字符串

数组 ：number[] 或 ：Array<number>

（二）枚举类型

枚举 enum 类型是对JavaScript标准数据类型的一个补充。

使用枚举类型可以为一组数值赋予友好的名字。枚举表示的是一个命名元素的集合值。

不加""，然后调用的时候通过变量.元素来获取。

默认情况下，也就是我们没有指定成员数值时，从0开始为元素初始值/从0开始为元素编号。 当然你也可以手动的指定成员的数值。

字符串枚举：

（三）Any 任意类型

Any任意类型，为在编程阶段还不清楚类型的变量指定一个类型。

这些值可能来自于动态的内容，比如来自用户输入或第三方代码库。 这种情况下，我们不希望类型检查器对这些值进行检查，而是直接让它们通过编译阶段的检查。 那么我们可以使用 any类型来标记这些变量。

不过any不要过度使用。

（四）Void 空类型

Void意为不指定类型。

某种程度上来说，void类型像是与any类型相反，它表示没有任何类型。 当一个函数没有返回值时，你通常会见到其返回值类型是 void。

而声明一个void类型的变量没有什么大用，因为你只能为它赋予undefined和null：

（五）元组

元组类型用来表示已知元素数量和类型的数组。

各元素的类型不必相同，但对应位置的类型需要相同（赋值的顺序不能变）。

（六）never 其它类型

never 是其它类型（包括 null 和 undefined）的子类型，代表从不会出现的值。

解构

解构是一种打破数据结构，将其拆分为更小的部分的过程。

（一）为什么要使用解构

从对象和数组中获得特定的数据并且赋值给变量，编写出了很多同质化的代码。

（二）解构–对象

如果我们要把一个对象当中的值一次赋值给多个变量，那么我们可以使用对象解构。

a和b是声明的变量，也是从obj对象读取相应值的属性名称（变量名和属性名必须相同）。

（三）解构–数组

如果我们要把一个数组当中的值以一次赋值给多个变量，那么我们可以使用对象解构。

解构作为参数传递：

忽略数组中某些元素：(只需要把忽略的位置空缺就好)

展开

展开和解构正好相反，将一个数组展开为另一个数组，或将一个对象展开为另一个对象。

（一）数组展开

（二）对象展开

函数

TypeScript函数的分类与JavaScript一样，可以创建有名字的函数和匿名函数。

但TS能够定义函数的返回值类型。不过注意一下，如果定义了函数的返回类型，那么返回值的类型要与函数定义的类型一致；但如果没有个函数声明返回类型，会自动分配返回类型；另外还有一种返回类型是void，表示没有返回值。

命名函数与匿名函数可以给每个参数添加类型之后再为函数本身添加返回值类型。 TypeScript能够根据返回语句自动推断出返回值类型，因此我们通常省略它。

带有默认值的参数：

可变参数：当函数中的参数不确定个数的时候使用可变参数

ts与react

---

项目创建

命令：create-react-app my-app --typescript

文件结构：

• tsconfig.json：包含了工程里TypeScript特定的选项。
• tslint.json：保存了代码检查器，TSLint将要使用的设置。
• package.json：包含了依赖，还有一些命令的快捷方式，如测试命令，预览命令和发布应用的命令。
• public：包含了静态资源如HTML页面或图片。除了index.html文件外，其它的文件都可以删除。
• src：包含了TypeScript和CSS源码。
• index.tsx：是必须的入口文件。

组件创建

创建一个.tsx文件：

数据传递

使用传统的方式进行数据传递的时候发现会报错：

在进行数据传递的时候要使用 interface接口 对类型限制。

在子组件中进行限制设定：

在接口中定义的内容必须全部传递，不能只定义不传值

如果不确定会不会有值，那么可以在定义接口的时候设置成为可选项：

状态

注意：state接口不能作为第一个参数，因为第一个参数是给值传递留的。就算没有值传递，如果想用state，也得把第一个为值传递定义的接口保留位置。
可以定义一个空的ICon，然后放在< ICon,其他 >第一个位置。也可以用{}代替接口<{},IState>

状态修改

逆向传值

列表

http://api.artgoer.cn:8084/artgoer/api/v1/user/324380/v3/topic/topicHomeByLabel?pageIndex=1&token=b544cd63-6d42-46fe-a96c-3cf96bae3113&topicId=62187

Ant Design

---

官网-快速上手：https://ant.design/docs/react/getting-started-cn