前端之React實戰-背景概述

Introduction

React並非一個完整的MVC或者MVVM框架，它與Angular也是負責不一樣的方面，它最大的功能是提供一個高效的視圖層。React提供了一些新穎的概念、庫和編程原則讓你可以同時在服務端和客戶端編寫快速、緊湊、漂亮的代碼來構建你的web應用。若是你使用React，那麼可能會涉及到一些經常使用的概念或技術，包括：

• ES6 React

• 虛擬DOM（virtual DOM）

• 組件驅動開發（component-driven development）

• 不變性（immutability）

• 自上而下的渲染（top-down rendering）

• 渲染路徑和優化

• 打包工具, ES6, 構建請求, debugging, 路由等

• 同構React（isomorphic React）

在具體的React實踐中，考慮到純粹的UI或者UX設計人員，他們可能只會將CSS與HTML進行組合，換言之，大量的賦值仍是會放置在HTML而非JSX中，建議仍是能夠運用jQuery+React或者Angular+React的方式。

Virtual Dom

如咱們所知，在瀏覽器渲染網頁的過程當中，加載到HTML文檔後，會將文檔解析並構建DOM樹，而後將其與解析CSS生成的CSSOM樹一塊兒結合產生愛的結晶——RenderObject樹，而後將RenderObject樹渲染成頁面（固然中間可能會有一些優化，好比RenderLayer樹）。這些過程都存在與渲染引擎之中，渲染引擎在瀏覽器中是於JavaScript引擎（JavaScriptCore也好V8也好）分離開的，但爲了方便JS操做DOM結構，渲染引擎會暴露一些接口供JavaScript調用。因爲這兩塊相互分離，通訊是須要付出代價的，所以JavaScript調用DOM提供的接口性能不咋地。各類性能優化的最佳實踐也都在儘量的減小DOM操做次數。

而虛擬DOM幹了什麼？它直接用JavaScript實現了DOM樹（大體上）。組件的HTML結構並不會直接生成DOM，而是映射生成虛擬的JavaScript DOM結構，React又經過在這個虛擬DOM上實現了一個 diff 算法找出最小變動，再把這些變動寫入實際的DOM中。這個虛擬DOM以JS結構的形式存在，計算性能會比較好，並且因爲減小了實際DOM操做次數，性能會有較大提高。

React渲染出來的HTML標記都包含了data-reactid屬性，這有助於React中追蹤DOM節點。

• React’s diff algorithm

• The Secrets of React’s virtual DOM

• Why is React’s concept of virtual DOM said to be moreperformant than dirty model checking?

• virtual-dom

單向數據流

在React中，應用利用State與Props對象實現單向數據流的傳遞。換言之，在一個多組件的架構中，某個父類組件只會負責響應自身的State，而且經過Props在鏈中傳遞給本身的子元素。

/** @jsx React.DOM */

var FilteredList = React.createClass({
  filterList: function(event){
    var updatedList = this.state.initialItems;
    updatedList = updatedList.filter(function(item){
      return item.toLowerCase().search(
        event.target.value.toLowerCase()) !== -1;
    });
    this.setState({items: updatedList});
  },
  getInitialState: function(){
     return {
       initialItems: [
         "Apples",
         "Broccoli",
         "Chicken",
         "Duck",
         "Eggs",
         "Fish",
         "Granola",
         "Hash Browns"
       ],
       items: []
     }
  },
  componentWillMount: function(){
    this.setState({items: this.state.initialItems})
  },
  render: function(){
    return (
      <div className="filter-list">
        <input type="text" placeholder="Search" onChange={this.filterList}/>
      <List items={this.state.items}/>
      </div>
    );
  }
});

var List = React.createClass({
  render: function(){
    return (
      <ul>
      {
        this.props.items.map(function(item) {
          return <li key={item}>{item}</li>
        })
       }
      </ul>
    )  
  }
});

React.render(<FilteredList/>, document.getElementById('mount-point'));

[React