13518219792
这篇文章将为大家详细讲解有关React#31的render怎么解决，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。
太白网站制作公司哪家好，找创新互联建站！从网页设计、网站建设、微信开发、APP开发、响应式网站等网站项目制作，到程序开发，运营维护。创新互联建站于2013年成立到现在10年的时间，我们拥有了丰富的建站经验和运维经验，来保证我们的工作的顺利进行。专注于网站建设就选创新互联建站。
卡颂日常从事基础架构相关工作。这次接到一个任务：封装一个React组件交给业务方使用。
组件本地开发无误，自测无误，交给业务方接入无误，业务方测试环境验收无误。
然而，当包含该组件的页面小流量上线后，监控平台立刻收到报警：
Minified React error #31 ......
打开监控看板，发现大部分报错来自于一款机型：「Vivo x7」，Android版本5.1。完整报错信息如下：
看看时间：周五晚上6点半。呵，还有我解决不了的React问题?半小时搞定，过周末去～
然而......
简单描述下#31号错误信息描述的内容：
React的render函数可接受的返回值类型包括：
string，比如return 'I am kasong';
number，比如return 123;
array，比如return [
ka
,song
];。其中[]会被处理为React.Fragment
object，比如return
ka song
;。因为该返回值会被编译为React.createElement(或jsx.createElement，视React版本不同而不同)。
而React.createElement的返回值是一个对象(即object类型)。
这里的报错信息是说：你某个组件返回了一个非法值。因为这个值是object类型，但是他不是一个JSX对象。
想要复现这个问题也很简单，比如如下代码：
function App() { reutrn {}; }返回值是个object，但非JSX对象。
作为React老司机，是绝对不可能写错返回值类型的。况且，写错的话，本地开发就会报错了。
而且很奇怪，这个问题，为什么只在这款机型复现呢?
现在我们掌握的线索是：
这是个个别机型复现的报错
报错原因是因为render函数返回了错误的类型
我们需要更多线索!!
虽然是被压缩的线上代码，但好在React提供了必要的错误信息。
这个错误的object包含了如下字段：
found: object with keys {$$typeof, type, key, ref, props, _owner}).居然包含$$typeof!!!
$$typeof是React源码内部用来判断JSX对象类型的字段。
比如React.Fragment、React.portal、div这三种JSX分别对应三种$$typeof。
换言之，包含$$typeof的object类型，大概率是一个JSX对象。
既然这个报错的object对象就是一个JSX对象，那React为什么还认为他是一个非法的返回值呢?
React狠起来连自己都杀?
要解答这个问题，必须深入React源码。
由于我的组件中没有使用Fragment或Portal这样的特性，所以将问题定位在普通React组件对应的$$typeof。
在源码中，这种类型被称为REACT_ELEMENT_TYPE。
PS：Fragment类型为REACT_FRAGMENT_TYPE，Portal类型为REACT_PORTAL_TYPE，
var hasSymbol = typeof Symbol === 'function' && Symbol.for; var REACT_ELEMENT_TYPE = hasSymbol ? Symbol.for('react.element') : 0xeac7;可以看到，当宿主环境支持Symbol时，REACT_ELEMENT_TYPE === Symbol.for('react.element')。
不支持时，REACT_ELEMENT_TYPE === 0xeac7
与此同时，REACT_ELEMENT_TYPE这个变量的定义不仅存在于React这个包中，也存在于ReactDOM包中。
Vivo x7的webview原生不支持Symbol。似乎有点儿苗头了!
审查业务方代码后发现，业务方使用core-js实现了Symbol polyfill。
那么设想如下场景：
假如业务方代码打包的顺序是：
React -> core-js -> ReactDOM
那么在运行时，React首先加载，执行到定义REACT_ELEMENT_TYPE变量这行代码时，宿主环境全局不存在Symbol。
所以在React这个包中，REACT_ELEMENT_TYPE === 0xeac7
接着运行core-js，他会在window上挂载Symbol。
接着ReactDOM在运行时，执行到定义REACT_ELEMENT_TYPE变量这行代码时，宿主环境已经存在全局变量Symbol。
所以在ReactDOM中，REACT_ELEMENT_TYPE === Symbol.for('react.element')
而React.createElement方法来自React包，组件的render方法是在ReactDOM包中的reconciler模块调用的，
所以就会发生判断组件类型时，0xeac7 !== Symbol.for('react.element')，让React认为这是个非法的返回值。
在遥远的2016年，就有人就此给React提issue[1]。
然而审视业务方代码后发现，依赖打包的顺序是：
core-js -> React -> ReactDOM
按照刚才的推理，React和ReactDOM都能拿到core-js提供的Symbol polyfill。
此时早已华灯初上，我为我对React的轻视流下了不争气的泪水。
亏我还是React Contributor，React技术揭秘[2]作者，React 17的源码方法名都能背下来。
嗯?React 17??难道!
v16.14之前版本的React中JSX对象会被编译为React.createElement。
此版本之后createElement被从React包中拆分出来，独立在react/jsx-runtime中。
编译工作则由@babel/plugin-transform-react-jsx插件完成。
那么此时，REACT_ELEMENT_TYPE的定义存在于jsx-runtime、React、ReactDOM三个包中。
也就是说，如果编译后包的执行顺序是：
jsx-runtime -> core-js -> React -> ReactDOM
在低端Android机上还会复现这个问题!
这里截取一个网友遇到同样问题后他的截图：
这个问题的讨论见Bug: IE 11 not working with latest React version
可以看到，jsx-runtime被babel编译成第一个依赖，破案!
所以，这实际上是个babel编译后产物顺序造成的bug，已经有人给babel提相关issue[3]
最终我将JSX的编译方式从编译为jsx.createElement降级为React.createElement解决了这个报错。
此时，夜已深。。。
每一片雪花都是那么纯洁，直到他们组成了一场雪崩。
这个bug的各方，React、babel、提供组件的我、业务方代码，单独来看，没有一方有问题。
但是，当一系列巧合合并在一起，就是一个线上bug。
这也显示了线上小流量、报错监控基建的重要性。
关于React#31的render怎么解决就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。
