React基礎學習 看心情學習更新

幾個基本概念介紹

library（庫）:小而巧的庫，只提供了特定的api；優點就是船小好調頭，可以很方便的從乙個庫切換到另乙個庫；但是**基本上不需要改變。

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

angular.js:出來較早的前端框架，學習曲線比較陡，ng1學起來麻煩，ng2~ng5開始，進行一系列的改革，也提供了元件化開發的概念；從ng2開始，也支援使用ts（typescript）進行程式設計。

vue.js:最火（關注的人比較多）的一門前端框架，它是中國人開發的，對我們來說，文件要比較友好。

react.js:最流行（用的人比較多）的一門程式設計，因為它的設計很優秀。

元件化方面

1.什麼是模組化:是從**的角度來進行分析的，把一些可復用的**，單獨抽離出來乙個模組；便於專案的維護與開發。

2.什麼是元件化:是從ui介面的角度來進行分析的，把一些可復用的ui元素，單獨抽離出來乙個元件；便於專案的維護與開發。

3.元件化的好處:隨著專案規模增大，手裡的元件越來越多；很方便就能把現有的元件，拼接為乙個完整的頁面。

4.vue是如何實現元件化的:通過』.vue』檔案，來建立對應的元件。template:結構、script:行為、style:樣式。

5.react是如何實現元件化的:react中一切都是以js來表現的；

虛擬dom（virtual document object model）

dom的本質是什麼:瀏覽器中的概念，用js物件來表示頁面的元素，並提供了操作dom物件的api；

什麼是react中的虛擬dom:是框架中的概念，是程式設計師對js物件來模擬頁面上的dom和dom巢狀；

為什麼要實現虛擬dom（虛擬dom的目的）:為了實現頁面中，dom元素的高階更新。

dom和虛擬dom的區別:dom（瀏覽器中，提供的概念；用js物件，表示頁面上的元素，並提供了操作元素的api）；虛擬dom（是框架中的概念；而是開發框架的程式設計師，手動用js物件來模擬dom元素和巢狀關係）。

元件

理解：用來實現特定（區域性）功能效果的**集合（html/css/js）。

為什麼：乙個介面的功能更複雜。

作用：復用編碼，簡化專案編碼，提高執行效率。

當應用的js都以模組來編寫的，這個應用就是乙個模組化的應用。

state

props

為元件指定預設值***x.defaultprops={}。

對props中的屬性值進行型別限制和必要性限制，***x.proptypes=

ref類似html裡面給元素指定id的意思，在react中使用ref，老版本react指定ref可以直接命名屬性名為字串如ref=『test』，新版建議使用如下方式ref=。

功能介面的元件化編碼流程（無比重要）

1.拆分元件:拆分介面，抽取元件。

2.實現靜態元件，使用元件實現靜態頁面效果。

3.實現動態元件:動態顯示初始化資料、互動能力(從繫結事件監聽開始)。

子元件對父元件接收過來的值進行型別識別

import react from

'react'
;import proptypes from
'prop-types'
;export
default
class
test
extends
react.component
}

import react from

'react'
;import proptypes from
'prop-types'
;export
default
class
test
extends
react.component,]
}// 新增
addcomment
=(comment)
=>
=this
.state;
comments.
unshift
(comments)
;// 更新狀態
this
.setstate()
;}// 刪除
addcomment
=(index)
=>
=this
.state;
// 1刪除 0替換
comments.
splice
(index,1)
;// 更新狀態
this
.setstate()
;}}

react 基礎學習

npm start 啟動專案 class clock extends react.component componentdidmount componentwillunmount render 把元件裝進 root reactdom.render document.getelementbyid ro...

react基礎學習

最簡單的 父 子 傳值 父元件通過在子元件標籤上設定屬性傳遞資料 teachername teachername 子元件通過this.props獲取父元件傳遞的資料 this.props.teachername 獲取老師的名稱 render 我的老師是 我對老師很 滿意 button p 最簡單的 ...

react封裝函式 React 基礎學習筆記

內容 intro install page setup react elements reactdom react component react factories names abstract react.createelement reactdom.render react.component...