在 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好,有利于及时发现问题。
完成!!!

React - 修改children(下)相关推荐

  1. [react] 请描述下你对react的新特性Hooks的理解?它有哪些应用场景?

    [react] 请描述下你对react的新特性Hooks的理解?它有哪些应用场景? 在 React 中使用 class 继承 React.Component,就可以在类里面使用各种各样的钩子函数,比如 ...

  2. 三级数据库还是linux好,08年计算机三级数据库辅导:如何修改Linux下MySQL5.0的默认连接数...

    08年计算机三级数据库辅导:如何修改Linux下MySQL5.0的默认连接数 分类:计算机等级| 更新时间:2008-08-25| 来源:教育联展网 这段时间服务器崩溃2次,一直没有找到原因,今天看到 ...

  3. [react] 请描述下事件在react中的处理方式是什么?

    [react] 请描述下事件在react中的处理方式是什么? 所有时间都挂载到 document 上,然后捕获对应的 dom. 类似事件委托 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容 ...

  4. [react] 简要描述下你知道的react工作原理是什么?

    [react] 简要描述下你知道的react工作原理是什么? 我理解的核心部分: 通过虚拟DOM表达真实DOM 通过数据驱动更新虚拟DOM进而更新真实DOM(MVVM) 有一套完整并且合理的 DOM ...

  5. [react] props.children.map和js的map有什么区别?为什么优先选择react的?

    [react] props.children.map和js的map有什么区别?为什么优先选择react的? React.Children.map 能够处理未知数据类型,即使 React.childre ...

  6. [react] 请说下react组件更新的机制是什么

    [react] 请说下react组件更新的机制是什么 靠事务批量更新 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论 主目录 与歌谣一起通关前端面试题

  7. 自动修改linux下/etc/sysconfig/network-scripts/ifcfg-ethX网卡文件的脚本

    此脚本修改linux下/etc/sysconfig/network-scripts/ifcfg-ethX网卡文件中的网卡一.网卡二的IP地址(IPADDR).子网掩码(NETMASK)信息 #!/bi ...

  8. 修改windows10下C:\Windows\System32\drivers\etc\的hosts文件权限

    修改windows10下C:\Windows\System32\drivers\etc\的hosts文件权限 转:https://blog.csdn.net/qq_33703550/article/d ...

  9. 插入、删除、修改指向下一节点和下下一节点链表

    插入.删除.修改指向下一节点和下下一节点链表 操作一个链表,链表中的节点有两个指针,一个指向下一个节点, 一个指向下下一个节点,如果下一个节点或者下下一个节点为空,则为null. 操作为插入,删除,修 ...

  10. 如何修改Gnome下的主题中输入法的颜色

    如何修改Gnome下主题中输入法的颜色 最近换了个主题,shell很漂亮,但是输入法非常的神经..因为背景色和字的颜色是一致的,打字的时候根本看不清字~~ 博主用的是Rime,ibus输入法 花了两个 ...

最新文章

  1. Java对二叉树的操作
  2. CSS之media query模板
  3. webservice学习总结(一)-- WebService相关概念介绍
  4. SpringBoot入门-自动配置原理
  5. SpringCloud集成Security安全(Config配置中心)
  6. python脚本画pie饼图_小白学Python(11)——pyecharts,绘制饼图 Pie
  7. java添加缓存_实现 Java 本地缓存的方法解析
  8. 74LS系列芯片简记——00-09
  9. 拼多多砍价小程序源码-带搭建教程-可开流量主
  10. python一般用什么平台好_python哪几个平台好用
  11. 四色定理c语言,阅读下列程序说明和C代码,将应填入(n)处。【程序5说明】著名的四色定理指出..._考试资料网...
  12. win7桌面上计算机图标名称怎么改,win7电脑桌面图标排列方式如何设置 win7电脑桌面图标排列方法...
  13. mysql清空表分区数据恢复_清空表数据恢复 mysql恢复某个表数据
  14. 10、自上而下的电路架构设计
  15. PDF文件删除空白页
  16. 苹果手机有4g信号但是微信未连接服务器,苹果5s有显示4g网络但无上微信 是不是那里设置了 今天才出现的...
  17. 【经验总结】“投”——如何寻找适合投递的期刊或者会议
  18. php获取目录下所有文件路径(递归)
  19. Win7、windows 2008 IIS7.5下载安装方法以及教程 IIS7配置PHP环境图文教程(fastcgi快速最新版)
  20. 史上最全的android studio 插件大全整理

热门文章

  1. 编译问题处理:undefined symbol: OPENSSL_init_crypto
  2. x86-64 下函数调用及栈帧原理
  3. linux网络子系统分析(三)—— INET连接建立API分析之bind listen
  4. OpenGL ES 3.0学习实践
  5. ffmpeg代码实现自定义encoder
  6. 中国农田生产潜力数据集
  7. c++ struct与class
  8. 链表常见操作java实现二:反转链表,从尾到头倒序遍历
  9. ctguoj-取石头 (15分)
  10. NYOJ题目91-阶乘之和