react自學筆記總結不間斷更新

標籤：css   and   網站   區別   返回   常用   控制   為什麼   style   

React

         React 是由Facfbook維護的一套架構，並且引用到instagram

         React只是我們熟悉MVC框中的V層，只是視圖層面的一個架構，只有倆個半api(createClass,createElement,render)

 

React與Angular的區別

         React: 效能好，單向資料繫結，不是完整的架構。

         Angular: 效能較差，雙向資料繫結，是一套完整的架構

         https://www.zhihu.com/question/23444167

 

為什麼React的效能要好?

         因為React做了倆點最佳化。

1、  在渲染時效能的最佳化

React是建立了一個虛擬dom，這個dom不是真正頁面中的dom元素，它實質上是一個js對象，用jsObject Storage Servicedom上的資訊，因此比真是的dom小得多，因為他只記錄的一些必要的資訊。

操作一個虛擬dom需要的效能要遠小於操作一個真實dom的效能，在前端開發一個web應用與開發一個網站不同，web應用通常是一個單頁面，因此每次做一些互動會涉及各種dom操作，因此無節制的操作dom嚴重影響了頁面的效能，但是我們只是操作虛擬dom會很好的降低對效能的消耗，在必要的時候將視圖渲染到頁面之中。

2、  在開發時的最佳化

React的開發理念是建立一個虛擬dom，而虛擬dom是一個js對象，它不是基於某一個端，比如真實的dom可能需要瀏覽器環境，它是基於web端的，所有通過React開發出來的組件可以用於任何平台，比如，伺服器端，web端，ios端，android端

         將虛擬dom引用到不同的端上需要不同的外掛程式，然後調用不同的render方法。

 

 

 學習React

 

認識React

1、  createElement()是用來建立虛擬dom的方法，他有一些參數

第一個參數表示：虛擬dom的名稱，通常是一些標籤名稱，比如：div a p span

第二個參數表示：虛擬dom的屬性，比如：className id title value

從第三個參數開始：表示虛擬dom的子節點。

2、  render()是用來將虛擬dom渲染到頁面的方法

第一個參數表示：虛擬dom’元素

第二個參數表示：真是的dom元素

第三個參數表示：一個回呼函數

----------------------------------------------------------------------------------------------------

寫一個非jsx編譯時間的虛擬dom程式

------------------------------------------------------------------------------------------------------------------

        

組件

         1組件是做什麼的？

如果一個虛擬dom複用多次的時候，通常我們將它封裝在一個組建當中，通常用組件封裝一組虛擬dom，這一組虛擬dom通常稱他為虛擬dom樹。

        

         2組件如何建立？

createClass()是建立組件的方法,組件名稱需要大寫，參數是一個對象，對象中的屬性和方法是對組件的說明：

屬性1：render()方法，它是將組件中的虛擬dom輸出，所以我們將虛擬dom定義在render()中並返回一個虛擬dom樹。

**********************************寫一個組件程式。

Jsx文法引用

         1.為什麼引用jsx文法？

                   解決了建立虛擬dom成本過大的問題。

         2.什麼是jsx文法？

                   簡單地說，就是jsx文法讓我們可以再js中寫xhtml

         3.如何引用jsx文法？

1. 引用一個庫檔案browser.min.js或者browser.js都行
2. 在編寫React的script標籤的type屬性為text/babel

**********************************jsx的程式編寫

插值符號

1. 什麼是插值符號？

插值符號簡單的說就是{}，在jsx文法中書寫注釋需要寫在插值符號中。

        

組件的屬性

1. props屬性

1.props屬性是什嗎？

和html給標籤添加一個類一樣，對於完全一致的統一組件他們戰士的樣式是完全一致的，給其中一個天價一些屬性，此時這個組件展示的結果就可能會不同，所以react提出了組件屬性的概念。

2．如何添加props屬性？

在jsx中為組件添加屬性跟html中添加屬性的方法是一模一樣的，只不過react組件可以執行插值(就是可以將js中資料添加到組件中)

1. state屬性

1什麼是無狀態組件？

如果組建建立並渲染到頁面中以後不會再更改，也就是說組件式一成不變的，這類組件我們只需要在建立之初為其添加一些屬性即可完成對央視行為的控制，這類組件以後再也不會改變了，我們稱之為無狀態組件(stateless組件)，簡單地說，就是不會與使用者產生互動，或者發送非同步請求。

2.什麼是有狀態組件？

如果組建建立後會根據使用者的不同互動產生不同的行為(如更改樣式)，這一類組件我們稱之為有狀態，組建處於那種狀態是由使用者決定。

3.state屬性是什嗎？

           組件內部通常會維護一個狀態，這個屬性就是state，和

          

 

 

組件的樣式

         1.樣式style屬性的值只能是對象，不能為style添加字串的值

         2.Font-size這類要用駝峰式

         3.Css3首碼的屬性第一個字母要大寫

         4.組件中定義一個虛擬dom我們都要用對象，並且可以使用變數，變數當中可以使用運算式。

react自學筆記總結不間斷更新