React中的核心概念

                                                         React中的核心概念                                                          

* 1 虛擬DOM（Virtual DOM）

* 2 Diff算法（虛擬DOM的加速器，提高React性能的法寶）

 

虛擬DOM（Vitural DOM）

React將DOM抽象爲虛擬DOM，虛擬DOM其實就是用一個對象來描述DOM，經過對比先後兩個對象的差別，最終只把變化的部分從新渲染，提升渲染的效率

爲何用虛擬dom，當dom反生更改時須要遍歷 而原生dom可遍歷屬性多大231個 且大部分與渲染無關 更新頁面代價太大

VituralDOM的處理方式

* 1 用 JavaScript 對象結構表示 DOM 樹的結構，而後用這個樹構建一個真正的 DOM 樹，插到文檔當中

* 2 當狀態變動的時候，從新構造一棵新的對象樹。而後用新的樹和舊的樹進行比較，記錄兩棵樹差別

* 3 把2所記錄的差別應用到步驟1所構建的真正的DOM樹上，視圖就更新了

Diff算法

當你使用React的時候，在某個時間點 render() 函數建立了一棵React元素樹，

在下一個state或者props更新的時候，render() 函數將建立一棵新的React元素樹，

React將對比這兩棵樹的不一樣之處，計算出如何高效的更新UI（只更新變化的地方）

 

Diff算法的說明 - 1

* 若是兩棵樹的根元素類型不一樣，React會銷燬舊樹，建立新樹

// 舊樹

<div>

  <Counter /></div>

// 新樹

<span>

  <Counter /></span>

執行過程：destory Counter -> insert Counter

Diff算法的說明 - 2

* 對於類型相同的React DOM 元素，React會對比二者的屬性是否相同，只更新不一樣的屬性

* 當處理完這個DOM節點，React就會遞歸處理子節點。

 

// 舊

<div className="before" title="stuff" />

// 新

<div className="after" title="stuff" />

只更新：className 屬性

 

// 舊

<div style={{color: 'red', fontWeight: 'bold'}} />

// 新

<div style={{color: 'green', fontWeight: 'bold'}} />

只更新：color屬性

Diff算法的說明 - 3

* 1 當在子節點的後面添加一個節點，這時候兩棵樹的轉化工做執行的很好

// 舊

<ul>

  <li>first</li>

  <li>second</li>

</ul>

// 新

<ul>

  <li>first</li>

  <li>second</li>

  <li>third</li>

</ul>

執行過程：

React會匹配新舊兩個<li>first</li>，匹配兩個<li>second</li>，而後添加 <li>third</li> tree

* 2 可是若是你在開始位置插入一個元素，那麼問題就來了：

// 舊

<ul>

  <li>Duke</li>

  <li>Villanova</li>

</ul>

// 新

<ul>

  <li>Connecticut</li>

  <li>Duke</li>

  <li>Villanova</li>

</ul>

在沒有key屬性時執行過程：

React將改變每個子刪除從新建立，而非保持 <li>Duke</li> 和 <li>Villanova</li> 不變

key 屬性

爲了解決以上問題，React提供了一個 key 屬性。當子節點帶有key屬性，React會經過key來匹配原始樹和後來的樹。

// 舊

<ul>

  <li key="2015">Duke</li>

  <li key="2016">Villanova</li>

</ul>

// 新

<ul>

  <li key="2014">Connecticut</li>

  <li key="2015">Duke</li>

  <li key="2016">Villanova</li>

</ul>

執行過程：

如今 React 知道帶有key '2014' 的元素是新的，對於 '2015' 和 '2016' 僅僅移動位置便可

* 說明：key屬性在React內部使用，但不會傳遞給你的組件

* 推薦：在遍歷數據時，推薦在組件中使用 key 屬性：<li key={item.id}>{item.name}</li>

* 注意：key只須要保持與他的兄弟節點惟一便可，不須要全局惟一

* 注意：儘量的減小數組index做爲key，數組中插入元素的等操做時，會使得效率底下

---

---

                                                                        React的基本使用

* 安裝：npm i -S react react-dom

* react：react 是React庫的入口點

* react-dom：提供了針對DOM的方法，好比：把建立的虛擬DOM，渲染到頁面上

// 1. 導入 react

import React from 'react'

import ReactDOM from 'react-dom'

 

// 2. 建立 虛擬DOM

// 參數1：元素名稱  參數2：元素屬性對象(null表示無)  參數3：當前元素的子元素string||createElement() 的返回值

const divVD = React.createElement('div', {

  title: 'hello react'

}, 'Hello React！！！')

 

// 3. 渲染

// 參數1：虛擬dom對象  參數2：dom對象表示渲染到哪一個元素內 參數3：回調函數

ReactDOM.render(divVD, document.getElementById('app'))

createElement()的問題

* 說明：createElement()方式，代碼編寫不友好，太複雜

var dv = React.createElement(

  "div",

  { className: "shopping-list" },

  React.createElement(

    "h1",

    null,

    "Shopping List for "

  ),

  React.createElement(

    "ul",

    null,

    React.createElement(

      "li",

      null,

      "Instagram"

    ),

    React.createElement(

      "li",

      null,

      "WhatsApp"

    )

  )

)

// 渲染

ReactDOM.render(dv, document.getElementById('app'))

JSX 的基本使用

* 注意：JSX語法，最終會被編譯爲 createElement() 方法

* 推薦：使用 JSX 的方式建立組件

* JSX - JavaScript XML

* 安裝：npm i -D babel-preset-react （依賴與：babel-core/babel-loader）

注意：JSX的語法須要經過 babel-preset-react 編譯後，才能被解析執行

/* 1 在 .babelrc 開啓babel對 JSX 的轉換 */

{

  "presets": [

    "env", "react"

  ]

}

 

/* 2 webpack.config.js */

module: [

  rules: [

    { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ },

  ]

]

 

/* 3 在 js 文件中 使用 JSX */

const dv = (

  <div title="標題" className="cls container">Hello JSX!</div>

)

 

/* 4 渲染 JSX 到頁面中 */

ReactDOM.render(dv, document.getElementById('app'))

JSX的注意點

* 注意 1: 若是在 JSX 中給元素添加類, 須要使用 className 代替 class

* 相似：label 的 for屬性，使用htmlFor代替

* 注意 2：在 JSX 中能夠直接使用 JS代碼，直接在 JSX 中經過 {} 中間寫 JS代碼便可

* 注意 3：在 JSX 中只能使用表達式，可是不能出現 語句！！！

* 注意 4：在 JSX 中註釋語法：{/* 中間是註釋的內容 */}

React組件

React 組件可讓你把UI分割爲獨立、可複用的片斷，並將每一片斷視爲相互獨立的部分。

* 組件是由一個個的HTML元素組成的

* 概念上來說, 組件就像JS中的函數。它們接受用戶輸入（props），而且返回一個React對象，用來描述展現在頁面中的內容

React建立組件的兩種方式

* 1 經過 JS函數 建立（無狀態組件）

* 2 經過 class 建立（有狀態組件）

函數式組件 和 class 組件的使用場景說明：

1 若是一個組件僅僅是爲了展現數據，那麼此時就可使用 函數組件

2 若是一個組件中有必定業務邏輯，須要操做數據，那麼就須要使用 class 建立組件，由於，此時須要使用 state

JavaScript函數建立

* 注意：1 函數名稱必須爲大寫字母開頭，React經過這個特色來判斷是否是一個組件

* 注意：2 函數必須有返回值，返回值能夠是：JSX對象或null

* 注意：3 返回的JSX，必須有一個根元素

* 注意：4 組件的返回值使用()包裹，避免換行問題

function Welcome(props) {

  return (

    // 此處註釋的寫法

    <div className="shopping-list">

      {/* 此處 註釋的寫法 必需要{}包裹 */}

      <h1>Shopping List for {props.name}</h1>

      <ul>

        <li>Instagram</li>

        <li>WhatsApp</li>

      </ul>

    </div>

  )

}

 

ReactDOM.render(

  <Welcome name="jack" />,

  document.getElementById('app')

)

class建立

在es6中class僅僅是一個語法糖，不是真正的類，本質上仍是構造函數+原型 實現繼承

// ES6中class關鍵字的簡單使用

 

// - **ES6中的全部的代碼都是運行在嚴格模式中的**

// - 1 它是用來定義類的，是ES6中實現面向對象編程的新方式

// - 2 使用`static`關鍵字定義靜態屬性

// - 3 使用`constructor`構造函數，建立實例屬性

// - [參考](http://es6.ruanyifeng.com/#docs/class)

 

// 語法：

class Person {

  // 實例的構造函數 constructor

  constructor(age){

    // 實例屬性

    this.age = age

  }

  // 在class中定義方法 此處爲實例方法 經過實例打點調用

  sayHello () {

    console.log('你們好，我今年' + this.age + '了');

  }

 

  // 靜態方法 經過構造函數打點調用 Person.doudou()

  static doudou () {

    console.log('我是小明，我新get了一個技能，會暖牀');

  }

}

// 添加靜態屬性

Person.staticName = '靜態屬性'

// 實例化對象

const p = new Person(19)

// 實現繼承的方式

class American extends Person {

  constructor() {

    // 必須調用super(), super表示父類的構造函數

    super()

    this.skin = 'white'

    this.eyeColor = 'white'

  }

}

 

// 建立react對象

// 注意：基於 `ES6` 中的class，須要配合 `babel` 將代碼轉化爲瀏覽器識別的ES5語法

// 安裝：`npm i -D babel-preset-env`

//  react對象繼承字React.Component

class ShoppingList extends React.Component {

  constructor(props) {

    super(props)

  }

  // class建立的組件中 必須有rander方法 且顯示return一個react對象或者null

  render() {

    return (

      <div className="shopping-list">

        <h1>Shopping List for {this.props.name}</h1>

        <ul>

          <li>Instagram</li>

          <li>WhatsApp</li>

        </ul>

      </div>

    )

  }

}