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

資訊專欄INFORMATION COLUMN

React - 修改children(下)

vvpvvp / 2054人閱讀

摘要：倘若在之后修改對(duì)象屬性，會(huì)有兩種結(jié)果若在非下，不會(huì)報(bào)錯(cuò)，但是任何修改都是不起作用的。總結(jié)開發(fā)過程中還是用非壓縮版的好，有利于及時(shí)發(fā)現(xiàn)問題。

在 React - 修改children(上) 中我提到了React在遍歷children過程中是不允許修改其中的React Element的，這里我要做點(diǎn)補(bǔ)充，就是有個(gè)前提是：使用的React是非壓縮版的，也就是說不是使用react.min.js這種，使用react.min.js則不會(huì)報(bào)錯(cuò)。

查看React非壓縮版的源碼發(fā)現(xiàn)，里邊有許多這樣的代碼塊,而在壓縮版中是沒有的。

if ("development" !== "production") {
  ......
}

舉個(gè)例子 React v0.14.4 (注釋被我去掉了)

react.js

var ReactElement = function (type, key, ref, self, source, owner, props) {
  var element = {
    $$typeof: REACT_ELEMENT_TYPE,
    type: type,
    key: key,
    ref: ref,
    props: props,
    _owner: owner
  };

  if ("development" !== "production") {
    ......
    Object.freeze(element.props);
    Object.freeze(element);
  }

  return element;
};

react.min.js

u = function(e, t, n, r, o, i, u) {
  var s = {
    $$typeof: a,
    type: e,
    key: t,
    ref: n,
    props: u,
    _owner: i
  };
  return s
};

對(duì)比壓縮前后，由if ("development" !== "production") {} 包裹的代碼塊被直接strip掉了，說明壓縮工具確實(shí)了得。
這里重點(diǎn)是看壓縮前的，有兩行代碼很關(guān)鍵：

Object.freeze(element.props);
Object.freeze(element);

查看一下MDN關(guān)于Object.freeze的介紹：
The Object.freeze() method freezes an object: that is, prevents new properties from being added to it; prevents existing properties from being removed; and prevents existing properties, or their enumerability, configurability, or writability, from being changed. In essence the object is made effectively immutable. The method returns the object being frozen.
意思是說freeze防止了對(duì)象被修改，包括增刪改屬性。倘若在freeze之后修改對(duì)象屬性，會(huì)有兩種結(jié)果：
1若在非strict mode下，不會(huì)報(bào)錯(cuò)，但是任何修改都是不起作用的。
2若在strict mode 下，會(huì)throw TypeErrors。

看到這里可以知道，為啥在使用非壓縮版的時(shí)候修改React Element時(shí)會(huì)提示報(bào)錯(cuò)，正是因?yàn)樵搶?duì)象被freeze了；相反在壓縮版中因?yàn)闆]有freeze，所以能夠成功修改，不會(huì)報(bào)錯(cuò)。

談到這里再順便提下兩點(diǎn)：

壓縮時(shí)怎么把if ("development" !== "production") {} 去掉的？
React的README提及到：

To use React in production mode, set the environment variable NODE_ENV to production. A minifier that performs dead-code elimination such as UglifyJS is recommended to completely remove the extra code present in development mode.
知道UglifyJS的朋友應(yīng)該知道，UglifyJS在壓縮中，如果遇到if的條件是可預(yù)計(jì)得到的常數(shù)結(jié)果，那么就會(huì)忽略掉沒用的if/else分支。所以 "development" !== "production" 即 false在壓縮時(shí)候就被清理掉了。
UglifyJS詳細(xì)的壓縮規(guī)則介紹看這里：解讀UglifyJS(四)

為啥在開發(fā)環(huán)境下要使用Object.freeze()，引stackoverflow中Sean Vieira的一句話：
We use Object.freeze to freeze the router and route objects for non-production environments to ensure the immutability of these objects.

在開發(fā)過程中提示報(bào)錯(cuò)，在線上環(huán)境不提示，有點(diǎn)JAVA編譯的味道，編譯時(shí)校驗(yàn)信息，提示警告和錯(cuò)誤，在執(zhí)行中不校驗(yàn)。
另外，Object.freeze()運(yùn)行相對(duì)較慢，所以線上去掉這個(gè)操作也是為了提高性能。
freeze vs seal vs normal 這個(gè)鏈接有測(cè)試的栗子。

總結(jié)：開發(fā)過程中還是用非壓縮版的React好，有利于及時(shí)發(fā)現(xiàn)問題。
完成！??！

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

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

相關(guān)文章

  • React - 修改children(上)

    摘要：于是考慮通過直接對(duì)進(jìn)行修改屬性的方法來達(dá)到我們的目的，修改組件。運(yùn)行后驚呆了，報(bào)錯(cuò)了意思是說屬性是不能擴(kuò)展的，即不能修改。于是，嘗試修改代碼如下運(yùn)行之后，成了當(dāng)然擴(kuò)展的話可以根據(jù)判斷或者其他要求來相應(yīng)的修改屬性，此處統(tǒng)一將所有的變?yōu)榧t色。 React入門，大神輕噴哈^_^下面的代碼是建立在React 0.14.*版本的今天在嘗試封裝React component的時(shí)候碰到了幾個(gè)問題，猜...

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

  • 前端開發(fā)中，滑動(dòng)展現(xiàn)日志麻煩？這個(gè)組件來幫你

    摘要：使用者需要做的，就是完成回調(diào)函數(shù)里的邏輯即可，十分簡(jiǎn)單。如果你需要異步生成，你需要設(shè)置參數(shù)為元素展現(xiàn)時(shí)的回調(diào)函數(shù)，接收和作為參數(shù)。多次展現(xiàn)時(shí)，是否每次都觸發(fā)回調(diào)函數(shù)組件里監(jiān)聽滑動(dòng)事件時(shí)，用了。 showImg(https://segmentfault.com/img/bVbloJf?w=620&h=480); 寫在前面 在這個(gè)數(shù)據(jù)無比重要的時(shí)代，用戶在網(wǎng)頁上面的一系列操作，都需要用數(shù)據(jù)...

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

  • React + Ramda: 函數(shù)式編程嘗鮮

    摘要：每當(dāng)?shù)闹蹈淖兒?，我們只需要重新調(diào)用方法即可現(xiàn)在，讓我們來實(shí)現(xiàn)一個(gè)類似風(fēng)格的歸約函數(shù)，以不斷的遞增。歸約函數(shù)是不允許修改當(dāng)前狀態(tài)的，所有最簡(jiǎn)單的實(shí)現(xiàn)方式就是。 原文：Functional Components with React stateless functions and Ramda 閱讀本文需要的知識(shí)儲(chǔ)備： 函數(shù)式編程基本概念（組合、柯里化、透鏡） React 基本知識(shí)（組件、...

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

  • 精益 React 學(xué)習(xí)指南 （Lean React）- 4.2 react patterns

    摘要：另外一點(diǎn)是組件應(yīng)該盡量保證獨(dú)立性，避免和外部的耦合，使用全局事件造成了和外部事件的耦合。明確的職責(zé)分配也增加了應(yīng)用的確定性明確只有組件能夠知道狀態(tài)數(shù)據(jù)，且是對(duì)應(yīng)部分的數(shù)據(jù)。 書籍完整目錄 4.2 react patterns 修改 Props Immutable data representation 確定性 在 getInitialState 中使用 props 私有狀態(tài)和...

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

  • With TypeScript 2.8+ ：更好的 React 組件開發(fā)模式

    摘要：近兩年來一直在關(guān)注開發(fā)，最近也開始全面應(yīng)用。首先，我們從無狀態(tài)組件開始。渲染回調(diào)模式有一種重用組件邏輯的設(shè)計(jì)方式是把組件的寫成渲染回調(diào)函數(shù)或者暴露一個(gè)函數(shù)屬性出來。最后，我們將這個(gè)回調(diào)函數(shù)的參數(shù)聲明為一個(gè)獨(dú)立的類型。 近兩年來一直在關(guān)注 React 開發(fā)，最近也開始全面應(yīng)用 TypeScript 。國(guó)內(nèi)有很多講解 React 和 TypeScript 的教程，但如何將 TypeScri...

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

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

0條評(píng)論

閱讀需要支付1元查看
<