React - 修改children(下)

在 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(下)

相关文章