成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

TypeScript 3.0 + React + Redux 最佳實(shí)踐

CloudwiseAPM / 1965人閱讀

摘要：首先聲明這篇文章是想說(shuō)明一下最新版本的的新特性帶來(lái)的極大的開發(fā)體驗(yàn)提升而不是如何利用開發(fā)應(yīng)用這個(gè)特性就是對(duì)的支持在的中有說(shuō)明具體可以參考這里在版本之前我們?cè)陂_發(fā)應(yīng)用尤其是在配合一類庫(kù)的時(shí)候經(jīng)常用到諸如之類的封裝而這些函數(shù)其實(shí)都可以用裝飾器的

首先聲明, 這篇文章是想說(shuō)明一下最新版本的 TypeScript(3.0) 的新特性帶來(lái)的極大的 React 開發(fā)體驗(yàn)提升. 而不是如何利用 TypeScript 開發(fā) React 應(yīng)用.

這個(gè)特性就是對(duì)defaultProps的支持, 在 TypeScript 的 Wiki 中有說(shuō)明, 具體可以參考這里: Support for defaultProps in JSX.

在3.0版本之前, 我們?cè)陂_發(fā) React 應(yīng)用, 尤其是在配合 redux 一類 HOC 庫(kù)的時(shí)候, 經(jīng)常用到諸如 connect(TodoList), withRouter(TodoList) 之類的封裝. 而這些函數(shù)其實(shí)都可以用裝飾器的方式來(lái)調(diào)用, 比如:

export interface TodoListProps extends RouteComponentProps<{}> {
  todos: Todo[];
}

@withRouter
@connect(mapStateToProps)
export class TodoList extends PureComponent {
  render() {
    return null
  }
}

但是在結(jié)合 TypeScript 的時(shí)候, 這中間有個(gè)問(wèn)題, 就是裝飾器會(huì)自動(dòng)注入一些 props 給組件, 這一部分屬性不需要外部傳入, 因此是可選的, 在strictNullCheck屬性開啟的時(shí)候, 就會(huì)出現(xiàn)屬性沖突. 因?yàn)?TS 給不允許裝飾器修改被裝飾的對(duì)象的類型, 因此在 props 定義中為required屬性依然為required.

比如對(duì)于上面的例子, 在實(shí)例化TodoList這個(gè)組件的時(shí)候, 必需要傳入所有的TodoListProps所定義的屬性, 否則會(huì)有TS2322錯(cuò)誤.

而在 TS 3.0 中, 可以聲明defaultProps屬性來(lái)表明某些屬性對(duì)外部組件而言是可選的. 比如:

@withRouter
@connect((state) => ({ todos: state.todos })
export class TodoList extends PureComponent {
  static defaultProps: TodoListProps
  render() {
    return null
  }
}

這里的static defaultProps: TodoListProps表明, 所有的TodoList的 props TodoListProps 對(duì)外部組件都是可選的. 這就意味著外部組件可以什么屬性都不用傳也不會(huì)有錯(cuò)誤. 同時(shí)內(nèi)部而言所有的屬性都是NotNullable.

綜上, 通常情況下, 我們的一個(gè)組件會(huì)有一部分屬性由裝飾器注入, 而另一部分則需要外部實(shí)例化時(shí)傳入, 因此, 可以將一個(gè)組件的 props 接口聲明成兩層結(jié)構(gòu), 第一層為由裝飾器注入的部分, 第二層則為完整的屬性接口, 然后將defaultProps設(shè)置成為第一層接口即可. 比如:

export interface TodoListInnerProps extends RouteComponentProps<{}> {
  todos: Todo[];
}

export interface TodoListProps extends TodoListInnerProps {
  className?: string;
  onLoad?(): void;
}

@withRouter
@connect((state) => ({ todos: state.todos })
export class TodoList extends PureComponent {
  static defaultProps: TodoListInnerProps
  render() {
    return null
  }
}

需要注意的是:

TypeScript 要 3.0.1以上

@types/react 要最新版

withRouter, connect 等函數(shù)在 @types中, 簽名有問(wèn)題, 需要手動(dòng)修改一下:

import { ComponentClass } from "react"
import {
  connect as nativeConnect,
  MapDispatchToPropsParam,
  MapStateToPropsParam
} from "react-redux"
import { withRouter as nativeWithRouter } from "react-router"

export type ComponentDecorator
 = >(WrappedComponent: T) => T

export const connect: (
  mapState: MapStateToPropsParam, P, S>,
  mapDispatch?: MapDispatchToPropsParam, P>
) => ComponentDecorator = nativeConnect as any

export const withRouter: ComponentDecorator = nativeWithRouter as any

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/108302.html

相關(guān)文章

  • TypeScript 、React、 Redux和Ant-Design的最佳實(shí)踐

    摘要：使用官方的的另外一種版本和一起使用自動(dòng)配置了一個(gè)項(xiàng)目支持。需要的依賴都在文件中。帶靜態(tài)類型檢驗(yàn)，現(xiàn)在的第三方包基本上源碼都是，方便查看調(diào)試。大型項(xiàng)目首選和結(jié)合，代碼調(diào)試維護(hù)起來(lái)極其方便。 showImg(https://segmentfault.com/img/bVbrTKz?w=1400&h=930); 阿特伍德定律，指的是any application that can be wr...

    wangbinke 評(píng)論0 收藏0

  • TypeScript 、React、 Redux和Ant-Design的最佳實(shí)踐

    摘要：使用官方的的另外一種版本和一起使用自動(dòng)配置了一個(gè)項(xiàng)目支持。需要的依賴都在文件中。帶靜態(tài)類型檢驗(yàn)，現(xiàn)在的第三方包基本上源碼都是，方便查看調(diào)試。大型項(xiàng)目首選和結(jié)合，代碼調(diào)試維護(hù)起來(lái)極其方便。 showImg(https://segmentfault.com/img/bVbrTKz?w=1400&h=930); 阿特伍德定律，指的是any application that can be wr...

    codeKK 評(píng)論0 收藏0

  • Taro 優(yōu)秀學(xué)習(xí)資源匯總

    摘要：多端統(tǒng)一開發(fā)框架優(yōu)秀學(xué)習(xí)資源匯總官方資源項(xiàng)目倉(cāng)庫(kù)官方文檔項(xiàng)目倉(cāng)庫(kù)官方文檔微信小程序官方文檔百度智能小程序官方文檔支付寶小程序官方文檔字節(jié)跳動(dòng)小程序官方文檔文章教程不敢閱讀包源碼帶你揭秘背后的哲學(xué)從到構(gòu)建適配不同端微信小程序等的應(yīng)用小程序最 Awesome Taro 多端統(tǒng)一開發(fā)框架 Taro 優(yōu)秀學(xué)習(xí)資源匯總 showImg(https://segmentfault.com/img/r...

    toddmark 評(píng)論0 收藏0

  • 平時(shí)積累的前端資源，持續(xù)更新中。。。

    本文收集學(xué)習(xí)過(guò)程中使用到的資源。 持續(xù)更新中…… 項(xiàng)目地址 https://github.com/abc-club/f... 目錄 vue react react-native Weex typescript Taro nodejs 常用庫(kù) css js es6 移動(dòng)端 微信公眾號(hào) 小程序 webpack GraphQL 性能與監(jiān)控 高質(zhì)文章 趨勢(shì) 動(dòng)效 數(shù)據(jù)結(jié)構(gòu)與算法 js core 代碼規(guī)范...

    acrazing 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<