摘要：于是好處顯而易見(jiàn)，并非每修改一次組件的，就會(huì)重新渲染一次，而是在結(jié)束后做一次計(jì)算，減少冗余的操作?；谏鲜龅膬牲c(diǎn)，很自然的就獲得一部分開(kāi)發(fā)者的青睞。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

簡(jiǎn)單點(diǎn)說(shuō)，React組件應(yīng)該具有如下特征：

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

（2）可重用（Reusable）：每個(gè)組件都是具有獨(dú)立功能的，它可以被使用在多個(gè)UI場(chǎng)景；

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

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

以下是一般 React Component 書(shū)寫(xiě)的主要兩種方式：

1.使用 ES6 的 Class

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

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

2.使用 Functional Component 寫(xiě)法

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

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

前面說(shuō)到 React 有獨(dú)有的 JSX 語(yǔ)法，那么到底什么是 JSX 呢？

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

但是由于瀏覽器原生并不支持JSX，因此我們需要將其編譯為JS，有很多方法能夠 完成這個(gè)任務(wù)，后面我們會(huì)提到這些方法。此外，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.在瀏覽器端做解析

請(qǐng)大家注意JSX的語(yǔ)法書(shū)寫(xiě)方式：

一般載入 JSX 方式有：

內(nèi)嵌

從外部引入

? ? ?

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

以上就是對(duì) React 入門(mén)的部分理解。

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

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

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

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