成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

關(guān)于React的一些小知識

tuomao / 591人閱讀

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

關(guān)于React的一些小知識

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

以下全部來自于https://overreacted.io，需要更詳細(xì)解釋的可以去里面找相關(guān)文章。
1. 關(guān)于lint

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

所以lint并非是完美的開發(fā)規(guī)范，當(dāng)然它能夠規(guī)范團(tuán)隊(duì)的代碼并且顯著的幫你降低bug的出現(xiàn)，但是你需要知道你的代碼被標(biāo)紅是為什么，該條規(guī)則是否是絕對正確的并且能降低bug？如果不是，你完全可以把它去掉。

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

如果你把一個組件實(shí)例打印出來，你會發(fā)現(xiàn)除了我們熟悉的props children ref等屬性，還有一個

$$typeof: Symbol(react.element)

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

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

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

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

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

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

首先，直接判斷是函數(shù)還是類是很困難的，即使你能夠tell a class from a function in JavaScript，被babel轉(zhuǎn)譯后就行不通了，因?yàn)轭愐矔晦D(zhuǎn)譯為函數(shù)。

下面直接出結(jié)論：由于當(dāng)你寫組件時一定是extends React.Component的形式，所以只要在Component上定義一個特殊字段表示這是類組件就可以了。不能是類的靜態(tài)屬性，因?yàn)橛行┺D(zhuǎn)碼器不能正確復(fù)制靜態(tài)屬性，所以需要設(shè)置為實(shí)例屬性，也就是Component.prototype.isReactComponent = {};。

isReactComponent被設(shè)置為{}而不是true是由于早期的Jest會在某些情況下刪除基本類型的屬性。
用Page.prototype instanceof React.Component來判斷行不行？不太行，因?yàn)橛锌赡苣愕捻?xiàng)目中有兩個react包，不管是不是故意的。
4. super(props)到底要不要傳入props 
class Checkbox extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isOn: true };
  }
  // ...
}

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

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

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

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

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

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

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

因?yàn)?b>@babel/plugin-proposal-class-properties幫你提供了正確傳遞參數(shù)的默認(rèn)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)?

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

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

相關(guān)文章

  • 前端資源系列（4）-前端學(xué)習(xí)資源分享&前端面試資源匯總

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

    princekin 評論0 收藏0

  • [譯] 前端攻略-從路人甲到英雄無敵二：JavaScript 與不斷演化的框架

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

    roadtogeek 評論0 收藏0

  • react入門學(xué)習(xí)筆記（一）

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

    leon 評論0 收藏0

  • 正在暑假中的《課多周刊》(第1期)

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

    liukai90 評論0 收藏0

  • 正在暑假中的《課多周刊》(第1期)

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

    yintaolaowanzi 評論0 收藏0

發(fā)表評論

0條評論

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