亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

React - 修改children(下)

vvpvvp / 2074人閱讀

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

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

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

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

舉個例子 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
};

對比壓縮前后，由if ("development" !== "production") {} 包裹的代碼塊被直接strip掉了，說明壓縮工具確實了得。
這里重點是看壓縮前的，有兩行代碼很關(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防止了對象被修改，包括增刪改屬性。倘若在freeze之后修改對象屬性，會有兩種結(jié)果：
1若在非strict mode下，不會報錯，但是任何修改都是不起作用的。
2若在strict mode 下，會throw TypeErrors。

看到這里可以知道，為啥在使用非壓縮版的時候修改React Element時會提示報錯，正是因為該對象被freeze了；相反在壓縮版中因為沒有freeze，所以能夠成功修改，不會報錯。

談到這里再順便提下兩點：

壓縮時怎么把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ù)計得到的常數(shù)結(jié)果，那么就會忽略掉沒用的if/else分支。所以 "development" !== "production" 即 false在壓縮時候就被清理掉了。
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ā)過程中提示報錯，在線上環(huán)境不提示，有點JAVA編譯的味道，編譯時校驗信息，提示警告和錯誤，在執(zhí)行中不校驗。
另外，Object.freeze()運行相對較慢，所以線上去掉這個操作也是為了提高性能。
freeze vs seal vs normal 這個鏈接有測試的栗子。

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

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

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

相關(guān)文章

  • React - 修改children(上)

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

    EsgynChina 評論0 收藏0

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

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

    Clect 評論0 收藏0

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

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

    tomener 評論0 收藏0

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

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

    Berwin 評論0 收藏0

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

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

    simon_chen 評論0 收藏0

發(fā)表評論

0條評論

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