《reactHook+Typescript 从入门到实践》让这篇文章带你飞

@本文章作者 Ruoduan.cn 转载请注明出处

• 缘起

  公司中台系统要新增公司项目 —— IM即时聊天 的后台管理，由本人全程负责，前端技术选型 想采用目前比较新比较hot的技术 —— reactHook + react-Router5 + Typescript + （mobx | useContext + useState）,
  至于括号内的稍后解答，个人觉得可以一定程度上替代 mobx 和 redux 的状态管理

• 本文将会从 Typescript，React-Hook，reactHook.TSX（实践）这三个方面来叙述

  • Typescript

    • 项目搭建
    • 类型定义
    • 应用分析
    • …

  • React-Hook ⭐️

    • useState
    • useEffect
    • useContext
    • …

  • Hook 与 mobx redux 等，实现自己状态管理

  • React 全家桶的东西不详细讲解带过 …

---

好了，下面让我们开始吧

Typescript

React-Typescript 项目搭建

nodejs环境需具备 Not 下载链接

我们采用脚手架create-react-app 直接搭建react-typescript项目环境

版本要求 nodejs 8+ ， Yarn 0.25+

npx create-react-app my-app --typescript

npm init react-app my-app --typescript

yarn create react-app my-app --typescript

Typescript 项目文件

• 这里讲解一下typescript的一些文件定义

./
/src
    ./react-app-env.d.ts // 全局声明文件

tsconfig.json // typescript 配置文件

tsconfig.json详解
这里例举🌰几个 ：

{
  "compilerOptions": {
      "experimentalDecorators": true,
    "target": "es5", //语言编译目标
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react" // 组件语法环境
  },
  "include": [ //编译目标目录
    "src",
  ]
}

• react-app-env.d.ts 是TypeScript声明文件
  🌰例如：
  你引入了jQuery 在typescript中：

$('#dom');
// or
jQuery('#dom');

// ERROR: Cannot find name ‘jQuery’.
报错了，因为ts编译器并不认识$() or jQuery

我们需要全局定义一下这个变量 用declare修饰符 🌰

declare var jQuery: (selector: string) => any;

jQuery('#foo');

这样我们就可以快乐的使用jquery了

但是前人种树后人乘凉 很多库 社区已经给我定义好了 我们至于要安装就可以了

yarn add @types/jquery --save-dev

我们在后期项目中还会使用到 @types 类型安装

可以在 TypeSearch 搜索我们需要的库类型

到这里 我们已经初步了解 Typescript 的项目结构了 正如它官网说的 它是js 的超集，渐进式语言，我们可以直接撸，它兼容js目前大部分新语法，并且对其增加类型

安装 antd， react-router-dom， 。。。

yarn add antd react-router-dom
这里就不一一例举🌰了

注意⚠️： react-router-dom 需要安装@types哦
yarn add @types/react-router-dom --save-dev

antd 工程参考

下面让我的步入重点～

React-hook

我们知道 react中分为2中组件，一种为类组件，一种为函数组件

区别

区别	class	func
定义方式	class	func
状态	有（state）	无
this	有	无
声明周期	有	无
简洁度	普通	较为简洁

通过比较我们可以看到 传统的函数组件没有state and 生命周期

所以在之前的开发中 函数式组件通常作为 一些 简单的组件 补充

而react-hook 可以让我们在 函数式组件中使用 state 组件状态管理，还可以实现声明周期 —— 副作用，而且还极大的简化了代码，让代码更加简洁明了易于理解

userState

我们看下面2段代码

import React, {
    useState } from 'react';

function Example() {
   
  // 声明一个叫 "count" 的 state 变量
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {
   count} times</p>
      <button onClick={
   () => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

等价于

class Example extends React.Component {
   
  constructor(props) {
   
    super(props);
    this.state = {
   
      count: 0
    };
  }

  render() {
   
    return (
      <div>
        <p>You clicked {
   this.state.count}