深刻淺出react

1，新建項目

爲了方便安裝一個初始化簡單的react組件，咱們能夠先經過npm 來安裝create-react-app 

 

npm install --global create-react-app 

create-react-app first_react_app 

注意：create-react-app默認的是npm鏡像  因爲npm屬於國外鏡像，有時候安裝會很慢。解決辦法

經過換源：npm config set registry https://registry.npm.taobao.org  默認設成淘寶鏡像

檢驗是否換源成功：npm info express或者npm config get registry

 

啓動項目

npm start

 

1.2增長一個新的 React組件 

import React, { Component } from 'react';

class ClickCounter extends Component {
  constructor(props) {
    super(props)
    this.onClickButton = this.onClickButton.bind(this);
    this.state = { count: 0 }
  }
  onClickButton() {
    this.setState({
      count: this.state.count + 1
    })

  }
  render() {
    const { count } = this.state
    return (
      <div>
        <div>
          <button onClick={this.onClickButton}>大師馬快點我</button>
        </div>
        <p>
          你點了{count}次
          </p>
      </div>

    )
  }
}
export default ClickCounter

　1.3 react工做方式

   實現一個點擊計數事件jq是如何工做的 (我就不上代碼了就是jq的基本點擊事件)

 在 jQuery 的解決方案中，首先根據 css 規則找到 id 爲 clickCount 的按鈕，掛上 一 個匿名事件處理函數，在事件處理函數中，選中那個須要被修改的 DOM 元素，讀取其 中的文本值，加以修改，而後修改這個 DOM 元素 。選中一些 DOM 元素，而後對這些元素作一些操做，這是一種最容易理解的開發模 式 。 jQuery 的發明人 John Resig 就是發現了網頁應用開發者的這個編程模式，才創造出 了 jQuery，其一 問世就獲得廣泛承認，由於這種模式直觀易懂 。 可是，對於龐大的項目， 這種模式會形成代碼結構複雜，難以維護，每一個 jQuery 的使用者都會有這種體會 。

 

打一個比方， React是一個聰明的建築工人，而 jQuery是一個比較傻的建築工人， 開發者你就是一個建築的設計師，若是是 jQuery 這個建築工人爲你工做，你不得不事無 鉅細地告訴 jQuery「如何去作」，要告訴他這面牆要拆掉重建，那面牆上要新開一個窗戶， 反之，若是是 React這個建築工人爲你工做，你所要作的就是告訴這個工人「我想要什 麼樣子」，只要把圖紙遞給 React這個工人，他就會替你搞定一切，固然他不會把整個建 築拆掉重建，而是很聰明地把此次的圖紙和上次的圖紙作一個對比，發現不一樣之處，然 後只去作適當的修改就完成任務了 。

顯而易見， React 的工做方式把開發者從繁瑣的操做中解放出來，開發者只須要着重 「我想要顯示什麼」，而不用操心「怎樣去作」 。

這種新的思惟方式，對於一個簡單的例子也要編寫很多代碼，感受像是用高射炮打 蚊子，可是對於一個大型的項目，這種方式編寫的代碼會更容易管理，由於整個 React 應用要作的就是渲染，開發者關注的是渲染成成什麼樣子，而不用關心如何實現增量 渲染。

React 的理念 ，歸結爲一個公式，就像下面這樣 : UI=render(data)

讓咱們來看看這個公式表達的含義，用戶看到的界面( UI)，應該是一個函數(在這 裏叫 render)的執行結果，只接受數據( data)做爲參數。 這個函數是一個純函數，所謂 純函數，指的是沒有任何反作用，輸出徹底依賴於輸入的函數，兩次函數調用若是輸人 相同，獲得的結果也絕對相同 。 如此一來，最終的用戶界面，在 render 函數肯定的狀況 下徹底取決於輸入數據 。

對於開發者來講，重要的是區分開哪些屬於 data，哪些屬於 render，想要更新用戶 界面，要作的就是更新 data，用戶界面天然會作出響應，因此 React實踐的也是「響應 式編程」( Reactive Programming)的思想，這也就是 React 爲何叫作 React 的緣由 。

 

Virtual DOM

既然 React應用就是經過重複渲染來實現用戶交互，你可能會有 一個疑慮:這樣的 重複渲染會不會效率過低了呢?畢竟，在 jQuery 的實現方式中，咱們能夠清楚地看到每 次只有須要變化的那一個 DOM 元素被修改了;但是，在 React 的實現方式中，看起來每 次 render 函數被調用，都要把整個組件從新繪製一次，這樣看起來有點浪費 。

事實並非這樣， React利用 Virtual DOM，讓每次渲染都只從新渲染最少的 DOM 元素。

要了解 Virtual DOM，就要先了解 DOM, DOM 是結構化文本的抽象表達形式，特

定於 Web 環境中，這個結構化文本就是 HTML 文本， HTML 中的每一個元素都對應 DOM 中某個節點，這樣，由於 HTML 元素的逐級包含關係， DOM 節點天然就構成了一個樹 形結構，稱爲 DOM 樹 。

瀏覽器爲了渲染 HTML 格式的網頁，會先將 HTML 文本解析以構建 DOM 樹，而後 根據 DOM 樹渲染出用戶看到的界面，當要改變界面內容的時候，就去改變 DOM 樹上的 節點。

Web 前端開發關於性能優化有一個原則 :儘可能減小 DOM 操做 。 雖然 DOM 操做也只 是一些簡單的 JavaScript語句，可是 DOM 操做會引發瀏覽器對網頁進行從新佈局，從新 繪製，這就是一個比 JavaScript語句執行慢不少的過程 。

若是使用 mustache 或者 hogan 這樣的模板工具，那就是生成 HTML 字符串塞到網頁 中，瀏覽器又要作一次解析產生新的 DOM 節點，而後替換 DOM 樹上對應的子樹部分， 這個過程確定效率不高 。 雖然 JSX 看起來很像是一個模板，可是最終會被 Babel 解析爲 一條條建立 React組件或者 HTML 元素的語句 ，神奇之處在於， React並非經過這些語 句直接構建 DOM 樹，而是首先構建 Virtual DOM。

既然 DOM 樹是對 HTML 的抽象，那 Virtual DOM 就是對 DOM 樹的抽象 。 Virutal DOM 不會觸及瀏覽器的部分，只是存在於 JavaScript 空間的樹形結構，每次自上而下 渲 染 React組件時，會對比這一次產生的 Virtual DOM 和上一次渲染的 Virtual DOM，對比 就會發現差異，而後修改真正的 DOM 樹時就只須要觸及差異中的部分就行 。

以 ClickCounter爲例，一開始點擊計數爲 0，用戶點擊按鈕讓點擊計數變成 l，這一 次從新渲染， React經過 Virtual DOM 的對比發現其實只是 id爲 clickCount 的 span元素 中內容從0變成了 l而已:

<span id=」 clickCount」 >{this.state.count}</span> React發現此次渲染要作的事情只是更換這個 span元素的內容而已，其餘 DOM 元

素都不須要觸及，因而執行相似下面的語句，就完成了任務:

document.getElementByld (」clickCount」) .innerHTML = 」1」;

 

jq方式形成的代碼糾纏

使用 React 的方式，就能夠避免構建這樣複雜的程序結構，不管何種事件，引起的 都是 React 組件的從新渲染，至於如何只修改必要的 DOM 部分，則徹底交給 React 去操 做，開發者並不須要關心，