JSX是什么?
JSX是一个js的语法扩展 、一个类似于XML的ECMAScript的语法扩展
JSX的核心概念
其实react本身并不强制使用JSX
class Hello extends ReactComponent {
render(){
return React.createElement(
'div',null,`Hello${this.props.name}`
)
}
}
ReactDom.render(
React.createElement(
Hello,{name:'world'},null
),
document.getElementById('app')
)
这样的写法也是可以的
JSX更像是React.createElement的一种语法糖,通过类似XML的方式描写函数对象
class Hello extends ReactComponent {
render(){
return <div>Hello{this.props.name}</div>
}
}
ReactDom.render(
<Hello name='world' />
document.getElementById('app')
)
React需要将组件转化为虚拟DOM树,JSX这种树状结构具有可读性强的优势,代码更加简洁
实际上在运行时候,都会编译成 React.createElement的语法
方案对比
既然在编译的时候都会编译成React.createElement的语法,那么为什么不使用模板、模板字符串。JXON呢?
在面向对象的编程设计中有一个核心概念称为关注点分离,是指将代码分隔成不同的部分的设计原则,目的在于简化程序的开发和维护,当关注点分开时各部门可以重复使用已经独立开发更新
模板的缺点是:模板的关注点分离比较弱,它更关注的是技术栈的分离,而不是关注点;模板引入了更多的概念,新的模板语法,模板指令
模板字符串的缺点:代码结构更加复杂,开发时候语法提示性差
JXON的缺点:开发时候语法提示性差,开发困难