精讀《編寫有彈性的組件》

sunsmell 發(fā)布于2019-08-26 13:39 / 982人閱讀

摘要：引言讀了精讀完全指南之后，是不是對(duì)的理解又加深了一些呢這次通過一文，了解一下什么是有彈性的組件，以及為什么可以做到這一點(diǎn)?？偨Y(jié)了彈性組件具有的四個(gè)特征不要阻塞數(shù)據(jù)流。不要有單例組件。以上規(guī)則不僅適用于，它適用于所有組件。

1. 引言

讀了精讀《useEffect 完全指南》之后，是不是對(duì) Function Component 的理解又加深了一些呢？

這次通過 Writing Resilient Components 一文，了解一下什么是有彈性的組件，以及為什么 Function Component 可以做到這一點(diǎn)。

2. 概述

相比代碼的 Lint 或者 Prettier，或許我們更應(yīng)該關(guān)注代碼是否具有彈性。

Dan 總結(jié)了彈性組件具有的四個(gè)特征：

不要阻塞數(shù)據(jù)流。

時(shí)刻準(zhǔn)備好渲染。

不要有單例組件。

隔離本地狀態(tài)。

以上規(guī)則不僅適用于 React，它適用于所有 UI 組件。

不要阻塞渲染的數(shù)據(jù)流

不阻塞數(shù)據(jù)流的意思，就是 不要將接收到的參數(shù)本地化， 或者 使組件完全受控。

在 Class Component 語(yǔ)法下，由于有生命周期的概念，在某個(gè)生命周期將 props 存儲(chǔ)到 state 的方式屢見不鮮。 然而一旦將 props 固化到 state，組件就不受控了：

class Button extends React.Component {
  state = {
    color: this.props.color
  };
  render() {
    const { color } = this.state; //

云服務(wù)器 GPU云服務(wù)器 asp的組件有哪些哪里有免費(fèi)的彈性云主機(jī) 彈性云服務(wù)器不包含哪個(gè)組件有彈性

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

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

相關(guān)文章

精讀《怎么用 React Hooks 造輪子》

摘要：可以看到，這樣不僅沒有占用組件自己的，也不需要手寫回調(diào)函數(shù)進(jìn)行處理，這些處理都?jí)嚎s成了一行。效果通過拿到周期才執(zhí)行的回調(diào)函數(shù)。實(shí)現(xiàn)等價(jià)于的回調(diào)僅執(zhí)行一次時(shí)，因此直接把回調(diào)函數(shù)拋出來即可。 1 引言上周的精讀《React Hooks》已經(jīng)實(shí)現(xiàn)了對(duì) React Hooks 的基本認(rèn)知，也許你也看了 React Hooks 基本實(shí)現(xiàn)剖析（就是數(shù)組），但理解實(shí)現(xiàn)原理就可以用好了嗎？學(xué)的是...

Shihira 2019-08-26 13:22 評(píng)論0 收藏0
精讀《Serverless 給前端帶來了什么》

摘要：前端框架總是帶入后端思維，而則是把前端思維帶入了后端運(yùn)維。前端同學(xué)對(duì)應(yīng)該尤為激動(dòng)。而帶來了進(jìn)一步優(yōu)化的空間。當(dāng)服務(wù)器面臨攻擊重啟磁盤故障時(shí)，打開復(fù)雜的工作臺(tái)或登陸后一通操作才能恢復(fù)。 1. 引言 Serverless 是一種無服務(wù)器架構(gòu)，讓用戶無需關(guān)心程序運(yùn)行環(huán)境、資源及數(shù)量，只要將精力 Focus 到業(yè)務(wù)邏輯上的技術(shù)。現(xiàn)在公司已經(jīng)實(shí)現(xiàn) DevOps 化，正在向 Serverles...

wizChen 2019-08-26 13:35 評(píng)論0 收藏0
精讀《Function VS Class 組件》

摘要：未來可能成為官方之一。討論地址是精讀組件如果你想?yún)⑴c討論，請(qǐng)點(diǎn)擊這里，每周都有新的主題，周末或周一發(fā)布。前端精讀幫你篩選靠譜的內(nèi)容。 1. 引言為什么要了解 Function 寫法的組件呢？因?yàn)樗谧兊迷絹碓街匾?那么 React 中 Function Component 與 Class Component 有何不同？ how-are-function-components-di...

FWHeart 2019-08-26 13:38 評(píng)論0 收藏0
精讀《Scheduling in React》

摘要：調(diào)度系統(tǒng)，支持不同渲染優(yōu)先級(jí)，對(duì)進(jìn)行調(diào)度。調(diào)度帶來的限制調(diào)度系統(tǒng)也存在兩個(gè)問題。調(diào)度系統(tǒng)能力有限，只能在瀏覽器提供的能力范圍內(nèi)進(jìn)行調(diào)度，而無法影響比如的渲染回收周期。精讀關(guān)于調(diào)度系統(tǒng)的剖析，可以讀深入剖析這篇文章，感謝我們團(tuán)隊(duì)的淡蒼提供。 1. 引言這次介紹的文章是 scheduling-in-react，簡(jiǎn)單來說就是 React 的調(diào)度系統(tǒng)，為了得到更順滑的用戶體驗(yàn)。畢竟前端做到...

LeexMuller 2019-08-23 16:56 評(píng)論0 收藏0
精讀《如何編譯前端項(xiàng)目與組件》

摘要：歷史上由于是作為的替代品出現(xiàn)，當(dāng)時(shí)要解決的問題是處理瀏覽器兼容問題，打包或，做一些公共資源替換，雪碧圖等，最后可以順帶合并到一個(gè)文件，但模塊化功能遠(yuǎn)遠(yuǎn)比弱，基本上只能合并，但不能理解模塊概念。 1 引言說到前端編譯方案，也就是如何打包項(xiàng)目，如何編譯組件，可選方案有很多，比如：通過 webpack / parcel / gulp 構(gòu)建項(xiàng)目。通過 parcel / gulp / b...

jiekechoo 2019-08-23 14:52 評(píng)論0 收藏0