React - 修改children(下)

vvpvvp 發(fā)布于2019-08-19 17:33 / 2007人閱讀

摘要：倘若在之后修改對象屬性，會有兩種結果若在非下，不會報錯，但是任何修改都是不起作用的?？偨Y開發(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掉了，說明壓縮工具確實了得。
這里重點是看壓縮前的，有兩行代碼很關鍵：

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

查看一下MDN關于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之后修改對象屬性，會有兩種結果：
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的朋友應該知道，UglifyJS在壓縮中，如果遇到if的條件是可預計得到的常數(shù)結果，那么就會忽略掉沒用的if/else分支。所以 "development" !== "production" 即 false在壓縮時候就被清理掉了。
UglifyJS詳細的壓縮規(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 這個鏈接有測試的栗子。

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

云服務器 GPU云服務器 children linux下修改磁盤名稱 linux下修改磁盤序列號 linux下修改硬盤序列號

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

轉載請注明本文地址：http://systransis.cn/yun/78618.html

React - 修改children(上)

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

EsgynChina 2019-08-19 17:31 評論0 收藏0
前端開發(fā)中，滑動展現(xiàn)日志麻煩？這個組件來幫你

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

Clect 2019-08-23 14:11 評論0 收藏0
React + Ramda: 函數(shù)式編程嘗鮮

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

tomener 2019-08-22 18:34 評論0 收藏0
精益 React 學習指南（Lean React）- 4.2 react patterns

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

Berwin 2019-08-19 18:39 評論0 收藏0
With TypeScript 2.8+ ：更好的 React 組件開發(fā)模式

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

simon_chen 2019-08-22 17:58 評論0 收藏0