React学习01

1.创建虚拟DOM的两种方式

方式一：babel

  const VDOM = (
          <h1 id="title">
            <span>Hello React</span>
          </h1>
  )

  ReactDOM.render(VDOM,document.getElementById('test'))

方式二：javascript

const VDOM=React.createElement('h1',{id:'title'},'hello react')
// React.createElement(标签名,标签属性,标签内容)   
ReactDOM.render(VDOM,document.getElementById('test'))

2..理解虚拟DOM和真实DOM

 
<div id="test">

</div>

<!--此处一定要写babel-->
<script type="text/babel">
    const VDOM =(
        <h1 id="title">
            <span>Hello react</span>
        </h1>
    )

    ReactDOM.render(VDOM,document.getElementById('test'))

    var TDOM = document.getElementById('test');

    console.log('虚拟',VDOM)
    console.log('真实',TDOM)
    debugger

    console.log(typeof VDOM);
    console.log(VDOM instanceof Object)
</script>

关于虚拟DOM:

• 1.本质是Object类型的对象（一般对象）
• 2.虚拟DOM比较轻，真实DOM比较重，因为虚拟DOM是React内部在用，无需真实DOM上那么多的属性
• 3.虚拟DOM最终会被React转化为真实DOM，呈现在页面上

虚拟DOM

真实DOM

3.jsx语法规则

1. 定义虚拟DOM时，不要写引号
2. 标签中混入JS表达式时要用{}
3. 样式的类名指定不要用class,要用className
4. 内联样式，要用style={{key:value}}的形式去写
5. 只有一个根标签
6. 标签必修闭合
7. 标签首字母
8. 若小写字母开头，则将改签转为html中同名元素，若html中没有该标签的同名元素，则报错
9. 若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错

const myId='james'
const myData='Hello React'

const VDOM =(
        <div>
          <h1 className="title" id={myId.toLowerCase()}>
            <span style={{color:'yellow',fontSize:'20px'}}>{myData.toLowerCase()}</span>
          </h1>
          <h1 className="title" id={myId.toLowerCase()+'2'}>
            <span style={{color:'yellow',fontSize:'20px'}}>{myData.toLowerCase()}</span>
          </h1>
          <input type="text"/>
        </div>
)

ReactDOM.render(VDOM,document.getElementById('test'))