React - 修改children(下)

vvpvvp 發布于2019-08-19 17:33 / 1999人閱讀

摘要：倘若在之后修改對象屬性，會有兩種結果若在非下，不會報錯，但是任何修改都是不起作用的。總結開發過程中還是用非壓縮版的好，有利于及時發現問題。

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

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

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的條件是可預計得到的常數結果，那么就會忽略掉沒用的if/else分支。所以 "development" !== "production" 即 false在壓縮時候就被清理掉了。
UglifyJS詳細的壓縮規則介紹看這里：解讀UglifyJS(四)

為啥在開發環境下要使用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.

在開發過程中提示報錯，在線上環境不提示，有點JAVA編譯的味道，編譯時校驗信息，提示警告和錯誤，在執行中不校驗。
另外，Object.freeze()運行相對較慢，所以線上去掉這個操作也是為了提高性能。
freeze vs seal vs normal 這個鏈接有測試的栗子。

總結：開發過程中還是用非壓縮版的React好，有利于及時發現問題。
完成！！！

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

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

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

React - 修改children(上)

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

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

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

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

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

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

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

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

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

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