Fe-interview: [react] render方法的原理你有了解吗？它返回的数据类型是什么？
[react] render方法的原理你有了解吗？它返回的数据类型是什么？
react
haizhilin2013
All 3 comments
element, string , boolean , undefind, null
tiyunchen
on 17 Jul 2019
ReactChild | ReactFragment | ReactPortal | boolean | null | undefined;
ccxzz
on 26 Dec 2019
render的第一个参数通过babel转为React.createElement，后者根据参数类型的不同调用不同的内部方法来转换为原生dom并生成真实dom插入到容器中.
对原生html标签调用ReactDOMComponent的mountComponent方法，将element转化为真实的dom节点， 并插入到对应的container中，返回realDom；
对于自定义组件，递归调用ReactCompositeComponentWrapper转化为原生dom标签，然后和上面一样通过ReactDOMComponent的mountComponent方法，生成realDom;
string和number，调用的是ReactDOMTextComponent；
null和boolean，调用的是ReactEmptyComponment;
langhuanyudong
on 6 Mar 2020
🎉4
👀1
🚀1
Was this page helpful?
0 / 5 - 0 ratings
Related issues
haizhilin2013
·
3Comments
haizhilin2013
·
3Comments
haizhilin2013
·
3Comments
undefinedYu
·
3Comments
haizhilin2013
·
3Comments
Most helpful comment
render的第一个参数通过babel转为React.createElement，后者根据参数类型的不同调用不同的内部方法来转换为原生dom并生成真实dom插入到容器中.
对原生html标签调用ReactDOMComponent的mountComponent方法，将element转化为真实的dom节点， 并插入到对应的container中，返回realDom；
对于自定义组件，递归调用ReactCompositeComponentWrapper转化为原生dom标签，然后和上面一样通过ReactDOMComponent的mountComponent方法，生成realDom;
string和number，调用的是ReactDOMTextComponent；
null和boolean，调用的是ReactEmptyComponment;