摘要：于是好處顯而易見，并非每修改一次組件的，就會重新渲染一次，而是在結束后做一次計算，減少冗余的操作。基于上述的兩點，很自然的就獲得一部分開發者的青睞。

歡迎大家前往騰訊云+社區，獲取更多騰訊海量技術實踐干貨哦~

本文由鵝廠新鮮事兒發表于云+社區專欄

作者：盧文喆 騰訊云 UI工程師

導語 | 當React 剛開始紅的時候，一直覺得 JSX 的設計思想極其獨特，屬于革命性的創新，它性能出眾，代碼邏輯卻非常簡單，所以，受到很多開發者的關注和使用，認為它可能是將來 Web 開發的主流工具。

React 最早起源于 Facebook 的一個內部項目，因為公司對現有的 JavaScript MVC 框架都不滿意，就決定自己開發一套，用來架設 Instagram 的網站。開發完成后，發現這套東西很好用，就在2013年5月開源了。

那么 React 優勢在哪里呢？

首先：虛擬 DOM，在 DOM 樹的狀態需要發生變化時，虛擬 DOM 機制會將同一Event loop前后的 DOM樹進行對比，如果兩個 DOM 樹存在不一樣的地方，那么 React 僅僅會針對這些不一樣的區域來進行響應的 DOM 修改，從而實現最高效的 DOM 操作和渲染。

比如，我們修改了 DOM 樹上一些節點或 UI 組件對應綁定的 state，React 會即刻將其標記為“臟狀態”，在一個 Event loop 結束時，React 會計算得出 DOM 樹上需要修改的地方及其最終的狀態，并僅僅針對這些地方進行一次性的重新渲染。

于是好處顯而易見，并非每修改一次組件的 state，就會重新渲染一次，而是在 Event loop 結束后做一次計算，減少冗余的 DOM 操作。另外 React 只針對需要修改的地方來做新的渲染，而非重新渲染整個 DOM 樹，自然效率很高。

其次：組件可嵌套，而且，可以模版化 —— 其實在 React 里提及的“組件”，常規是一些可封裝起來、復用的 UI 模塊，可以理解為“帶有細粒度UI功能的部分DOM區域”。然后我們可以把這些組件層層嵌套起來使用，當然這樣組件間會存在依賴關系。

至于模塊化，類似于 ejs 那樣可以作為獨立的模塊被引用到頁面上來復用，它可以直接把 UI 組件當作腳本模塊那樣來使用，完全可以配合 CommonJS、AMD、CMD 等規范來 require 需要的組件模塊，并處理好它們的依賴關系。

基于上述的兩點，React 很自然的就獲得一部分開發者的青睞。不過在這之前得先理清兩件事情：

1. React 是一個純 View 層，不擅長于和動態數據打交道，因此它不同于，也替代不了常規的框架；

2. React 很擅長于處理組件化的頁面，在頁面上搭組件的形式有點像搭積木一樣，因此用上React的項目需求常規為界面組件化。

簡單點說，React組件應該具有如下特征：

（1）可組合（Composeable）：一個組件易于和其它組件一起使用，或者嵌套在另一個組件內部。如果一個組件內部創建了另一個組件，那么說父組件擁有它創建的子組件，通過這個特性，一個復雜的UI可以拆分成多個簡單的 UI 組件；

（2）可重用（Reusable）：每個組件都是具有獨立功能的，它可以被使用在多個UI場景；

（3）可維護（Maintainable）：每個小的組件僅僅包含自身的邏輯，更容易被理解和維護；

組件化一直是網頁開發的利器，許多開發者最希望能夠最大程度的重復使用過去的開發的組件，避免重復造輪子。在 React 中組件就是一切，前端開發可能需要花點時間轉變思維，尤其過去我們往往習慣將 HTML 、CSS 和 JavaScript 分離，現在卻要把它們都封裝在一起。

以下是一般 React Component 書寫的主要兩種方式：

1.使用 ES6 的 Class

//  注意組件首字母需要大寫
class MyComponent extends React.Component {
    // render 是 Class based 元件唯一必須的方法（method）
    render() {
        return (
            
Hello, World!
        );
    }
}

// 將  組件插入 id 為 app 的 DOM 元素中
ReactDOM.render(, document.getElementById("app"));

2.使用 Functional Component 寫法

// 使用 arrow function 來設計 Functional Component 讓 UI 設計更便捷，避免互相干擾（side effect）
const MyComponent = () => (
    
Hello, World!
);

// 將  組件插入 id 為 app 的 DOM 元素中
ReactDOM.render(, document.getElementById("app"));

前面說到 React 有獨有的 JSX 語法，那么到底什么是 JSX 呢？

JSX在ECMAScript的基礎上提供了類似于XML的擴展。 JSX和HTML有點像，但也有不一樣的地方。例如，HTML中的class屬性在JSX中 為className。其他不一樣的地方，你可以參考FB的HTML Tags vs. React Components 這篇文章。

但是由于瀏覽器原生并不支持JSX，因此我們需要將其編譯為JS，有很多方法能夠 完成這個任務，后面我們會提到這些方法。此外，Babel也能夠講JSX編譯為JS。

一些參考資料：

JSX in depth

Online JSX compiler

Babel: How to use the react transformer

一般而言 JSX 通常有兩種使用方式：

1.使用 browserify 或 webpack 等 CommonJS bundler 并整合 babel 預處理

2.在瀏覽器端做解析

請大家注意JSX的語法書寫方式：

一般載入 JSX 方式有：

內嵌

從外部引入

? ? ?

總結：以上都是我對 React 簡單的了解，包括 React 的優勢、組件化的特征、React Component 的方法、以及 React 中為何要使用 JSX，以及 JSX 基本概念和用法。在 React 里，所有的事物都是以 Component 為基礎，通常會將同一個 Component 相關的資源放在一起，而在撰寫 React Component 時我們常會使用 JSX 的方式來提升書寫效率。 JSX 是一種語法類似 XML 的 ECMAScript 語法擴充，可以發揮 JavaScript 的強大能力，放棄蹩腳的模板語言。當然 JSX 并非強制使用，你也可以選擇不用，因為最終 JSX 的內容都會轉化成 JavaScript。

以上就是對 React 入門的部分理解。

問答
如何擴展React.js組件？
相關閱讀
AI從入門到放棄：CNN的導火索，用MLP做圖像分類識別？
開發效率太低?您可能沒看這篇文章
微信車票背后的設計故事 
【每日課程推薦】機器學習實戰！快速入門在線廣告業務及CTR相應知識

此文已由作者授權騰訊云+社區發布，更多原文請點擊

搜索關注公眾號「云加社區」，第一時間獲取技術干貨，關注后回復1024 送你一份技術課程大禮包！

海量技術實踐經驗，盡在云加社區！