亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

兩年React老兵的總結(jié) - 類型檢查篇

scola666 / 3314人閱讀

摘要：系列引言最近準(zhǔn)備培訓(xùn)新人為了方便新人較快入手開(kāi)發(fā)并編寫(xiě)高質(zhì)量的組件代碼我根據(jù)自己的實(shí)踐經(jīng)驗(yàn)對(duì)組件設(shè)計(jì)的相關(guān)實(shí)踐和規(guī)范整理了一些文檔將部分章節(jié)分享了出來(lái)由于經(jīng)驗(yàn)有限文章可能會(huì)有某些錯(cuò)誤希望大家指出互相交流由于篇幅太長(zhǎng)所以拆分為幾篇文章主要有以

系列引言

最近準(zhǔn)備培訓(xùn)新人, 為了方便新人較快入手 React 開(kāi)發(fā)并編寫(xiě)高質(zhì)量的組件代碼, 我根據(jù)自己的實(shí)踐經(jīng)驗(yàn)對(duì)React 組件設(shè)計(jì)的相關(guān)實(shí)踐和規(guī)范整理了一些文檔, 將部分章節(jié)分享了出來(lái). 由于經(jīng)驗(yàn)有限, 文章可能會(huì)有某些錯(cuò)誤, 希望大家指出, 互相交流.

由于篇幅太長(zhǎng), 所以拆分為幾篇文章. 主要有以下幾個(gè)主題:

01 類型檢查

02 組件的組織

[03 樣式的管理]()

[04 組件的思維]()

[05 狀態(tài)管理]()

文章首發(fā)于掘金平臺(tái)專欄
類型檢查

靜態(tài)類型檢查對(duì)于當(dāng)今的前端項(xiàng)目越來(lái)越不可或缺, 尤其是大型項(xiàng)目. 它可以在開(kāi)發(fā)時(shí)就避免許多類型問(wèn)題, 減少低級(jí)錯(cuò)誤的; 另外通過(guò)類型智能提示, 可以提高編碼的效率; 有利于書(shū)寫(xiě)自描述的代碼(類型即文檔); 方便代碼重構(gòu)(配合 IDE 可以自動(dòng)重構(gòu)). 對(duì)于靜態(tài)類型檢查的好處這里就不予贅述, 讀者可以查看這個(gè)回答flow.js/typescript 這類定義參數(shù)類型的意義何在？.

Javascript 的類型檢查器主要有Typescript和Flow, 筆者兩者都用過(guò), Typescript 更強(qiáng)大一些, 可以避免很多坑, 有更好的生態(tài)(例如第三方庫(kù)類型聲明), 而且 VSCode 內(nèi)置支持. 而對(duì)于 Flow, 連 Facebook 自己的開(kāi)源項(xiàng)目(如 Yarn, Jest)都拋棄了它, 所以不建議入坑. 所以本篇文章使用 Typescript(v3.3) 對(duì) React 組件進(jìn)行類型檢查聲明

建議通過(guò)官方文檔來(lái)學(xué)習(xí) Typescript. 筆者此前也整理了 Typescript 相關(guān)的思維導(dǎo)圖(mindnode)

當(dāng)然 Flow 也有某些 Typescript 沒(méi)有的特性: typescript-vs-flowtype
React 組件類型檢查依賴于@types/react和@types/react-dom


直接上手使用試用

目錄

系列引言

類型檢查

1. 函數(shù)組件

1?? 使用ComponentNameProps 形式命名 Props 類型, 并導(dǎo)出

2?? 優(yōu)先使用FC類型來(lái)聲明函數(shù)組件

3?? 不要直接使用export default導(dǎo)出組件.

4?? 默認(rèn) props 聲明

5?? 泛型函數(shù)組件

6?? 子組件聲明

7?? Forwarding Refs

8?? 配合高階組件使用

2. 類組件

1?? 繼承 Component 或 PureComponent

2?? 使用static defaultProps定義默認(rèn) props

3?? 子組件聲明

4?? 泛型

3. 高階組件

4. Render Props

5. Context

6. 雜項(xiàng)

1?? 使用handleEvent命名事件處理器.

2?? 內(nèi)置事件處理器的類型

3?? 自定義組件暴露事件處理器類型

4?? 獲取原生元素 props 定義

5?? 不要使用 PropTypes

6?? styled-components

7?? 為沒(méi)有提供 Typescript 聲明文件的第三方庫(kù)自定義模塊聲明

8?? 為文檔生成做好準(zhǔn)備

9?? 開(kāi)啟 strict 模式

擴(kuò)展資料



1. 函數(shù)組件

React Hooks 出現(xiàn)后, 函數(shù)組件有了更多出鏡率. 由于函數(shù)組件只是普通函數(shù), 它非常容易進(jìn)行類型聲明


1?? 使用ComponentNameProps 形式命名 Props 類型, 并導(dǎo)出


2?? 優(yōu)先使用FC類型來(lái)聲明函數(shù)組件

FC是FunctionComponent的簡(jiǎn)寫(xiě), 這個(gè)類型定義了默認(rèn)的 props(如 children)以及一些靜態(tài)屬性(如 defaultProps)

import React, { FC } from "react";

/**
 * 聲明Props類型
 */
export interface MyComponentProps {
  className?: string;
  style?: React.CSSProperties;
}

export const MyComponent: FC = props => {
  return 
hello react
;
};

你也可以直接使用普通函數(shù)來(lái)進(jìn)行組件聲明, 下文會(huì)看到這種形式更加靈活:

export interface MyComponentProps {
  className?: string;
  style?: React.CSSProperties;
  // 手動(dòng)聲明children
  children?: React.ReactNode;
}

export function MyComponent(props: MyComponentProps) {
  return 
hello react
;
}


3?? 不要直接使用export default導(dǎo)出組件.

這種方式導(dǎo)出的組件在React Inspector查看時(shí)會(huì)顯示為Unknown

export default (props: {}) => {
  return 
hello react
;
};

如果非得這么做, 請(qǐng)使用命名 function 定義:

export default function Foo(props: {}) {
  return 
xxx
;
}


4?? 默認(rèn) props 聲明

實(shí)際上截止目前對(duì)于上面的使用FC類型聲明的函數(shù)組件并不能完美支持 defaultProps:

import React, { FC } from "react";

export interface HelloProps {
  name: string;
}

export const Hello: FC = ({ name }) => 
Hello {name}!
;

Hello.defaultProps = { name: "TJ" };

// ?! missing name
;

筆者一般喜歡這樣子聲明默認(rèn) props:

export interface HelloProps {
  name?: string; // 聲明為可選屬性
}

// 利用對(duì)象默認(rèn)屬性值語(yǔ)法
export const Hello: FC = ({ name = "TJ" }) => 
Hello {name}!
;

如果非得使用 defaultProps, 可以這樣子聲明

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/105586.html

相關(guān)文章

  • 兩年React老兵的總結(jié) - 如何組織React項(xiàng)目

    摘要：一個(gè)復(fù)雜的應(yīng)用都是由簡(jiǎn)單的應(yīng)用發(fā)展而來(lái)的隨著越來(lái)越多的功能加入項(xiàng)目代碼就會(huì)變得越來(lái)越難以控制本文章主要探討在大型項(xiàng)目中如何對(duì)組件進(jìn)行組織讓項(xiàng)目具備可維護(hù)性系列目錄類型檢查組件的組織樣式的管理組件的思維狀態(tài)管理目錄組件設(shè)計(jì)的基本原則基本原則高 一個(gè)復(fù)雜的應(yīng)用都是由簡(jiǎn)單的應(yīng)用發(fā)展而來(lái)的, 隨著越來(lái)越多的功能加入項(xiàng)目, 代碼就會(huì)變得越來(lái)越難以控制. 本文章主要探討在大型項(xiàng)目中如何對(duì)組件進(jìn)行組...

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

  • 前端周刊第62期：學(xué)習(xí)學(xué)習(xí)再學(xué)習(xí)

    摘要：騰訊前端技術(shù)大會(huì)和全球技術(shù)領(lǐng)導(dǎo)力峰會(huì)都于上周閉幕，我翻看了下講稿，有價(jià)值的參考還是不少。騰訊前端大會(huì)下載騰訊前端大會(huì)是由騰訊主辦，廣邀國(guó)內(nèi)外的前端大牛，有著名流行框架的作者知名前端書(shū)籍的作者工程化方面的權(quán)威等。 showImg(https://segmentfault.com/img/bVQk0r?w=757&h=427); 共 2462 字，讀完需 4 分鐘。騰訊前端技術(shù)大會(huì)（TFC...

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

  • 前端每周清單第 34 期：Vue 現(xiàn)狀盤(pán)點(diǎn)與 3.0 展望，React 代碼遷移與優(yōu)化，圖片優(yōu)化詳論

    摘要：工程實(shí)踐立足實(shí)踐，提示實(shí)際水平內(nèi)聯(lián)函數(shù)與性能很多關(guān)于性能優(yōu)化的文章都會(huì)談及內(nèi)聯(lián)函數(shù)，其也是常見(jiàn)的被詬病為拖慢性能表現(xiàn)的元兇之一不過(guò)本文卻是打破砂鍋問(wèn)到底，論證了內(nèi)聯(lián)函數(shù)并不一定就會(huì)拖慢性能，過(guò)度的性能優(yōu)化反而會(huì)有損于應(yīng)用性能。 showImg(https://segmentfault.com/img/remote/1460000011481413?w=1240&h=825); 前端每周...

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

  • 前端周刊第60期：用空格縮進(jìn)的程序員掙得更多？

    摘要：工作能力強(qiáng)的人有哪些共同特征知乎上廣受關(guān)注的問(wèn)題，跟每個(gè)人的成長(zhǎng)有關(guān)。想知道我接下來(lái)會(huì)寫(xiě)些什么歡迎訂閱我的掘金專欄或知乎專欄前端周刊讓你在前端領(lǐng)域跟上時(shí)代的腳步。 showImg(https://segmentfault.com/img/bVPuPc?w=640&h=360); David Robinson 從 Stack Overflow 年度開(kāi)發(fā)者調(diào)查中發(fā)現(xiàn)的結(jié)論，使用空格縮進(jìn)比使...

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

  • 2017 年崛起的 JS 項(xiàng)目

    摘要：通過(guò)對(duì)比各項(xiàng)目過(guò)去個(gè)月在上新增數(shù)量，來(lái)評(píng)估其在年度的受關(guān)注程度，進(jìn)而選出年度領(lǐng)域崛起的明星項(xiàng)目。也許正因?yàn)樯鲜鲎詈笠稽c(diǎn)，在中國(guó)擁有大量的擁躉。不僅被中國(guó)最大的電商平臺(tái)阿里巴巴使用，也獲得了與這些公司青睞。 共 4741 字，讀完需 8 分鐘，速讀 2 分鐘。我有幸參與了該項(xiàng)目的部分中文版翻譯、校對(duì)工作，感謝 Sacha Grief，Micheal Ramberu 的統(tǒng)計(jì)整理，以及 Fr...

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

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

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<