React+Typescript使用之：ReactRouter、@loadable/component

时间 2019-11-29

标签 react+typescript react typescript 使用 reactrouter loadable component 栏目 React 繁體版

原文原文链接

前言

前段时间学习了React、Typescript，因此两个一块儿用试试；有点遗憾的是Redux还没学，后续学了Redux后才算完整。。。没办法，三分钟热度的我还在学flutter啊。。。javascript

说一下调接口的问题，最近包括上一份工做都遇到过，后端接口收不到参数。。。搞半天，结果是由于他们是从URL获取的请求参数，不管请求方式是否GET，，，因此沟通仍是很重要的，若是后端大佬接口测试经过(postman/swagger等)，可是页面上调用仍是接收不到参数，，，就要去看他们接收参数的方式了，看他们测试的请求request URL就知道了css

代码：react-tsjava

0、建立项目

提早学习TypeScript、React相关用法node

安装 create-react-app 脚手架

npm install -g create-react-app
复制代码

建立 React+TypeScript 项目的命令

会自动安装一些typescript相关的东西，还有react的typescript版本，一些库的声明等
react

create-react-app my-app --scripts-version=react-scripts-ts
复制代码

一、Typescript 校验规则:

注意修改配置须要重启项目才会生效git

tslint.json:github

{
  "extends": ["tslint:recommended", "tslint-react", "tslint-config-prettier"],
  "linterOptions": {
    "exclude": [
      "config/**/*.js",
      "node_modules/**/*.ts",
      "coverage/lcov-report/*.js"
    ]
  },
  "rules": {
    "no-debugger": false,
    "no-console": false,
    //声明interface是否须要首字母为大写的I
    "interface-name": false,
    //须要按字母顺序引入模块
    "ordered-imports": false,
    "object-literal-sort-keys": false,
    // jsx中匿名函数
    "jsx-no-lambda": false
  },
  "jsRules": {
    "no-debugger": false,
    "no-console": false,
    //声明interface是否须要首字母为大写的I
    "interface-name": false,
    //须要按字母顺序引入模块
    "ordered-imports": false,
    "object-literal-sort-keys": false
  }
}
复制代码

二、路由

react好像没有命名式路由，只能经过path去跳转，也没有路由元信息meta；有时间看下有没有其余解决方案；
官网文档：react-routerweb

<Route>有 children/render/component 三个属性决定当前路由渲染什么，exact 为true表示精确匹配路由，不然模糊匹配；
<Route component>,<Route render>优先级比<Route children>高
- <Route component>: 直接放组件
- <Route render>: 直接在这里写 JSX
- <Route children>: 与render相似；能够根据匹配(match)的url渲染，，，这个暂时还不知道具体使用场景（多是nav菜单栏，根据路由决定激活状态之类吧）

2.1 生成路由

<Switch>能够看做是单选框的做用，只匹配第一个符合条件的路由；路由位置<Route>通常精确路由放前面，模糊路由放后面typescript

// src/router.tsx
import * as React from 'react';
import { HashRouter, Route, Switch } from 'react-router-dom';
import Loadable from '@loadable/component';
import PageRoutes from './routes/index';

// 使用 import { lazy } from '@loadable/component';
// lazy()会有警告，跟React.lazy()同样的警告
const App = Loadable(() => import('./App'));
const ErrComp = Loadable(() => import('./views/ErrComp/index'));

// 生成 路由集合
const GetRoutes = () => {
  const AppRoute = 
    <Route 
      key='app' 
      path='/' 
      exact={true}
      component={App} 
    />;
  const ErrRoute = 
    <Route 
      key='err404' 
      exact={true} 
      path='/err404' 
      component={ErrComp} 
    />;
  const NoMatchRoute = 
    <Route 
      key='no-match' 
      component={ErrComp} 
    />;
  
  const routes = [AppRoute, ...PageRoutes, ErrRoute, NoMatchRoute];
  
  return (
    <Switch>
      {routes.map(route => route)}
    </Switch>
  );
}

export default function Routes() {
  return (
    <HashRouter>
      <GetRoutes />
    </HashRouter>
  );
}
复制代码

2.2 路由拆分：

2.2.1 模块路由

// src/routes/hello.tsx
import { Route } from 'react-router-dom';
import * as React from 'react';
import Loadable from '@loadable/component';

// 有子路由的话暂时这样处理吧，精确的放前面，模糊的放后面
export default [
  <Route 
    key="hello" 
    exact={true} 
    path="/hello" 
    component={Loadable(() => import('../views/Hello/index'))} 
  />,
  <Route 
    key="hello_child1" 
    exact={true} 
    path="/hello/child1" 
    component={Loadable(() => import('../views/Hello/hello_child1'))} 
  />,
  <Route 
    key="hello_id" 
    exact={true} 
    path="/hello/:id" 
    component={Loadable(() => import('../views/Hello/hello_id'))} 
  />
]
复制代码

2.2.2 懒加载

图片来自@loadable/component
- React.lazy()
曾经我在另外一个React的项目写的时候是支持 import(`../views/${name}`) 这种写法的。。。不知为什么在这里(React + TypeScript)不行npm
```
React.lazy(() => import(component));
复制代码
```
- @loadable/component
  Webpack v4+ and Babel v7+最好使用@loadable/component，而不是react-loadable，具体看这里；
```
npm i @loadable/component
复制代码
```
而后在项目根目录新建一个文件 loadable.d.ts或者统一一个文件.d.ts中写，（若是不提示找不到模块，就不须要本身新建了）写入声明 declare module '@loadable/component';
使用:
- import Loadable from '@loadable/component';
  const App = Loadable(() => import('./App'));
  正常使用，没有问题！！！
- import { lazy } from '@loadable/component';
  const App = lazy(() => import('./App'));
  能够用的，可是会有警告（跟使用React.lazy()的问题同样）：Warning: Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it. in Suspense
2.2.3 路由集中处理

// src/routes/index.tsx
import hello from './hello';

export default [
  ...hello
]
复制代码

2.3 withRouter/RouteComponentProps

路由组件能够直接获取这些属性（history,location,match等），而非路由组件就必须经过withRouter修饰后才能获取这些属性了

目的就是让被修饰的组件能够从props属性中获取history,location,match等方法

有两点要注意：

RouteComponentProps的合成
withRouter的写法： withRouter<thisProps>(Hello as any)

两者的区别也就是 RouteComponentProps的合成方式不一样而已

写法一：

import * as React from 'react';
import { withRouter, RouteComponentProps } from 'react-router-dom';

export interface Props extends RouteComponentProps<any> {
  name?: string;
}

class Hello extends React.Component<Props, {}> {
  constructor(props: Props) {
    super(props);
  }

  // 方法名 须要添加 public/ private / protected
  public render() {...}
}

export default withRouter<Props>(Hello as any);
复制代码

写法二：

import * as React from 'react';
import { withRouter, RouteComponentProps } from 'react-router-dom';

export interface Props {
  name?: string;
}
type thisProps = Props & RouteComponentProps;

class Hello extends React.Component<thisProps, {}> {
  constructor(props: thisProps) {
    super(props);
  }

  // 方法名 须要添加 public/ private / protected
  public render() {...}
}

export default withRouter<thisProps>(Hello as any);
复制代码

三、项目入口

// src/index.tsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import Routes from './router';
import './index.css';
// import registerServiceWorker from './registerServiceWorker'; 

const Loading = () => <div>loading...</div>;

ReactDOM.render(
  <React.Suspense fallback={Loading}>
    <Routes />
  </React.Suspense>,
  document.getElementById('root') as HTMLElement
);

// registerServiceWorker();
复制代码

四、组件

src/App.tsx

// src/App.tsx
import * as React from 'react';
import './App.css';
// import logo from './logo.svg';

interface Props {
  [prop: string]: any
}

class App extends React.Component<Props, {}> {
  constructor(props: Props) {
    super(props);

    this.state = {};
  }

  public render() {
    const { history, location } = this.props;
    return (
      <div style={{display: location.pathname === '/' ? '' : 'none'}}> <p>这是app</p> <p> <a href="javascript:;" onClick={() => history.push('/hello')}> go hello </a> </p> <hr /> </div>
    );
  }
}

export default App;
复制代码

src/components/Hello.tsx

// src/components/Hello.tsx
import * as React from 'react';
import { withRouter, RouteComponentProps } from 'react-router-dom';

export interface Props {
  from?: string;
}

export interface States {
  times: number;
}

type thisProps = Props & RouteComponentProps;

class Hello extends React.Component<thisProps, States> {
  constructor(props: thisProps) {
    super(props);

    this.state = {
      times: 0
    }

    this.bclick = this.bclick.bind(this);
  }

  public bclick() {
    this.setState({
      times: this.state.times+1
    })
  }

  // 方法名 须要添加 public/ private / protected
  public render() {
    const { from } = this.props;
    const { times } = this.state;

    return (
      <div> <h4>Hello { from }</h4> 点击了 {times} <p> <button onClick={this.bclick}>点击</button> </p> </div>
    )
  }
}

export default withRouter<thisProps>(Hello as any);
复制代码