浅谈JSX语法糖
jsx简单觉得来说就是在javascript里面使用html文档。
JSX是一种语法糖,全称:javascript xml。
JSX语法不是必须使用的,但是因为使用了JSX语法之后会降低我们的开发难度,故而这样的语法又被成为语法糖。
看下面的DOM结构:
<div class='app' id='appRoot'>
<h1 class='title'>欢迎进入React的世界</h1>
<p>
React.js 是一个帮助你构建页面 UI 的库
</p>
</div>
上面这个 HTML 所有的信息我们都可以用 JavaScript 对象来表示:
{
tag: 'div',
attrs: { className: 'app', id: 'appRoot'},
children: [
{
tag: 'h1',
attrs: { className: 'title' },
children: ['欢迎进入React的世界']
},
{
tag: 'p',
attrs: null,
children: ['React.js 是一个构建页面 UI 的库']
}
]
}
但是用 JavaScript 写起来太长了,结构看起来又不清晰,用 XML的方式写起来就方便很多了。
于是 React.js 就把 JavaScript 的语法扩展了一下,让 JavaScript 语言能够支持这种直接在 JavaScript 代码里面编写类似 XML 标签结构的语法,这样写起来就方便很多了。编译的过程会把类似 XML 的 JSX 结构转换成 JavaScript 的对象结构。
下面代码:
import React from 'react'
import ReactDOM from 'react-dom'
class App extends React.Component {
render () {
return (
<div className='app' id='appRoot'>
<h1 className='title'>欢迎进入React的世界</h1>
<p>
React.js 是一个构建页面 UI 的库
</p>
</div>
)
}
}
ReactDOM.render(
<App />,
document.getElementById('root')
)
编译之后将得到这样的代码
import React from 'react'
import ReactDOM from 'react-dom'
class App extends React.Component {
render () {
return (
React.createElement(
"div",
{
className: 'app',
id: 'appRoot'
},
React.createElement(
"h1",
{ className: 'title' },
"欢迎进入React的世界"
),
React.createElement(
"p",
null,
"React.js 是一个构建页面 UI 的库"
)
)
)
}
}
ReactDOM.render(
React.createElement(App),
document.getElementById('root')
)
React.createElement 会构建一个 JavaScript 对象来描述你 XML 结构的信息,包括标签名、属性、还有子元素等, 语法为
React.createElement(
type,
[props],
[...children]
)
所谓的 JSX 其实就是 JavaScript 对象,所以使用 React 和 JSX 的时候一定要经过编译的过程:
JSX代码 — > 使用react构造组件,bable进行编译—> JavaScript对象 — ReactDOM.render()函数进行渲染—>真实DOM元素 —>插入页面.
另外jsx特别要注意的是
- 标签必须要闭合。
- 最外层只能有一个根元素
- 写入样式要用className
- style = {{}}
- 写入事件的时候要用到驼峰命名法 如 onClick()
<div onClick={this.handleClick}></div>
如果handleClick需要内部用到this,那么我们可以通过两种方式解决this绑定问题
1)通过在constructor函数里面进行this的bind
constructor(){
super()
this.handleClick = this.handleClick.bind(this)
}
handleClick(){
console.log(this)
}
2)handleClick写成箭头函数
handleClick = () => {
console.log(this)
}
- input的value值必须要配合onChange才可以,否者的话就只是单纯的进行数据显示的话,只需要通过defaultValue即可。
- checkbox的checked耶要改成defaultchecked
- label的for需要改成htmlFor
- jsx的注释要写成{/**/}