react使用總結(jié)

liaosilzu2007 發(fā)布于2019-08-21 16:52 / 3020人閱讀

最近學(xué)了一些 react 和es6 的一些知識(shí)，并且使用 react 寫了一個(gè) TodoList 項(xiàng)目===>預(yù)覽 && 源碼 感覺學(xué)的挺多的，并且遇到的坑也不少?，說實(shí)話，一開始學(xué) react 看到 jsx 語法有點(diǎn)不適應(yīng)，說好的結(jié)構(gòu)和行為分離呢?，不過隨著通過一個(gè)項(xiàng)目的完成，漸漸明白了這么寫的好處

好處

自定義標(biāo)簽

結(jié)構(gòu)清晰

代碼模塊化

更加語義化

不過也有缺點(diǎn)

瀏覽器不支持這語法

必須通過一大堆工具來轉(zhuǎn)換

一些需要注意的點(diǎn)

1. react聲明組件時(shí)，組件名稱必須以大寫字母開頭如?：
2. 每個(gè)標(biāo)簽必須閉合,因?yàn)椴捎玫?js+xml 寫法，如?:
3. 組件的返回值只能有一個(gè)頂層元素，如?：

下面是錯(cuò)誤的：

render () {
  return (
    1
    2
  )
}

必須這樣

render () {
  return (
    
        1
        2
    
  )
}

4. return后面要加一個(gè)括號(hào),目的是防止 JavaScript 代碼在解析時(shí)自動(dòng)在換行處添加分號(hào):

     renderSquare(i) {
       return (
         
       );
     }

5. render()里面不能寫 class,for,而是要寫成className和htmlFor,因?yàn)?class ，for 是 javascript 的關(guān)鍵字，因此不能使用，如：

下面是錯(cuò)誤的

而是要寫 className：

6. 不要直接更新狀態(tài)，如

 this.state.comment = "Hello";

此代碼不會(huì)重新渲染組件的，之前就這么寫，啥反應(yīng)也沒有?，應(yīng)該要用setState():?

 this.setState({comment: "Hello"});

（注意！！：構(gòu)造函數(shù)（constructor）是唯一能夠初始化 this.state 的地方。）

7. 使用style

我們?cè)?html 可以這么寫：

但是在 jsx 里面卻不能這么寫，必須用兩個(gè)花括號(hào)包裹，并且里面不能寫-，要用駝峰形式寫，如上面的 background-color寫成backgroundColor:

8. 關(guān)于 setState

setState方法用于更新當(dāng)前組件的state狀態(tài)值，但調(diào)用這個(gè)方法后，state并不會(huì)立即更新，而是在render方法調(diào)用后才會(huì)更新

react 特點(diǎn)

虛擬DOM: React是以數(shù)據(jù)驅(qū)動(dòng)的，每次數(shù)據(jù)變化React都會(huì)掃描整個(gè)虛擬DOM樹，自動(dòng)計(jì)算與上次虛擬DOM的差異變化，然后針對(duì)需要變化的部分進(jìn)行實(shí)際的瀏覽器DOM更新。

組件化： React可以從功能角度劃分，將UI分解成不同組件，各組件都獨(dú)立封裝，整個(gè)UI是由一個(gè)個(gè)小組件構(gòu)成的一個(gè)大組件，每個(gè)組件只關(guān)系自身的邏輯，彼此獨(dú)立（比如你有個(gè)按鈕，很多頁面都有這個(gè)按鈕，那么就可以把這個(gè)按鈕封裝成該組件）。

單項(xiàng)數(shù)據(jù)流：React只有單向數(shù)據(jù)流動(dòng)-從父節(jié)點(diǎn)傳遞到子節(jié)點(diǎn)