邂逅react七jsx的本质

6次阅读

共计 734 个字符，预计需要花费 2 分钟才能阅读完成。

jsx 到底是什么？其实 jsx 是 React.createElment(component,props,children)的语法糖
createElement 需要传入的三个参数:
1.type: 当前的类型, 是标签还是组件
2.config: 所有属性和值都以对象的键值对的形式存储
3.children: 存在标签里的内容
源码中的 createElement

jsx 语法在浏览器中是无法直接运行的, 必须通过 babel 编译

class App extends React.Component{//jsx 写法 必须引入 babel 编译后才能运行 否则报错
        
     render(){           
            return (
                <div>
                   <h2>hello React</h2>
                </div>
            );
        }
    }

    ReactDOM.render(<App/>,document.getElementById('root'))

以上代码编译后变成如下代码

class App extends React.Component {// 不需编译 可直接运行
  render() {
    return /*#__PURE__*/React.createElement("div", null,    
    /*#__PURE__*/React.createElement("h2", null, "hello 
    React"));
    }
 }

ReactDOM.render(/*#__PURE__*/React.createElement(App, null),
document.getElementById('root'));

createElement 接收到 type,config,children 等参数后进行一系列处理最终返回 ReactElement 树，ReactElement 形成了一个 js 对象树, 这就是虚拟 dom
后续更新虚拟 dom

正文完