JSX入门

JSX是什么

• JSX全称JavaScript XML，在js中写XML标签，是JavaScript的一种扩展语法
• JSX标签，编译后是一个对象。描述要显示的UI信息
• 可以写入的标签

1. W3C规定的标签，浏览器端能够解析
2. 自定义标签，首字母大写，封装的组件
3. 任意标签，不被浏览器解析

let span = React.createElement('span', null, 'hello,span')
let h = React.createElement('h2', { className: 'red'}, span)
console.log(h);
let h = <h2>
    <span>Hello,React</span>
</h2>
ReactDOM.render(h, document.getElementById('root'));

//{$$typeof: Symbol(react.element), type: //"h2", key: null, ref: null, props: {…}, …}
//$$typeof: Symbol(react.element)
//key: null
//props: {className: "red", children: {…}}
//ref: null
//type: "h2"
//_owner: null
//_store: {validated: false}
//_self: null
//_source: null
//__proto__: Object

React.createElement()

React.createElement (
 type: 'h1', // 创建元素的类型
 [props], // 元素上的属性
 [... chilidren] 包含的子元素
)
创建并返回一个对象，这个对象描述了要显示的元素信息，称之为ReactElement

编译的示意

• 使用JSX语法的优点

1. 符合写模板的习惯
2. 程序结构更容易被直观化
3. 抽象了React Element 的创建过程
4. 书写的依然是JS
   JSX 语法只是为React.createElement 提供的语法糖
   
   解析示意图

JSX 语法规范

• JSX被编译成对象
  
  可以当做值赋值给变量
  
  当做函数赋的返回值
  
  也可以存在数组中
• 写任意表达式，使用一对花括号 {}
• 定义的组件必须首字母大写，否则会被解析为普通标签
• 定义在行间的props,如果不复制，默认为true
• Booleans,Null和Undefined作为子元素会被忽略，需转成字符串

/**
 * 使用变量的方式，多个标签，外出需要一个父标签,这里使用<>
 * React.Fragment
 */
let h = <>
<h2><span>hello</span></h2>
<ul><li><span>world</span></li></ul>
ReactDOM.render(h, document.getElementById('root'));

let value1 = 'Hello'
let value2 = 'World'
let h = <React.Fragment>
<h2><span>{value1}</span></h2>
<ul><li><span>{value2}</span></li></ul>
</React.Fragment>
ReactDOM.render(h, document.getElementById('root'));

/**
 * 使用函数的方式
 */
function createH() {
    return <React.Fragment>
    <h2><span>hello</span></h2>
    <ul><li><span>world!!</span></li></ul>
    </React.Fragment>
}
ReactDOM.render(createH(), document.getElementById('root'));

/**
 * 使用数组的方式
 * 这里需要给标签定义key值，目的是为了复用，渲染的问题，可以和vue里v-for要配合key一起
 */
let arr = [
    <h2 key="1"><span>hello</span></h2>,
    <ul key="2"><li><span>world!！！!</span></li></ul>
]
ReactDOM.render(arr, document.getElementById('root'));