react jsx 介绍and原理

jsx—xml in js 可以在js中写标签（普通标签 自定义标签（组件）

• jsx语法
  • 在jsx 使用 js 表达式 变量 需要加 {}
    这里面是表达式（写在jsx 相当于标签的内容）
  • jsx中注释
    { /* 这里面是注释 */ }

原理

• 虚拟dom
  利用js对象的结构描述 dom结构

<div id="box">
  <p class="op">你是p</p>
  <span>你是span</span>
  我是一段文本
</div>
// 虚拟dom形式
{
  tag: 'div',
  props: {
    id:'box'
  },
  children: [
    {
      tag: 'p',
      props: {
        className: 'op'
      },
      children: ['你是p']
    },
    {
      tag: 'span',
      props: {},
      children: ['你是span']
    },
    '我是一段文本'
  ]
}
/* 
其实 react中jsx 是react提供的 一个 （虚拟dom）语法糖
自动在运行时，变成对象
jsx在运行前，react会 读取 写在标签的结构，分析完结构
利用React.createElement()变成虚拟dom对象
参数1 是 标签名 参数2 属性列表{} 参数3 是内容[]
*/

/*
class X extends Component{
  render(){
    return (
      

        
你是p
        你是span
        我是一段文本
      
    )
  }
}
在render触发时 自动变成
  
class x extends Component {
  render () {
    return React.createElement('div', {id:"box"}, [
      React.createElement('p',{className:"op"},'你是p'),
      React.createElement('span',{},'你是span' ),
      '我是一段文本'
    ])
  }
}
*/