React - 修改children(下)

发布时间:2019-06-22 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了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(下)全部内容,希望文章能够帮你解决React - 修改children(下)所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。