React + TypeScript基本知识小结 | 青训营笔记

CloudIris
75 阅读5分钟

这是我参与「第五届青训营」笔记创作活动的第12天。今天继续记录老师讲解的TypeScript基本知识，并记录react的关键知识——Hooks。

一、本堂课重点内容：

TypeScript、react基本知识。

二、详细知识点介绍：

type alias 类型别名

在 TypeScript 中，表示类型并不仅仅是基本类型的关键字以 :[关键字]的形式跟在变量/参数后面，除了之前提过的联合属性，我们还可以用一个函数形式来规定类型。使用type关键字，我们可以定义一个复杂的类型，并用这个类型来约束变量（有点类似C语言中给结构体使用 typedef 来简化其类型定义）。

首先使用 type 关键字，定义一个复杂的类型，这里定义了一个 接收2个number类型的参数，并返回 number 类型的函数。

type PlusType = (x: number, y: number) => number;

利用上面定义的函数类型 PlusType，我们可以用PlusType约束一个变量，那么这个变量只能被赋值为符合PlusType要求的函数。

function sum(x:number, y: number): number {
  return x + y;
}
const sum2: PlusType = sum;

类型别名可以大大简化 联合类型 的书写，下面就是一个很好的例子。

type NameResolver = () => string;
type NameOrResolver = string | NameResolver;

function getName(n: NameOrResolver): string {
  if  (typeof n === 'string') {
    return n;
  } else {
    return n();
  }
}

类型别名广泛地应用于各种ts写成的npm库文件中。

type assertion 类型断言

和 Java 中的 assert 关键字类似，类型断言用于告诉ts编译器，在某个特定的场合，我们比TypeScript自带的类型推断更加确定类型是什么，避免TypeScript进行多余的报错。不过 assert 关键字有更加广泛的用途，其后面跟着的是一个表达式；TypeScript中的类型断言人如其名，只用于判断类型。断言不是类型转换，它断言的结果必须是在联合类型所代表的类型集合中的某个类型。

as断言形式

function getLength(input: string | number): number {
    const str = input as String;
    if (str.length) {
        return str.length;
     } else {
       const number = input as number;
       return number.toString().length;
     }
}

上面的代码尽管从逻辑上讲，条件分支判断到达 else 的时候，input 一定是 number 类型，但是 TypeScript 自带的类型推断在联合属性的影响下不能准确判断这一点，因此需要进行类型断言。

<>断言形式

除了as形式，类型断言还可以写成 <> 形式。

function getLength(input: string | number): number {
      const str = input as String;
      if ((<string>input).length) {
        return (<string>input).length;
      } else {
        return input.toString().length;
      }
}

React 常用的 Hooks

Hook是React 16.8.0版本增加的新特性/新语法，可以让开发者在函数组件中使用 state 以及其他的 React 特性。Hooks的推出使得类式组件逐渐让位于函数式组件。一般来说，React + TypeScript 开发现在均采用函数式组件，以简化this的问题。

State Hook

State Hook让函数组件也可以有state状态, 并进行状态数据的读写操作。语法如下：

const [xxx, setXxx] = React.useState(initValue);

useState()说明：

  • 参数: 第一次初始化指定的值在内部作缓存
  • 返回值: 包含2个元素的数组, 第1个为内部当前状态值, 第2个为更新状态值的函数。

关于第二个参数—— 更新状态值的函数 setXxx 有2种写法：

  • setXxx(newValue): 参数为非函数值, 直接指定新的状态值, 内部用其覆盖原来的状态值
  • setXxx(value => newValue): 参数为函数, 接收原本的状态值, 返回新的状态值, 内部用其覆盖原来的状态值

State Hook

Effect Hook 可以让开发者在函数组件中执行副作用操作（用于模拟类组件中的生命周期钩子）。语法如下：

useEffect(() => { 
  // 在此可以执行任何带副作用操作
  return () => { // 在组件卸载前执行
    // 在此做一些收尾工作, 比如清除定时器/取消订阅等
  }
}, [stateValue]) // 如果指定的是[], 回调函数只会在第一次render()后执行

所谓的副作用操作指的是诸如：发ajax请求数据获取、设置订阅 / 启动定时器、手动更改真实DOM等操作。

useEffect()说明：

  • 第一个参数: 是一个箭头函数，其返回值如果不为空，要求是一个函数，类似于类式组件的 componentWillUnmount 生命周期钩子。
  • 第二个参数：是以一个数组。如果数组中存在成员 elm ，那么 useEffect 会实现类似 vue 中 watch 的效果，在 elm 发生变化时，指向第一个参数的主体部分。如果数组没有任何成员，则回调函数只会在第一次render()后执行，此时 useEffect 类似于 componentDidMount 生命周期钩子。

可以把 useEffect Hook 看做如下三个函数的组合：

        componentDidMount()
        componentDidUpdate()
    	componentWillUnmount()

Ref Hook

Ref Hook可以在函数组件中存储/查找组件内的标签或任意其它数据。语法如下：

const refContainer = useRef();

和类式组件的React.createRef()基本一样，都是用于保存标签DOM对象。

三、实践练习例子：

例子已经在文章中举出。

四、课后个人总结：

本章的知识点需要大量的实例和参考资料来辅助理解。

五、引用参考：

我主要是基于老师讲解提供的代码仓库进行理解和分析，并记录了自己的心得。

avatar
文章
阅读
粉丝