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

資訊專欄INFORMATION COLUMN

兩年React老兵的總結 - 類型檢查篇

scola666 / 3265人閱讀

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

系列引言

最近準備培訓新人, 為了方便新人較快入手 React 開發并編寫高質量的組件代碼, 我根據自己的實踐經驗對React 組件設計的相關實踐和規范整理了一些文檔, 將部分章節分享了出來. 由于經驗有限, 文章可能會有某些錯誤, 希望大家指出, 互相交流.

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

01 類型檢查

02 組件的組織

[03 樣式的管理]()

[04 組件的思維]()

[05 狀態管理]()

文章首發于掘金平臺專欄
類型檢查

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

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

建議通過官方文檔來學習 Typescript. 筆者此前也整理了 Typescript 相關的思維導圖(mindnode)

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


直接上手使用試用

目錄

系列引言

類型檢查

1. 函數組件

1?? 使用ComponentNameProps 形式命名 Props 類型, 并導出

2?? 優先使用FC類型來聲明函數組件

3?? 不要直接使用export default導出組件.

4?? 默認 props 聲明

5?? 泛型函數組件

6?? 子組件聲明

7?? Forwarding Refs

8?? 配合高階組件使用

2. 類組件

1?? 繼承 Component 或 PureComponent

2?? 使用static defaultProps定義默認 props

3?? 子組件聲明

4?? 泛型

3. 高階組件

4. Render Props

5. Context

6. 雜項

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

2?? 內置事件處理器的類型

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

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

5?? 不要使用 PropTypes

6?? styled-components

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

8?? 為文檔生成做好準備

9?? 開啟 strict 模式

擴展資料



1. 函數組件

React Hooks 出現后, 函數組件有了更多出鏡率. 由于函數組件只是普通函數, 它非常容易進行類型聲明


1?? 使用ComponentNameProps 形式命名 Props 類型, 并導出


2?? 優先使用FC類型來聲明函數組件

FC是FunctionComponent的簡寫, 這個類型定義了默認的 props(如 children)以及一些靜態屬性(如 defaultProps)

import React, { FC } from "react";

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

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

你也可以直接使用普通函數來進行組件聲明, 下文會看到這種形式更加靈活:

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

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


3?? 不要直接使用export default導出組件.

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

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

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

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


4?? 默認 props 聲明

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

import React, { FC } from "react";

export interface HelloProps {
  name: string;
}

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

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

// ?! missing name
;

筆者一般喜歡這樣子聲明默認 props:

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

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

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/105586.html

相關文章

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

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

    hoohack 評論0 收藏0

  • 前端周刊第62期：學習學習再學習

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

    tinylcy 評論0 收藏0

  • 前端每周清單第 34 期：Vue 現狀盤點與 3.0 展望，React 代碼遷移與優化，圖片優化詳論

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

    CoderStudy 評論0 收藏0

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

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

    Forest10 評論0 收藏0

  • 2017 年崛起的 JS 項目

    摘要：通過對比各項目過去個月在上新增數量，來評估其在年度的受關注程度，進而選出年度領域崛起的明星項目。也許正因為上述最后一點，在中國擁有大量的擁躉。不僅被中國最大的電商平臺阿里巴巴使用，也獲得了與這些公司青睞。 共 4741 字，讀完需 8 分鐘，速讀 2 分鐘。我有幸參與了該項目的部分中文版翻譯、校對工作，感謝 Sacha Grief，Micheal Ramberu 的統計整理，以及 Fr...

    gaara 評論0 收藏0

發表評論

0條評論

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