關于React的一些小知識

tuomao 發布于2019-08-23 16:29 / 585人閱讀

摘要：關于的一些小知識這里搜集了幾個關于的零散知識，有些雖然知道了也不一定能幫你寫出更好的代碼，但能夠擴展一下知識。被設置為而不是是由于早期的會在某些情況下刪除基本類型的屬性。

關于React的一些小知識

這里搜集了幾個關于react的零散知識，有些雖然知道了也不一定能幫你寫出更好的代碼，但能夠擴展一下知識。

以下全部來自于https://overreacted.io，需要更詳細解釋的可以去里面找相關文章。

1. 關于lint

eslint有一條規則是不允許在componentDidMount中setState，但實際上確實有一種情況需要這么做：計算出渲染好的DOM尺寸然后執行后續操作。如果某種行為是需要被限制的，那么通常來說react一定會警告你或者拒絕執行：例如組件卸載后執行setState。

所以lint并非是完美的開發規范，當然它能夠規范團隊的代碼并且顯著的幫你降低bug的出現，但是你需要知道你的代碼被標紅是為什么，該條規則是否是絕對正確的并且能降低bug？如果不是，你完全可以把它去掉。

2. $$typeof: Symbol(react.element)

如果你把一個組件實例打印出來，你會發現除了我們熟悉的props children ref等屬性，還有一個

$$typeof: Symbol(react.element)

那么這個$$typeof是干嘛的呢？實際上是用于安全方面的。

假設你的站點不安全，然后使得用戶可以存儲json格式的數據，那么當你輸出數據時這段json可能會被處理為對象，如果這個對象符合React Element的定義就會形成xss攻擊。

所以在react 0.14之后，react在每個React Element上都附上了這個$$typeof: Symbol(react.element)屬性，由于Symbol不能在json中進行傳輸所以沒有辦法用這種方式偽造React Element。

瀏覽器不支持Symbol怎么辦？那就沒辦法獲得這種保護了，這種情況下react為了一致性考慮會將$$typeof設置為一個數字：0xeac7 （0xeac7看起來像react）。

3. react怎么知道你的組件是函數組件還是類組件？

如果一個組件是函數組件，那么可以直接用Page({ title: "hello" })來創建，但是如果是類組件那么就需要用new操作符來實例化，那么react是怎么區分這兩種組件的呢？

首先，直接判斷是函數還是類是很困難的，即使你能夠tell a class from a function in JavaScript，被babel轉譯后就行不通了，因為類也會被轉譯為函數。

下面直接出結論：由于當你寫組件時一定是extends React.Component的形式，所以只要在Component上定義一個特殊字段表示這是類組件就可以了。不能是類的靜態屬性，因為有些轉碼器不能正確復制靜態屬性，所以需要設置為實例屬性，也就是Component.prototype.isReactComponent = {};。

isReactComponent被設置為{}而不是true是由于早期的Jest會在某些情況下刪除基本類型的屬性。

用Page.prototype instanceof React.Component來判斷行不行？不太行，因為有可能你的項目中有兩個react包，不管是不是故意的。

4. super(props)到底要不要傳入props

class Checkbox extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isOn: true };
  }
  // ...
}

簡單來說，即使你不傳props，react也會在組件實例化后自動把props掛載上去，這也是為什么你不傳props但是你依然能在組件內其他地方使用this.props的原因：

 // Inside React
 const instance = new YourComponent(props);
 instance.props = props;

但是這種情況你不能在constructor內使用this.props，因為props只有在實例化之后才會被掛載到實例上面。那如果你希望在constructor內使用，你就需要將props傳入super():

class Checkbox extends React.Component {
  constructor(props) {
    super(props);
    console.log(this.props);
  }
  // ...
}

// 當執行super的時候
class Component {
  constructor(props) {
    this.props = props;
    // ...
  }
}

但是為什么能夠在下面這種形式下使用this.props:

class Checkbox extends React.Component {
  state = { isOn: this.props.isOn };
  // ...
}

因為@babel/plugin-proposal-class-properties幫你提供了正確傳遞參數的默認constructor，否則你也不能使用這種寫法。

參考：
Writing Resilient Components
Why Do React Elements Have a $$typeof Property?
How Does React Tell a Class from a Function?
Why Do We Write super(props)?

云服務器 GPU云服務器關于網絡安全的小知識 ddos一些比較小的網站關于網絡安全的知識關于云計算的小故事

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

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

前端資源系列（4）-前端學習資源分享&前端面試資源匯總

摘要：特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。本以為自己收藏的站點多，可以很快搞定，沒想到一入匯總深似海。還有很多不足&遺漏的地方，歡迎補充。有錯誤的地方，還請斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應和斧正，會及時更新，平時業務工作時也會不定期更...

princekin 2019-08-20 11:28 評論0 收藏0
[譯] 前端攻略-從路人甲到英雄無敵二：JavaScript 與不斷演化的框架

摘要：一般來說，聲明式編程關注于發生了啥，而命令式則同時關注與咋發生的。聲明式編程可以較好地解決這個問題，剛才提到的比較麻煩的元素選擇這個動作可以交托給框架或者庫區處理，這樣就能讓開發者專注于發生了啥，這里推薦一波與。本文翻譯自FreeCodeCamp的from-zero-to-front-end-hero-part。繼續譯者的廢話，這篇文章是前端攻略-從路人甲到英雄無敵的下半部分，在...

roadtogeek 2019-08-19 18:25 評論0 收藏0
react入門學習筆記（一）

摘要：選擇的主要原因大概是因為該框架出現較早，感覺上會相對成熟，日后學習中遇到問題想要查找答案相對簡單一些，對，就是這么簡單。多說無益，接下來開始的學習，我按照我學習中帶著的問題來一一解答，完成我的入門筆記。主要是針對前端的組件化開發。這兩天得空，特意來折騰了以下時下火熱的前端框架react，至于為什么選react,作為一個初學者react和vue在技術上的優劣我無權評論，也就不妄加評論了...

leon 2019-08-20 18:01 評論0 收藏0
正在暑假中的《課多周刊》(第1期)

摘要：正在暑假中的課多周刊第期我們的微信公眾號，更多精彩內容皆在微信公眾號，歡迎關注。若有幫助，請把課多周刊推薦給你的朋友，你的支持是我們最大的動力。原理微信熱更新方案漲知識了，熱更新是以后的標配。正在暑假中的《課多周刊》(第1期) 我們的微信公眾號：fed-talk，更多精彩內容皆在微信公眾號，歡迎關注。若有幫助，請把課多周刊推薦給你的朋友，你的支持是我們最大的動力。遠上寒山石徑...

liukai90 2019-08-29 11:04 評論0 收藏0
正在暑假中的《課多周刊》(第1期)

摘要：正在暑假中的課多周刊第期我們的微信公眾號，更多精彩內容皆在微信公眾號，歡迎關注。若有幫助，請把課多周刊推薦給你的朋友，你的支持是我們最大的動力。原理微信熱更新方案漲知識了，熱更新是以后的標配。正在暑假中的《課多周刊》(第1期) 我們的微信公眾號：fed-talk，更多精彩內容皆在微信公眾號，歡迎關注。若有幫助，請把課多周刊推薦給你的朋友，你的支持是我們最大的動力。遠上寒山石徑...

yintaolaowanzi 2019-08-20 10:11 評論0 收藏0