React16的兼容及解决

发表于 | 分类于 | 本文总阅读量 次 | 字数统计: 366 字 | 阅读时长 ≈ 1 分钟
兼容到ie9遇到的问题总结

React16的环境要求

官方文档明确指出因为React16依赖集合类型Set和Map，如果需要支持IE11以下的浏览器需要使用全局的polyfill，解决方案也很简单。

1
npm install -S @babel/polyfill

在代码入口处引入map和set

1
2
3
4
5
6
7
8
9
10
import 'core-js/es6/map';
import 'core-js/es6/set';

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

React 也依赖于 requestAnimationFrame，你可以使用raf 包。

1
npm install -S raf

导入入口文件

1
import "raf/polyfill";

IE9和10静态方法继承的问题

这个问题跟React无关，其实是babel的问题，在小于IE11的版本里，在做类的继承时，静态属性和方法是继承不到的，查看babel的文档可以找到解决方案

If you’re inheriting from a class then static properties are inherited from it via proto, this is widely supported but you may run into problems with much older browsers.

NOTE: proto is not supported on IE <= 10 so static properties will not be inherited. See the protoToAssign for a possible work around.

大概意思就是，正常的浏览器是没有问题的，在IE <= 10的时候，因为不支持proto，所以不会继承静态属性。可以通过@babel/plugin-transform-proto-to-assign来解决。

1
2
3
4
// .babelrc
{
  "plugins": ["@babel/plugin-transform-proto-to-assign"]
}

react-loadable

IE10及以下都没有原生实现promise，react-loadable也没有内置替换方法，所以需要手动引入promise，在入口文件添加一下代码导入promise的polyfill

1
2
// react-loadable 用到promise
import "core-js/es6/promise";