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

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

本文由鵝廠新鮮事兒發(fā)表于云+社區(qū)專欄

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

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

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

那么 React 優(yōu)勢在哪里呢？

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

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

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

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

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

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

1. React 是一個純 View 層，不擅長于和動態(tài)數(shù)據(jù)打交道，因此它不同于，也替代不了常規(guī)的框架；

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

簡單點說，React組件應(yīng)該具有如下特征：

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

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

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

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

以下是一般 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 來設(shè)計 Functional Component 讓 UI 設(shè)計更便捷，避免互相干擾（side effect）
const MyComponent = () => (
    
Hello, World!
);

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

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

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

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

一些參考資料：

JSX in depth

Online JSX compiler

Babel: How to use the react transformer

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

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

2.在瀏覽器端做解析

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

一般載入 JSX 方式有：

內(nèi)嵌

從外部引入

? ? ?

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

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

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

此文已由作者授權(quán)騰訊云+社區(qū)發(fā)布，更多原文請點擊

搜索關(guān)注公眾號「云加社區(qū)」，第一時間獲取技術(shù)干貨，關(guān)注后回復(fù)1024 送你一份技術(shù)課程大禮包！

海量技術(shù)實踐經(jīng)驗，盡在云加社區(qū)！