React學習日記2

阿新 • • 發佈：2022-04-11

004 虛擬DOM和真實DOM

虛擬DOM是一個js物件

const VDOM = <h1 id="title">hello, React</h1> 
ReactDOM.render(VDOM, document.getElementById('test'))
console.log(VDOM);
console.log(document.getElementById('test'));
// debugger 打斷點
  
    // 虛擬DOM本質就是object物件
    // 虛擬DOM輕，真實DOM重，虛擬DOM是react內部在使用，無需真實DOM那麼多的屬性
    //　虛擬DOM最終會被react轉換為真實DOM，呈現在頁面上

005 JSX語法規則

XML早期用於儲存和傳輸資料

const myId = 'aTgUigu'
    const myData = 'Hello,Re123act'

    const VDOM = (
      <div>
        <h2 id={myId.toLowerCase()} className = 'title'>
        <span style = {{color:'white', fontSize:'29px'}}>{myData.toLowerCase()}</span>
        </h2>
        <h2 id={myId.toLowerCase()+'2'} className = 'title'>
        <span style = {{color:'white', fontSize:'29px'}}>{myData.toLowerCase()}</span>
        </h2>
        <input type="text"/>
        <Good/>
      </div>
    )
    ReactDOM.render(VDOM, document.getElementById('test'))

jsx語法規則

定義虛擬dom時，不加引號
標籤中混入js表示式時用{} 【表示式：區分Js語句和表示式，一個表示式會產生一個值例如

表示式：定義一個 const x = ？？？只要？？？會返回一個值就是表示式】

(1)a

(2) a+b

(3) demo(1) 函式表示式

(4) function test() {}

語句：

if()
for
switch()
樣式的類名指定不要用class，要用className。因為class時ES6裡面的關鍵詞，需要避開
內聯樣式要用，style = {{key: value}}的形式，複雜單詞需要用小駝峰形式
只能有單一根元素類似vue
標籤必須閉合[或者使用自閉和]
關於標籤首字母

1）如果是小寫字母開頭，則將該標籤轉換為HTML同名元素，沒有這個標籤則報錯

2）如果是大寫字母開頭，react則去渲染對應元件

006 jsx小練習

<body>
  <div id="test"></div>
  <script type="text/babel">
    const data = ['Augular','React','Vue']
    // const obj = ['Augular','React','Vue']

    const VDOM = (
      <div>
        <h1>前端js列表</h1>
        <ul>
          {
            //react只能遍歷陣列，不能遍歷物件
            //這裡要index 用於diff演算法
            data.map((item,index)=>{
              return <li key={index}>{item}</li>
            })
          }
        </ul>  
      </div>
    )
    ReactDOM.render(VDOM,document.getElementById('test'))
  </script>
</body>

react只能遍歷陣列，不能遍歷物件

遍歷陣列時：這裡要index 用於diff演算法

007 元件與模組化

提高js的執行效率和vue差不多

008 開發者工具的安裝

一個外掛

009 函式式元件

<body>
  <div id="test"></div>
  <script type="text/babel">
    // 1.建立函式式元件 本質上是一個函式，不是我在呼叫，式React幫我們再呼叫
    function Demo(){
      console.log(this); //script內容經過Babel翻譯，開啟了一個嚴格模式（禁止自定義的函式中的this指向window）
      return <h2>我式函式定義的元件【簡單元件】的定義</h2> 
    }
    
    // 2. 渲染元件到頁面 這裡需要用到標籤
    ReactDOM.render(<Demo/>,document.getElementById('test'))
    // ReactDOM.render(demo(),document.getElementById('test')) 這個寫法也可以

  </script>
</body>

執行順序