【譯】爲何ReasonReact是編寫React的最佳方式

原文地址：medium.freecodecamp.org/psst-heres-…

你是否使用 React 來構建用戶界面？好吧，我也是。接下來你會了解爲何要使用 ReasonML 來寫 React 應用。

React 是構建用戶界面的一種很酷的手段，咱們該如何讓這個過程變得更酷呢？

爲了回答這個問題，咱們首先要了解 React 做爲 JavaScript 庫的主要問題是什麼？

React 最初並非爲了 JavaScript 而開發的

若是你有深刻了解 React，你會發現它的一些主要原則對 JavaScript 來講是陌生的，讓咱們就 不可變性，函數式編程原則，特別是類型系統來討論一下這個問題。

• 不可變性是 React 的核心原則，你確定不想要改變 props 或者 state，由於你一旦改變了它們，你將面對不可預期的後果。在 JavaScript 中，沒有開箱即用的不可變性，咱們經過約定保持數據的不可變性，或者使用 immutableJS 這樣的庫來輔助咱們達到目的。
• React 基於函數式編程的原理，由於 React 應用是函數的組合。儘管 JavaScript 具備一些函數式編程的特性，例如頭等函數（是指在程序設計語言中，函數被看成頭等公民），可是它並非一個函數式編程語言。當咱們想要寫一些優雅的聲明式代碼的時候，咱們還須要像 Lodash/fp 或者 Ramda 的庫的輔助。
• 那麼類型系統呢？咱們使用React 中的 PropTypes來約定數據類型，由於 JavaScript 自己不是靜態類型語言。爲了使用強大的靜態類型檢查，咱們仍然仍是須要 Flow 和 TypeScript 這樣的庫來輔助。

如您所見，JavaScript 與 React 的核心原則不兼容。

有沒有什麼語言比 JavaScript 更適合用來寫 React 呢？

幸運的是，咱們有 ReasonML。

由於 ReasonML 是基於 OCaml 這樣的函數式編程語言，因此 ReasonML 內置了不可變性這樣的語言特性，瓜熟蒂落地，咱們有了開箱即用的不可變性。Reason還爲咱們提供了一個強大的類型系統。

Reason 兼容了 React 的核心原則。

Reason

Reason 不是一種新語言。它是 OCaml 的另外一種相似 JavaScript 的語法和工具鏈，一種已經存在了20多年的函數式編程語言。Reason是由已經在項目中使用OCaml的Facebook開發人員建立的（Flow，Infer）。

具備類 C 語法的 Reason 使得 OCaml 更容易被 JavaScript或Java等主流語言的用戶所接受。 它爲您提供了更好的文檔（與OCaml相比）和不斷增加的社區。 此外，它還能夠更輕鬆地與現有的JavaScript代碼庫集成。

Reason 語言基於 OCaml 語言，Reason與OCaml具備相同的語義 - 只有語法不一樣。 這意味着您可使用Reason的相似JavaScript的語法編寫OCaml。 所以，您能夠利用OCaml的強大功能，例如強大的類型系統和模式匹配。

咱們來看一下Reason的語法示例。

let fizzbuzz = (i) =>
  switch (i mod 3, i mod 5) {
  | (0, 0) => "FizzBuzz"
  | (0, _) => "Fizz"
  | (_, 0) => "Buzz"
  | _ => string_of_int(i)
  };
for (i in 1 to 100) {
  Js.log(fizzbuzz(i))
};
複製代碼

雖然咱們在這個例子中使用了模式匹配，但它仍然很是相似於JavaScript，對吧？ 可是，瀏覽器惟一可用的語言仍然是JavaScript，這意味着咱們須要編譯它。

BuckleScript

Reason的強大功能之一是BuckleScript編譯器，它能夠獲取您的Reason代碼，並將其編譯爲可讀且高性能的JavaScript，並消除了極大的代碼。若是你在一個不是每一個人都熟悉 Reason 的團隊工做，你會感激可讀性，由於他們仍然可以閱讀編譯後的 JavaScript 代碼。 由於 Reason 與 JavaScript 的有很大的類似性，因此一些 Reason 的代碼根本不須要由編譯器進行更改。 所以，您能夠享受靜態類型語言帶來的好處，而無需更改任何代碼。

let add = (a, b) => a + b;
add(6, 9);
複製代碼

上面這段代碼在 Reason 中和 JavaScript 中都有效。

BuckleScript 附帶了四個庫：名爲 Belt 的標準庫（ OCaml 標準庫不足），以及與 JavaScript，Node.js和 DOM API 的綁定。

因爲 BuckleScript 基於 OCaml 編譯器，所以您將得到比 Babel 快得多的快速編譯，而且比 TypeScript 快幾倍。

讓咱們編譯咱們在Reason中編寫的FizzBu​​zz算法。

如您所見，生成的 JavaScript 代碼很是易讀，就像是由 JavaScript 開發人員編寫的。 Reason 不只編譯爲 JavaScript，還編譯爲原生語言和字節碼。 所以，您可使用 Reason 語法編寫單個應用程序，並可以在 MacOS，Android 和 iOS 手機上的瀏覽器中運行它。 Jared Forsyth 有一款叫作 Gravitron 的遊戲，它是用 Reason 編寫的，它能夠在我剛剛提到的全部平臺上運行。

JavaScript 互操做

BuckleScript 還爲咱們提供了 JavaScript 互操做性。 您不只能夠將本身正在運行的 JavaScript 代碼粘貼到 Reason 代碼庫中，還能夠將 Reason 代碼與該 JavaScript 代碼進行交互。 這意味着您能夠輕鬆地將 Reason 代碼集成到現有的 JavaScript 代碼庫中。 此外，您能夠在 Reason 代碼中使用 NPM 生態系統中的全部 JavaScript 包。 例如，您能夠在單個項目中將 Flow，TypeScript 和 Reason 組合在一塊兒。

然而，事情並不是那麼簡單。 要在Reason中使用JavaScript庫或代碼，您須要首先經過Reason綁定將其移植到Reason。換句話說，您須要類型爲您的無類型JavaScript代碼，以便可以利用Reason的強類型系統。

每當您須要在Reason代碼中使用 JavaScript 庫時，請經過瀏覽 Reason Package Index（Redex）數據庫來檢查庫是否已移植到 Reason。 它是一個網站，它使用 Reason 綁定聚合使用 Reason 和 JavaScript 庫編寫的不一樣庫和工具。

若是您在那裏找到了庫，則能夠將其做爲依賴項安裝，並在 Reason 應用程序中使用它。 可是，若是您沒有找到您的庫，則須要本身編寫Reason綁定。 若是您剛開始使用 Reason ，請記住，編寫綁定不是您想要開始的事情，由於它是 Reason 生態系統中更具挑戰性的事情之一。

幸運的是，我正在寫一篇關於編寫Reason綁定的帖子，敬請期待！ 當您須要JavaScript庫中的某些功能時，您不須要爲整個庫編寫Reason綁定。 您只能對須要使用的功能或組件執行此操做。

ReasonReact

本文是關於在 Reason 中的 React，感謝 ReasonReact 庫能夠作到這一點。

也許你如今在想「我仍然不知道爲何我應該在 Reason 中使用 React。」 咱們已經提到過這樣作的主要緣由 - Reason 比 JavaScript 更兼容 React。

爲何它更兼容？由於 React 是爲 Reason 開發的，或者更準確地說是爲 OCaml 開發的。

React 的第一個原型是由 Facebook 開發的，用 OCaml 的堂兄標準元語言（StandardML）編寫。 而後，它被轉移到 OCaml。 React 也被轉錄爲 JavaScript。

這是由於整個網絡都在使用 JavaScript，而且說「如今咱們將在 OCaml 中構建 UI」並非很明智。它確實有效--React in JavaScript 已被普遍採用。

所以，咱們習慣將 React 用做 JavaScript 庫。React 與其餘庫和語言 - Elm，Redux，Recompose，Ramda和PureScript - 在JavaScript中流行的函數式編程。 隨着Flow和TypeScript的興起，靜態類型也變得流行。 所以，具備靜態類型的函數式編程範式成爲前端世界的主流。

2016年，Bloomberg開發並開源了BuckleScript，這是一種將OCaml轉換爲JavaScript的編譯器。

這使他們可以使用OCaml的強類型系統在前端編寫安全代碼。 他們採用優化且極其快速的OCaml編譯器並交換其後端生成本機代碼，用於生成JavaScript。

函數式編程的普及以及BuckleScript的發佈爲Facebook提供了理想的環境，使其可以回到最初以ML語言編寫的React的最初想法。

他們採用了OCaml語義和JavaScript語法，並建立了Reason。 他們還在React - ReasonReact庫周圍建立了Reason包裝器，並具備其餘功能，例如在有狀態組件中封裝Redux原則。 經過這樣作，他們將React歸還其原始根源。

React in Reason的能量

當React進入JavaScript時，咱們經過引入各類庫和工具來調整JavaScript以知足React的需求。

這也意味着咱們項目的依賴性更高。 更不用說這些庫仍處於開發階段，並按期引入重大變化。 所以，您須要在項目中謹慎維護這些依賴關係。 這爲JavaScript開發增長了另外一層複雜性。 您典型的React應用程序至少具備如下依賴項：

• 靜態類型 - Flow / TypeScript
• 不變性 - immutableJS
• 路由 - ReactRouter
• 格式 - Prettier
• linting - ESLint
• 輔助功能 - Ramda / Lodash

如今讓咱們用 ReasonReact 來替代 JavaScript React。 咱們還須要全部這些依賴嗎？

• 靜態類型 - 內置
• 不變性 - 內置
• 路由 - 內置
• 格式 - 內置
• linting - 內置
• 輔助功能 - 內置

您能夠在個人其餘帖子中瞭解有關這些內置功能的更多信息。

在ReasonReact應用程序中，您不須要這些和許多其餘依賴項，由於許多使您的開發更容易的關鍵功能已包含在語言自己中。 所以，維護您的軟件包將變得更加容易，而且您不會隨着時間的推移而增長複雜性。 這要歸功於已有20多年曆史的OCaml。 它是一種成熟的語言，其全部核心原則都已到位且穩定。

Wrap-up

起初，Reason的創造者有兩種選擇。 採用JavaScript並以某種方式使其更好。 經過這樣作，他們還須要處理其歷史負擔。 可是，他們採起了不一樣的方式。 他們將OCaml做爲一種成熟的語言，具備出色的性能並對其進行了修改，使其相似於JavaScript。 React也基於OCaml的原理。 這就是爲何當你在Reason中使用它時，你將得到更好的開發者體驗。 React in Reason表明了構建React組件的更安全的方式，由於強類型系統已經獲得了迴應，您不須要處理大多數JavaScript（遺留）問題。

What’s next?

若是您來自JavaScript世界，因爲其與JavaScript的語法類似性，您能夠更輕鬆地開始使用Reason。

若是你一直在React中編程，那麼你會更容易，由於你可使用你全部的React知識，由於ReasonReact具備與React相同的心理模型和很是類似的工做流程。

這意味着您無需從頭開始。

隨着您的發展，您將學習理性。

在項目中開始使用Reason的最佳方法是逐步進行。

我已經提到你可使用Reason代碼並在JavaScript中使用它，反之亦然。

您可使用ReasonReact執行相同的操做。 您可使用ReasonReact組件並在React JavaScript應用程序中使用它，反之亦然。

這種增量方法已被Facebook開發人員選擇，他們在開發Facebook Messenger應用程序時普遍使用Reason。

若是你想使用React in Reason構建一個應用程序並以實用的方式學習Reason的基礎知識，請查看個人其餘文章，咱們將在一塊兒構建一個Tic Tac Toe遊戲。

若是您有任何問題，批評，觀察或改進提示，請隨時在下面寫評論或經過Twitter或個人博客與我聯繫。