React學習整理

2022-08-12 21:42:12 字數 1389 閱讀 4496

react設計思想及其獨特,屬於革命性創新,效能出眾,**邏輯卻非常簡單。

庫(library):小而巧,庫只提供了特定的api。優點是船小好調頭,可以很方便的從乙個庫切換到另外的庫,但是**幾乎不會改變。

框架(framework):大而全,框架提供了一整套的解決方案。所以,如果在專案中間,想切換到另外的框架是比較困難的。

和angular1相比,react設計很優秀,一切基於js並且實現了元件化開發的思想

react提供了無縫轉到reactnative上的開發體驗。

+ 什麼是模組化:是從**的角度來進行分析的;把一些可復用的**,抽離為單個的模組,便於專案的維護和開發。

+ 什麼是元件化:是用ui介面的角度來進行分析的;把一些可復用的ui元素,抽離為單獨的元件,便於專案的維護和開發。

+ 元件化的好處:隨著專案規模的增大,手裡的元件越來越多,很方便就可以把現有的元件,拼接成乙個完整的頁面。

+ vue是如何實現元件化的:通過.vue檔案,來建立對應的元件:

+ template  結構

+ script     行為

+ style      樣式

+ react是如何實現元件化的:react中有元件化的概念,但是並沒有像vue這樣的元件模板檔案;react中,一切都是以js來表現的。因此要學習react,js要合格,es6和es7(async和await)要會用

當要在jsx**中使用js表示式時,需要用大括號{}將js表示式框起來

使用建構函式來建立元件,如果要接收外界傳遞的資料,需要在建構函式的引數列表中使用props來接收;必須要向外return乙個合法的jsx的虛擬dom。

//第一種建立元件的方式

function hello(props) --- --- div>

//無論是vue還是react,元件中的props永遠都是唯讀的,不能被重新賦值

}reactdom.render(

gender=>hello>

div>

, document.getelementbyid('parent'))

//開啟webpack.config.js,並在匯出的配置物件中,新增如下節點 resolve:

//alias:別名;這裡設定別名是為了讓後續引用的地方減少路徑的複雜度

原因在於,如果是單純的靜態檔案,假如路徑從 / 切換到 /a 後,此時重新整理頁面,頁面將無法正常訪問,需要在伺服器端進行相關配置

react的筆記整理

生命週期 react的生命中歐琪分上狀態分別是 mount update unmount 三個狀態中有五個鉤子函式 componentdidmount 元件載入到頁面以後 往往是 ajax componentdidupadte 元件更新完成以後 腳手架 react檔案的內容 index.css 是整...

React中常用外掛程式整理

react中建立元件 1 第一種建立元件的方式 使用建構函式來建立元件,如果要接收外界傳遞的資料,需要在建構函式的引數列表中使用props來接收 必須要向外return乙個合法的jsx的虛擬dom。建立元件 第一種建立元件的方式 function hello props return 元件中的pro...

react學習六 react路由

react router 安裝包yarn add react router dom匯入路由模組 import reactdom from react dom route 表示乙個路由規則,在 route 上,有兩個比較重要的屬性,path component link 表示乙個路由的鏈結 就好比 v...