react 源码分析一 (jsx到JavaScript的转换)

170 阅读1分钟

1 react 源码分析一 (jsx到JavaScript的转换)

react.createElement('div', {id: 'div'}, "test") === <div id="div">test</div>

react.createElement('div', {id: 'div'}, react.createElement('div', {id: 'div'}, "test")) === <div id="div"> <div><div> </div>

function Comp() { return <div>1</div> } <Comp> <div></div> </Comp>

react.createElement(Comp, {id: 'div'}, react.createElement('div')

function Comp() { return <div>1</div> }

<comp> <div></div> </comp>

react.createElement('comp', {id: 'div'}, react.createElement('div')

总结 核心转换方法是通过createElement的函数的参数转换html标签

react.createElement('标签名称', '元素属性', '字节点') react.createElement 方法第一个参数如果是自定义react组件, 标签名称需要大写,因为在这个方法转换,小写对应名称会报错,因为在html中不存在