欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

深入學(xué)習(xí)TypeScript 、React、 Redux和Ant-Design的最佳實(shí)踐

 更新時(shí)間:2019年06月17日 08:58:18   作者:Peter譚金杰  
這篇文章主要介紹了深入學(xué)習(xí)TypeScript 、React、 Redux和Ant-Design的最佳實(shí)踐,TypeScript 增加了代碼的可讀性和可維護(hù)性,擁有活躍的社區(qū),,需要的朋友可以參考下

前言

阿特伍德定律,指的是any application that can be written in JavaScript, will eventually be written in JavaScript,意即“任何可以用JavaScript來寫的應(yīng)用,最終都將用JavaScript來寫”

在使用新技術(shù)的時(shí)候,切忌要一步一步的來,如果當(dāng)你嘗試把兩門不熟悉的新技術(shù)一起結(jié)合使用,你很大概率會(huì)被按在地上摩擦,會(huì)yarn/npm和React腳手架等技術(shù)是前提,后面我會(huì)繼續(xù)寫PWA深入和Node.js集群負(fù)載均衡Nginx,webpack原理解析等~謝謝思否官方對(duì)我上篇文章的加精~

在使用TypeScript前,請(qǐng)你務(wù)必萬分投入學(xué)習(xí)好以下內(nèi)容再嘗試:

  • TypeScript必須知識(shí)點(diǎn):
    • javaScript教程必須要多看幾遍,看仔細(xì)了,否則你會(huì)被TS按在地上摩擦
    • TypeScript文檔,什么是TypeScript,一定要看得非常仔細(xì),因?yàn)橛锌赡荛_發(fā)時(shí)一個(gè)極小的問題是你不會(huì)的知識(shí)點(diǎn),那么可能會(huì)耗費(fèi)你大量的時(shí)間去解決
    • 前端性能優(yōu)化不完全手冊(cè) , 這是本人的一篇文章,也應(yīng)該看看。 哈哈哈~
    • 介紹完了配置,后面會(huì)有大量的總結(jié)~
  • React直接看文檔,React官方中文文檔,我認(rèn)為React的中文文檔已經(jīng)寫得非常好了,學(xué)起來還是比較簡(jiǎn)單的~
  • Redux,學(xué)習(xí)Redux之前,建議把官方文檔看幾遍,然后props context 自定義事件 pubsub-js這些組件傳遞數(shù)據(jù)的方式都用熟悉后再上Redux,因?yàn)镽edux寫法非常固定,只是在TS中無法使用修飾器而已,需要最原始的寫法。后面的代碼有注釋,到時(shí)候可以看看。(HOOKS和HOC都可以嘗試使用,因?yàn)镽eact的未來可能大概率使用這些寫法)Redux官方文檔
  • Ant-Design,目前React生態(tài)最好的UI組件庫,百分90的使用率,移動(dòng)端、PC端都支持,pro還可以開箱即用,強(qiáng)烈推薦,開啟配置按需加載,后臺(tái)TO-B項(xiàng)目用起來不要太舒服。Ant-Design官網(wǎng)~

學(xué)技術(shù)切忌過分急躁,一步登天,什么都想學(xué)卻什么都學(xué)不好。作者的心得,持之以恒的努力,把每個(gè)技術(shù)逐個(gè)擊破,最后結(jié)合起來使用,如魚得水,基礎(chǔ)不牢,地動(dòng)山搖,本文的代碼會(huì)把所有配置和Redux,Ant-Design全部配好,開箱即用,其他的功能你看Ant-Design的文檔往里面加就行了~

正式開啟

本文介紹如何配置,已經(jīng)整體的業(yè)務(wù)流程如何搭建 GitHub源碼地址

  • 包管理器,使用yarn或者npm都可以,這里建議使用yarn,因?yàn)锳nt-Design官方推薦yarn,它會(huì)自動(dòng)添加依賴。
  • 使用官方的 create-react-app的另外一種版本 和 Create React App 一起使用 TypeScript
  • react-scripts-ts 自動(dòng)配置了一個(gè) create-react-app 項(xiàng)目支持 TypeScript。你可以像這樣使用:create-react-app my-app --scripts-version=react-scripts-ts, -前提你必須全局下載 create-react-app

請(qǐng)注意它是一個(gè)第三方項(xiàng)目,而且不是 Create React App 的一部分。

需要的依賴:都在package.json文件中。

這里請(qǐng)萬分注意,TS的包大部分都是需要下兩個(gè),一個(gè)原生,一個(gè)@types/開頭

{
"name": "antd-demo-ts",
"version": "0.1.0",
"private": true,
"dependencies": {
"@types/jest": "24.0.11",
"@types/node": "11.13.7",
"@types/react": "16.8.14",
"@types/react-dom": "16.8.4",
"@types/react-redux": "^7.0.8",
"@types/react-router-dom": "^4.3.2",
"@types/redux-thunk": "^2.1.0",
"babel-plugin-import": "^1.11.0",
"customize-cra": "^0.2.12",
"less": "^3.9.0",
"less-loader": "^4.1.0",
"prop-types": "^15.7.2",
"react": "^16.8.6",
"react-app-rewired": "^2.1.3",
"react-dom": "^16.8.6",
"react-redux": "^7.0.2",
"react-router-dom": "^5.0.0",
"react-scripts": "3.0.0",
"redux-chunk": "^1.0.11",
"redux-devtools-extension": "^2.13.8",
"redux-thunk": "^2.3.0",
"typescript": "3.4.5"
},
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}

* `Ant-Design`按需加載配置 `config-overrides.js`

const { override, fixBabelImports, addLessLoader } = require('customize-cra');
module.exports = override(
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: true,
}),
addLessLoader({
javascriptEnabled: true,
modifyVars: { '@primary-color': '#1DA57A' },
})
);
```

tsconfig.json ,TS的配置文件 我基本上沒怎么改動(dòng)

{
"compilerOptions": {
"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": "preserve"
},
"include": [
"src"
]
}

Redux less 的配置

配置沒看懂不要緊,架子我都全部給你搭好了,按著TS和Ant-Design的官網(wǎng)去操作就OK

  • 我們重點(diǎn)理理思路,首先為什么要使用TypeScript?
    • 使用TypeScript最終會(huì)被編譯成JS,所以說它是JS的超集。
    • TypeScript帶靜態(tài)類型檢驗(yàn),現(xiàn)在的第三方包基本上源碼都是TS,方便查看調(diào)試。
    • 使用TS后,我感覺我調(diào)試BUG能力變強(qiáng)了很多,而且很少出錯(cuò)了,思維更嚴(yán)謹(jǐn)了,畢竟這是一個(gè)引入順序不對(duì)都會(huì)報(bào)錯(cuò)的語言。
    • 如果你在使用TS時(shí)候還一直使用any public ,那么我建議你退出TS
    • 一旦上了TS,一切都不一樣,比如修飾器無法使用。
    • 大型項(xiàng)目首選React和TS結(jié)合,代碼調(diào)試維護(hù)起來極其方便。
  • React如何優(yōu)化? 我開頭的文章有鏈接~
  • Ant-Design這么火,該怎么學(xué)習(xí)? 它是一個(gè)標(biāo)簽屬性帶方法的組件庫,一切都藏在文檔里。
  • React的Redux和VUEX一樣,都是單向數(shù)據(jù)流,寫法固定,掌握了寫起來非常容易~ 難的永遠(yuǎn)不是API,而是整體的技術(shù)架構(gòu),以及實(shí)現(xiàn)原理。

寫TS代碼時(shí)候常常問問自己,這個(gè)到底可能是什么類型,這個(gè)到底是public 還是 private?這個(gè)函數(shù)要返回什么類型,接受什么參數(shù),什么是必須的,什么是可能沒有的,再去考慮命名空間接口合并,類合并,繼承這些問題。

復(fù)雜軟件需要用復(fù)雜的設(shè)計(jì),面向?qū)ο缶褪呛芎玫囊环N設(shè)計(jì)方式,使用 TS 的一大好處就是 TS 提供了業(yè)界認(rèn)可的類( ES5+ 也支持)、泛型、封裝、接口面向?qū)ο笤O(shè)計(jì)能力,以提升 JS 的面向?qū)ο笤O(shè)計(jì)能力。

當(dāng)你在TS世界遨游過后,再回JS的世界,那么你會(huì)發(fā)現(xiàn)你寫代碼很少會(huì)出錯(cuò),除非是業(yè)務(wù)邏輯的問題~

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • 淺談react受控組件與非受控組件(小結(jié))

    淺談react受控組件與非受控組件(小結(jié))

    本篇文章主要介紹了淺談react受控組件與非受控組件(小結(jié)),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-02-02
  • 利用React高階組件實(shí)現(xiàn)一個(gè)面包屑導(dǎo)航的示例

    利用React高階組件實(shí)現(xiàn)一個(gè)面包屑導(dǎo)航的示例

    這篇文章主要介紹了利用React高階組件實(shí)現(xiàn)一個(gè)面包屑導(dǎo)航的示例,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-08-08
  • React懶加載實(shí)現(xiàn)原理深入分析

    React懶加載實(shí)現(xiàn)原理深入分析

    懶加載意思是不會(huì)預(yù)加載,而是需要使用某段代碼,某個(gè)組件或者某張圖片時(shí),才加載他們(延遲加載),這篇文章主要介紹了React懶加載實(shí)現(xiàn)原理
    2022-11-11
  • 淺談React和Redux的連接react-redux

    淺談React和Redux的連接react-redux

    本篇文章主要介紹了淺談React和Redux的連接react-redux,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2017-12-12
  • React自定義Hook的實(shí)現(xiàn)

    React自定義Hook的實(shí)現(xiàn)

    自定義Hook是一種自定義函數(shù),它封裝了React Hook的邏輯,并通過命名約定來使其可重用,本文主要介紹了React自定義Hook的實(shí)現(xiàn),感興趣的可以了解一下
    2023-11-11
  • React路由規(guī)則定義與聲明式導(dǎo)航及編程式導(dǎo)航分別介紹

    React路由規(guī)則定義與聲明式導(dǎo)航及編程式導(dǎo)航分別介紹

    這篇文章主要介紹了React路由規(guī)則的定義、聲明式導(dǎo)航、編程式導(dǎo)航,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)吧
    2022-09-09
  • 深入理解react 組件類型及使用場(chǎng)景

    深入理解react 組件類型及使用場(chǎng)景

    這篇文章主要介紹了深入理解react 組件類型及使用場(chǎng)景,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2019-03-03
  • 在React Native中添加自定義字體的方法詳解

    在React Native中添加自定義字體的方法詳解

    在這篇指南中,我們將探索使用 Google Fonts 在 React Native 應(yīng)用中添加自定義字體的方法,字體是優(yōu)秀用戶體驗(yàn)的基石,使用定制字體可以為你的應(yīng)用程序提供獨(dú)特的身份,需要的朋友可以參考下
    2024-02-02
  • React和Vue實(shí)現(xiàn)文件下載進(jìn)度條

    React和Vue實(shí)現(xiàn)文件下載進(jìn)度條

    本文主要介紹了React和Vue實(shí)現(xiàn)文件下載進(jìn)度條,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-04-04
  • redux工作原理講解及使用方法

    redux工作原理講解及使用方法

    這篇文章主要介紹了redux工作原理講解及使用方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2021-11-11

最新評(píng)論