国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

scola666 / 3271人閱讀

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

系列引言

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

由于篇幅太長, 所以拆分為幾篇文章. 主要有以下幾個主題:

01 類型檢查

02 組件的組織

[03 樣式的管理]()

[04 組件的思維]()

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

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

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

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

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

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


直接上手使用試用

目錄

系列引言

類型檢查

1. 函數(shù)組件

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

2?? 優(yōu)先使用FC類型來聲明函數(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. 雜項

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

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

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

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

5?? 不要使用 PropTypes

6?? styled-components

7?? 為沒有提供 Typescript 聲明文件的第三方庫自定義模塊聲明

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

9?? 開啟 strict 模式

擴(kuò)展資料



1. 函數(shù)組件

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


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


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

FC是FunctionComponent的簡寫, 這個類型定義了默認(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ù)來進(jìn)行組件聲明, 下文會看到這種形式更加靈活:

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

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


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

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

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

如果非得這么做, 請使用命名 function 定義:

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


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

實(shí)際上截止目前對于上面的使用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; // 聲明為可選屬性
}

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

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

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

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/105586.html

相關(guān)文章

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

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

    hoohack 評論0 收藏0

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

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

    tinylcy 評論0 收藏0

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

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

    CoderStudy 評論0 收藏0

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

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

    Forest10 評論0 收藏0

  • 2017 年崛起的 JS 項目

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

    gaara 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<