一、原生js操作dom

  <ul id="list"></ul>
  <script>
    let personArr=[
      {id: "001",name:"messi",age:18},
      {id: "002",name:"kobe",age:19}
    ];
    let htmlStr="";
    personArr.forEach((person)=>{
      htmlStr+=`<li>${person.name}-${person.age}</li>`;
    })
    document.getElementById("list").innerHTML=htmlStr;
  </script>

二庵楷、react實(shí)現(xiàn)hello world

• 第一步：按順序引入依賴

<!-- 引入react核心庫 -->
  <script src="../依賴/react.development.js"></script>
  <!-- 引入raect-dom用于支持raect操作dom -->
  <script src="../依賴/react-dom.development.js"></script>
  <!-- 引入babel 用于將jsx轉(zhuǎn)換為js -->
  <script src="../依賴/babel.min.js"></script>

• 第二步：將type類型寫為babel表示標(biāo)簽內(nèi)寫的是jsx

  <script type="text/babel">

• 第三步：書寫jsx

  • 創(chuàng)建虛擬dom
    const VDOM=<h1>hello,react</h1>;
  • 渲染虛擬dom到頁面
    render(要渲染的虛擬DOM罢艾，容器)，表示要把哪一個(gè)虛擬DOM渲染到哪個(gè)容器里
    ReactDOM.render(VDOM,document.getElementById("test"));

三尽纽、創(chuàng)建虛擬dom的兩種方式

• jsx創(chuàng)建虛擬dom

  <script type="text/babel">
    const VDOM=(
      <h1 id="title">
        <span>hello,react</span>
      </h1>
    );
    ReactDOM.render(VDOM,document.getElementById("test"));
  </script>

• js創(chuàng)建虛擬dom

  <script>
    //createElement(標(biāo)簽名咐蚯，標(biāo)簽屬性，標(biāo)簽內(nèi)容)
    const VDOM=React.createElement("h1",{id:"title"},React.createElement("span",{},"hello,react"));
    ReactDOM.render(VDOM,document.getElementById("test"));
  </script>

四弄贿、虛擬dom與真實(shí)dom

• 關(guān)于虛擬dom
  1.虛擬dom本質(zhì)是Object類型的對象（一般對象）
  2.虛擬dom比較“輕”春锋，真實(shí)dom比較重，因?yàn)樘摂Mdom是react內(nèi)部再用差凹，無需真實(shí)dom上那么多屬性
  3.虛擬dom最終會(huì)被react轉(zhuǎn)化為真實(shí)dom期奔，呈現(xiàn)在頁面上

  <div id="test"></div>
  <div id="test2"></div>
  ...
  <script type="text/babel">
    const VDOM=(
      <h1 id="title">
        <span>hello,react</span>
      </h1>
    );
    ReactDOM.render(VDOM,document.getElementById("test"));
    var TDOM=document.getElementById("test2");

    console.log("虛擬dom",VDOM);//虛擬dom Object
    console.log("真實(shí)dom",TDOM);//<div id="test2"></div>
    console.log(VDOM instanceof Object);//true
  </script>

執(zhí)行語句console.log("虛擬dom",VDOM)輸出：

虛擬dom

執(zhí)行語句console.log(VDOM instanceof Object)輸出true

執(zhí)行語句console.log("真實(shí)dom",TDOM)輸出：

真實(shí)dom

五、jsx語法規(guī)則

jsx語法規(guī)則

• 定義虛擬DOM時(shí)危尿，不要寫引號(hào)
• 標(biāo)簽中混入JS表達(dá)式時(shí)要用{}
• 樣式的類名指定不要用class呐萌，要用className
• 內(nèi)聯(lián)樣式，要用style={{key:value}}的形式去寫
• 只能寫一個(gè)根標(biāo)簽
• 標(biāo)簽必須閉合
• 標(biāo)簽首字母
  • 若小寫字母開頭谊娇，則將該標(biāo)簽轉(zhuǎn)為html中同名元素肺孤，若html中沒有改標(biāo)簽對應(yīng)的同名元素，則報(bào)錯(cuò)
  • 若大寫字母開頭济欢，react就去渲染對應(yīng)的組件赠堵，若組件沒有定義，則報(bào)錯(cuò)

  <div id="test"></div>

  <script type="text/babel">
    const myId="Dexter";
    const myData="hello,REACT";

    const VDOM=(
      <div>
        <h2 className="title" id={myId.toLowerCase()}>
          <span style={{color:"black",fontSize:"20px"}}>{myData.toLowerCase()}</span>
        </h2>
        <h2 className="title" id={myId.toUpperCase()}>
          <span style={{color:"blue",fontSize:"20px"}}>{myData.toLowerCase()}</span>
        </h2>
        <input type="text"/>
      </div>
    );
    ReactDOM.render(VDOM,document.getElementById("test"));
  </script>

  <script type="text/babel">
    const data=["Angular","React","Vue"];

      const VDOM=(
        <div>
          <h1>前端js框架列表</h1>
          <ul>
            {
              data.map((item,index)=>{
                return <li key={index}>{item}</li>
              })
            } 
          </ul>  
        </div>
      );
  <script/>