成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專(zhuān)欄INFORMATION COLUMN

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

tuomao / 645人閱讀

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

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

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

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

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

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

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

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

$$typeof: Symbol(react.element)

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

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

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

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

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

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

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

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

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

簡(jiǎn)單來(lái)說(shuō)，即使你不傳props，react也會(huì)在組件實(shí)例化后自動(dòng)把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í)例化之后才會(huì)被掛載到實(shí)例上面。那如果你希望在constructor內(nèi)使用，你就需要將props傳入super():

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

// 當(dāng)執(zhí)行super的時(shí)候
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，否則你也不能使用這種寫(xiě)法。

參考：
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)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/103079.html

相關(guān)文章

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

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

    princekin 評(píng)論0 收藏0

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

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

    roadtogeek 評(píng)論0 收藏0

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

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

    leon 評(píng)論0 收藏0

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

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

    liukai90 評(píng)論0 收藏0

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

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

    yintaolaowanzi 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<