重学React——JSX与ReactElement

Posted 2021-04-25 EvilLiterate

JSX与ReactElement

什么是JSX？

JSX是ECMAScript类似于XML的语法扩展，也是createElement的语法糖；

ReactElement

ReactElement实际就是React对于VDOM对象的工厂函数；

EXAMPLE

function APP() {
  return (
    <div id="app">
        测试
    </div>
    )
}

如上示例转换后的VDOM对象实际就是：

const reactElement = createElement('div', { id: 'app' }, 测试); 

// VDOM对象
{
    type: 'div',
    props: {
        id: 'app',
        children: '测试'
    }
}