react使用總結

liaosilzu2007 發布于2019-08-21 16:52 / 3012人閱讀

最近學了一些 react 和es6 的一些知識，并且使用 react 寫了一個 TodoList 項目===>預覽 && 源碼感覺學的挺多的，并且遇到的坑也不少?，說實話，一開始學 react 看到 jsx 語法有點不適應，說好的結構和行為分離呢?，不過隨著通過一個項目的完成，漸漸明白了這么寫的好處

好處

自定義標簽

結構清晰

代碼模塊化

更加語義化

不過也有缺點

瀏覽器不支持這語法

必須通過一大堆工具來轉換

一些需要注意的點

1. react聲明組件時，組件名稱必須以大寫字母開頭如?：
2. 每個標簽必須閉合,因為采用的 js+xml 寫法，如?:
3. 組件的返回值只能有一個頂層元素，如?：

下面是錯誤的：

render () {
  return (
    1
    2
  )
}

必須這樣

render () {
  return (
    
        1
        2
    
  )
}

4. return后面要加一個括號,目的是防止 JavaScript 代碼在解析時自動在換行處添加分號:

     renderSquare(i) {
       return (
         
       );
     }

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

下面是錯誤的

而是要寫 className：

6. 不要直接更新狀態，如

 this.state.comment = "Hello";

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

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

（注意！！：構造函數（constructor）是唯一能夠初始化 this.state 的地方。）

7. 使用style

我們在 html 可以這么寫：

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

8. 關于 setState

setState方法用于更新當前組件的state狀態值，但調用這個方法后，state并不會立即更新，而是在render方法調用后才會更新

react 特點

虛擬DOM: React是以數據驅動的，每次數據變化React都會掃描整個虛擬DOM樹，自動計算與上次虛擬DOM的差異變化，然后針對需要變化的部分進行實際的瀏覽器DOM更新。

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

單項數據流：React只有單向數據流動-從父節點傳遞到子節點

GPU云服務器云服務器 react使用webrtc 使用方法總結 react _React

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/88840.html

從一次重寫原生方法遇到的坑，總結一下Web中的事件系統

摘要：問題初探索刪掉那一點重寫的代碼后，表現符合預期了。每一次都重新造一個虛擬的，然后監聽其自定義事件，并且立即觸發這個自定義事件。真的不要隨便重寫原生方法。。。于是，我全面總結一下了中的事件系統，也算是對基礎的鞏固。寫在前面前段時間，我寫過一篇文章前端開發中的Error以及異常捕獲。在文章中，我提到了這個問題： showImg(https://segmentfault.com/img...

oysun 2019-08-23 14:42 評論0 收藏0
todo-list 項目問題總結（使用 react 進行開發）

摘要：項目問題總結這個項目，很簡單，前端使用，后端使用進行開發。方便移動端開發。當動畫結束后，有一個鉤子函數可以使用其他一些功能組件，都是自己嘗試去編寫的，像日歷組件組件組件等。版本的，是沒有任何的鉤子函數，我就感覺懵逼了。。。 todo-list 項目問題總結這個 todo-list 項目，很簡單，前端使用 react，后端 nodejs 使用 koa2 進行開發。數據庫使用 Mysql...

shengguo 2019-08-22 15:37 評論0 收藏0
兩年React老兵的總結 - 類型檢查篇

摘要：系列引言最近準備培訓新人為了方便新人較快入手開發并編寫高質量的組件代碼我根據自己的實踐經驗對組件設計的相關實踐和規范整理了一些文檔將部分章節分享了出來由于經驗有限文章可能會有某些錯誤希望大家指出互相交流由于篇幅太長所以拆分為幾篇文章主要有以系列引言最近準備培訓新人, 為了方便新人較快入手 React 開發并編寫高質量的組件代碼, 我根據自己的實踐經驗對React 組件設計的相關實踐...

scola666 2019-08-23 18:38 評論0 收藏0
React同構直出優化總結

摘要：同構的關鍵要素完善的屬性及生命周期與客戶端的時機是同構的關鍵。的一致性在前后端渲染相同的，將輸出一致的結構。以上便是在同構服務端渲染的提供的基礎條件。可以將封裝至的中，在服務端上生成隨機數并傳入到這個中，從而保證隨機數在客戶端和服務端一致。原文地址 React 的實踐從去年在 PC QQ家校群開始，由于 PC 上的網絡及環境都相當好，所以在使用時可謂一帆風順，偶爾遇到點小磕絆，也能夠...

alaege 2019-08-21 10:53 評論0 收藏0
React Fiber源碼分析第四篇（歸納總結）

摘要：為什么網頁性能會變高要回答這個問題，需要回頭看是單線程的知識點。在分析的過程中，發現了的源碼中使用了很多鏈式結構，回調鏈，任務鏈等，這個主要是為了增刪時性能比較高系列文章 React Fiber源碼分析第一篇 React Fiber源碼分析第二篇（同步模式） React Fiber源碼分析第三篇（異步狀態） React Fiber源碼分析第四篇（歸納總結）前言 Rea...

jsdt 2019-08-23 15:05 評論0 收藏0