React的虚拟dom声明与使用（组件）

一、JSX
1.1 jsx

• JSX就是可以在Js里编写html

• 在React里，一段虚拟dom，我们称之为组件，在react内组件的最小颗粒度就是一个html标签 react组件名称首字母必须大写。

• 优点：
  1、JSX执行更快，编译为JavaScript代码时进行优化
  2、类型更安全，编译过程如果出错就不能编译，及时发现错误
  3、JSX编写模板更加简单快速。（不要跟VUE比）

• 注意：
  1、JSX必须要有根节点。
  2、正常的普通HTML元素要小写。如果是大写，默认认为是组件。

1.２JSX表达式

1、由HTML元素构成
2、中间如果需要插入变量用{}
3、{}中间可以使用表达式
4、{}中间表达式中可以使用JSX对象
5、属性和html内容一样都是用{}来插入内容

二、使用

        //在jsx内，我们可以在虚拟dom内使用{}来规定一段js代码
        
        //1、无状态组件    静态组件
        const H1Dom = <h1 id="h1-dom" className="h1-dom" style={{color:"#efefef",fontSize:"20px"}}>我是大标题</h1>
       //2、 函数式组件
        const H2Dom = (props)=>{
          let text = props.title?props.title+'这是组件头部添加的':'小标题'
          return <h2>{text}</h2>
      }
     
     //3、React.createElement方法
      const H3Dom = React.createElement('h3','','这是h3标题')
      
     //4、类组件
      class H4Dom extends React.Component{
              constructor(props){
                  super(props)
              }
              titleChange(){
                  console.log(this.props.title)
              }
              render(){
                 return <h4>{this.props.title}</h4> 
           }
      }
      
let root = document.querySelector('#root');

   //render方法可以接收两个参数 1---虚拟dom  2---虚拟dom的安放处
        ReactDOM.render(
           //H1Dom,
          <H2Dom title="h2标题"/>,
           //H3Dom,
          // <H4Dom title="测试~"/>,
          root
      )