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