略懂迁移至React 16实践

[yangguang0813]

背景

由于React 16之前版本仍然存在法务风险，需要将略懂使用的React升级至16.0.0来规避此问题。这篇文章主要介绍如何从React 15或之前的版本升级至16.0.0。

React 16的新特性

• render方法可以返回数组或者字符串，而非像之前只能返回单一DOM节点；
• Error boundaries，错误边界，可以捕获到发生在子组件树中的异常，打印输出错误信息，并且返回一个用于提示发生错误的UI页面，而非像之前那样整个组件树崩溃；
• React.createPortal()向一个DOM节点中render子树；
• 流式服务端渲染ReactDOMServer.renderToNodeStream() and ReactDOMServer.renderToStaticNodeStream()
• 其他特性以及API变动可见React v16.0.0

React 16的环境依赖

React 16依赖ES6中Collection类型Map和Set，低版本浏览器（比如IE9）中没有支持对应的类型，需要在全局下引入core-js或者babel-polyfill。全量引入polyfill体积较大，在确认了代码中使用到的ES6新特性后，使用了自定义的arr_obj_map_set_prms.min.js，包含目前略懂使用到的Array，Object，Map，Set以及Promise

js体积对比见表格：

js体积对比	babel-polyfill 6.23.0	定制的polyfill
gzip之后体积	32.5KB	12.1KB

React 16依赖requestAnimationFrame，低版本浏览器中没有相应的API，需要手动添加相应的方法。

如以下代码所示：

<script src="//cache.soso.com/wenwen/deploy/js/babel_ployfill/customized/arr_obj_map_set_prms.min.js"></script>
<script>
    window.requestAnimationFrame = (function(){
        return  window.requestAnimationFrame       ||
                window.webkitRequestAnimationFrame ||
                window.mozRequestAnimationFrame    ||
                window.oRequestAnimationFrame      ||
                window.msRequestAnimationFrame     ||
                function( callback ){
                    window.setTimeout(callback, 16);
                };
    })();
</script>
<script src="//cache.soso.com/wenwen/deploy/js/react/16.0.0/react.development.js" data-prod="//cache.soso.com/wenwen/deploy/js/react/16.0.0/react.min.js"></script>
<script src="//cache.soso.com/wenwen/deploy/js/react/16.0.0/react-dom.development.js" data-prod="//cache.soso.com/wenwen/deploy/js/react/16.0.0/react-dom.min.js"></script>

兼容React Router以及React Redux

由于React 16不再提供React.PropTypes，而现有React Router和React Redux仍然使用，需要先引入prop-types，再引入React Router和React Redux依赖。

<script src="//cache.soso.com/wenwen/deploy/js/prop_types/15.6.0/prop-types.min.js"></script>
<script>
    React.PropTypes = PropTypes;
</script>
<script src="//cache.soso.com/wenwen/deploy/js/react_router_dom/4.0.0/react-router-dom.min.js"></script>
...

升级前后React体积对比

react依赖gzip体积	react	react-dom
15.6.1	8.2KB	39.1KB
16.0.0	3.1KB	31.8KB

测试

PC略懂：IE9浏览器自测通过。
无线略懂：iOS 10自测通过；华为畅享5S自测通过。

表现与预期一致。