大家都知道 react 是 facebook 的產(chǎn)品，而 angular 是 google 產(chǎn)品，angular 是用 typescript 來(lái)編寫(xiě)，通過(guò) typescript 這個(gè) javascript 超級(jí)是 angular 可以輕松地勝任開(kāi)發(fā)大型應(yīng)用。

而且形成自己生態(tài)，自己語(yǔ)言自己框架。所以 facebook 可能也不甘示弱，準(zhǔn)備用一門(mén)其他語(yǔ)言類(lèi)型的語(yǔ)言來(lái)高效寫(xiě)出穩(wěn)定可靠的 javascript 語(yǔ)言。最終選擇了這個(gè)有了 20 多年歷史的語(yǔ)言 ocaml， 估計(jì)很多人連聽(tīng)都過(guò)這門(mén)語(yǔ)言。

這是一門(mén)函數(shù)式編程的語(yǔ)言。但是 ocaml 是無(wú)法運(yùn)行在瀏覽器上的，而且需要對(duì)前端那些熟悉 javascript 的程序員友好。為了解決這些問(wèn)題，出現(xiàn)了 Reason ，reason 是 OCaml 的語(yǔ)言接口，對(duì)于有 javascript 開(kāi)發(fā)經(jīng)驗(yàn)的開(kāi)發(fā)者友好。有了 reason 那么如何將 reason 編譯為 javascript 呢？答案是?BuckleScript ，BS (BuckleScript )是將 ocamel/reason 編譯為 javascript 的編譯器。

這不是一個(gè)簡(jiǎn)單的編譯轉(zhuǎn)換工具，BS 不但可以將 Ocaml

?代碼編譯為 javascript 而且是可以編譯為高效的 javascript，而且易于閱讀。編譯后的代碼你是看不這是機(jī)器寫(xiě)的，而且 BS 也是中國(guó)人寫(xiě)的，是我們的驕傲。

這么三個(gè)相對(duì)獨(dú)立的語(yǔ)言和工具，他們之間的關(guān)系又是怎么建立起來(lái)的呢？
我們通過(guò)分析 Ocaml 編譯器來(lái)看一看是如何將他們整合到一起的。

我們從 Ocaml 編譯過(guò)程作為切入點(diǎn)進(jìn)行分析，將三者聯(lián)系起來(lái)。

source code ：在這個(gè)階段編譯器獲取 OCaml 的代碼

unTyped AST ：進(jìn)行代碼進(jìn)行解析和預(yù)處理，后生產(chǎn)一個(gè)棵沒(méi)有類(lèi)型的 AST 。

Typed AST ：然后對(duì)類(lèi)型進(jìn)行推測(cè)和檢驗(yàn)生產(chǎn)有類(lèi)型的 AST。

Lambda IR ：這應(yīng)該是 Ocaml 重點(diǎn)，但是應(yīng)該不是我們今天重點(diǎn)，不過(guò)可以了解一下

將定義類(lèi)型的 AST 轉(zhuǎn)為為無(wú)類(lèi)型的 IR ，轉(zhuǎn)換格式依據(jù) s-express

這句話(huà)中出現(xiàn)了兩個(gè)難懂的詞 IR 和 s-express

s-express 知乎一下沒(méi)有，wiki 中找到了，我們嘗試?yán)斫庖幌隆?/p>

百度一下，百度翻譯的還不錯(cuò)。在此基礎(chǔ)解釋一下。

**s-expression**應(yīng)該是一種表示數(shù)據(jù)結(jié)構(gòu)的表達(dá)方式例如（*2（+3 4）），就是將剛剛生產(chǎn)樹(shù)形結(jié)構(gòu)數(shù)據(jù)表達(dá)成這樣。是嵌套列表（樹(shù)形結(jié)構(gòu)）數(shù)據(jù)的一種表示法，由編程語(yǔ)言lisp發(fā)明并推廣，它將它們用于源代碼和數(shù)據(jù)。

Bytecode ：最后經(jīng)過(guò)進(jìn)行推理將 IR 編譯成字節(jié)碼或機(jī)器碼

了解 ocaml 的整個(gè)編譯過(guò)程，那么我們的 reason 和 bs 出現(xiàn)在哪個(gè)階段呢？

Reason 出現(xiàn)在 unTyped AST 這個(gè)編譯階段，通過(guò)一些預(yù)處理讓我們?cè)创a可以解析成 AST 支持一些新語(yǔ)法的特性

BuckleScript 將使用無(wú)類(lèi)型的 IR 進(jìn)行編譯為可以高效執(zhí)行的 javascript 而不是字節(jié)碼和機(jī)器碼

BuckleScript 的神奇之處編譯的 javascript 可能比你這的還好。計(jì)算機(jī)更喜歡函數(shù)式編程。讓我們擁抱機(jī)器，學(xué)一點(diǎn)稍微難于理解但是高效的函數(shù)式編程吧。

React 已經(jīng)采用 reason 來(lái)寫(xiě)組件，下面列出其好處。

- 更安全，更簡(jiǎn)潔的方式去構(gòu)建 React 組件

- 完全兼容 JSX

- 類(lèi)型安全兼容 javascript 編寫(xiě)的組件

- 用于一種全新的表述型 API 來(lái)描述狀態(tài)管理

昨天我們通過(guò)一個(gè)示例，做了一個(gè)簡(jiǎn)單的 Demo。也知道我們可以用 reason 來(lái)寫(xiě) react 組件，reason 提供兩種模板讓我們來(lái)創(chuàng)建組件。

無(wú)類(lèi)型的組件statelessComponent

let component = ReasonReact.statelessComponent("SimpleComponent");let make = _children => { ...component, render: _self =>
(ReasonReact.string("Reason Projects"))
, };

然后我們創(chuàng)建一個(gè) TutData.re 文件，其中定義一個(gè) tut 類(lèi)型，定義數(shù)據(jù)的結(jié)構(gòu)。

type tut = { title:string, body:string}

我們創(chuàng)建一個(gè) statessComponent 組件。

let component = ReasonReact.statelessComponent("SimpleComponent");let make = _children => { ...component, render: _self => {  
 
(ReasonReact.string("Reason Projects")) 
; },};

我們?cè)诙x一個(gè)組件 TutItem，~tut 表示給這個(gè)參數(shù)打一個(gè)標(biāo)簽，雖然我們可調(diào)整參數(shù)的位置，然后通過(guò)標(biāo)簽對(duì)參數(shù)進(jìn)行傳值。

let component = ReasonReact.statelessComponent("TutItem");let make =(~tut: TutData.tut, _children) => { ...component, render: _self => { //創(chuàng)建數(shù)據(jù)  
 (ReasonReact.string(tut.title)) 
; },};

創(chuàng)建 tut 類(lèi)型的 dummyTut 的數(shù)據(jù)，然后將 dummyTut 通過(guò) prop 傳入組件。

let component = ReasonReact.statelessComponent("SimpleComponent");let make = _children => { ...component, render: _self => { //創(chuàng)建數(shù)據(jù) let dummyTut:TutData.tut = { title:"angular tut", body:"angular tut body" }; <div>  <h1>(ReasonReact.string("Reason Projects")) h1> <TutItem tut=dummyTut/> div>; },};