React——JSX

React——JSX

JSX语法规则及使用：

• 创建虚拟DOM时，不要写引号；
• 标签中混入JS表达式要用{}；
• 样式的类名用className指定
• 内联样式，要用style = {{ key: value }},注意属性名转为小驼峰
• 只能有一个根标签
• 标签必须闭合
• 标签首字母
  • 若小写字母开头，则将改标签转为html中同名元素，若html中无该标签对应的同名元素。则报错
  • 若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错

// 使用

关于 JSX

jsx_1.png

     JSX是JavaScript的一种语法拓展。它和模版语言很接近，但是它充分具备JavaScript的能力。Facebook公司给JSX的定位是JavaScript的“扩展”。直接决定了浏览器并不会像天然支持JavaScript一样支持JSX。JSX会被编译为React.createElement(),React.createElement()将返回一个叫做"React Element"的js对象。

    **Babel**官网提出babel是一个工具链，主要用于将ECMAScript 2015+版本的代码转换为向后兼容的JavaScript语法，以便能够运行在当前和旧版本的浏览器或其他环境中。 

    关于JSX的功能模块

/*
* 创造一个元素需要知道哪些信息
* type 用于标识节点的类型
* config 以对象的形式传入，组件所有的属性都会以键值对的形式存储在config对象中
* children 以对象形式传入，它记录的是组件标签之间的嵌套内容
**/
export function createElement(type, config, children)

React.createElement('ul', {
  // 传入属性键值对
  className: "list"
},React.createElement("li", {
  key: '1'
},"1"),React.createElement("li", {
  key: '2'
}, '2'))


  
1
    
2



/*
* ReactElement
**/

const VDOM = (
    

    
I am the title
    
I am the content
  
)

console.log(VDOM) // 标准的ReactElement对象实例---对虚拟DOM的描述



ReactDOM.render(
    // 需要渲染的元素（ReactElement）
  element,
  // 元素挂载的目标容器（一个真实的DOM）
  conteiner,
  // 回调函数，可以用来处理渲染结束后的逻辑
  [callback]
)

ReactDOM.render(, document.getElementById('root'));