每个人都知道react是Facebook的产品，angular是Google的产品，angular用打字稿写成. 使用typescript，此javascript具有超强的适应性，可轻松用于开发大型应用程序.

形成自己的生态，自己的语言和自己的框架. 因此，Facebook可能不甘落后，并准备使用其他语言来高效地编写稳定可靠的javascript语言. 最后字节码和机器码的区别，我选择了具有20多年历史的ocaml语言. 据估计，很甚至听说过这种语言.

这是一种功能编程语言. 但是ocaml无法在浏览器上运行，它需要对前端熟悉javascript的程序员友好. 为了解决这些问题，Reason出现了，原因是OCaml的语言界面，它对具有JavaScript开发经验的开发人员很友好. 有了理性，如何将理性编译成javascript？答案是BuckleScript，BS（BuckleScript）是将ocamel / reason编译为javascript的编译器.

这不是简单的编译和转换工具，BS不仅可以使用Ocaml

该代码被编译为javascript，并且可以被编译为高效的javascript，并且易于阅读. 您看不到编译的代码是由机器编写的，而BS也是由中文编写的，这是我们的骄傲.

这三种相对独立的语言和工具如何建立它们之间的关系？

让我们分析Ocaml编译器，看看它们如何集成在一起.

我们将Ocaml编译过程作为切入点进行分析，并将这三个过程连接起来.

源代码: 在此阶段，编译器获取OCaml代码

无类型AST: 执行代码分析和预处理，然后生成无类型AST.

类型化的AST: 然后会猜测并测试类型，以生成类型化的AST.

Lambda IR: 这应该是Ocaml的重点，但今天不应该成为我们的重点，但是您可以了解它

将定义的AST类型转换为无类型IR，转换格式基于s-express

这句话中出现了两个难懂的词IR和s-express

我不知道是否找到了S-express. 我在Wiki中找到了它. 让我们尝试了解它.

百度，百度的翻译还不错. 在此基础上进行解释.

** s-expression **应该是表示数据结构的表达式，例如（* 2（+3 4）），用于表示以这种方式生成的树结构的数据. 是嵌套列表（树结构）数据的表示，是由编程语言lisp发明和推广的，将其用于源代码和数据.

字节码: 最后，在推断之后，IR被编译为字节码或机器码

了解ocaml的整个编译过程，那么我们的原因和b出现在什么阶段？

原因出现在无类型AST的编译阶段. 通过一些预处理，我们的源代码可以解析为AST以支持一些新的语法功能

BuckleScript将使用未类型化的IR来编译为可有效执行的javascript，而不是字节码和机器代码

BuckleScript编译的javascript的魔力可能比您的魔术更好. 计算机更喜欢功能编程. 让我们拥抱机器，学习一些困难但有效的功能编程.

React已使用原因来编写组件，其好处在下面列出.

-一种更安全，更简洁的构建React组件的方法

-与JSX完全兼容

-类型安全性与使用javascript编写的组件兼容

-用于新的表达API来描述状态管理

昨天我们通过一个示例做了一个简单的演示. 我也知道我们可以使用理由来编写React组件. Reason提供了两个模板供我们创建组件.

statelessComponent

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

然后我们创建一个TutData.re文件，该文件定义了tut类型并定义了数据的结构.

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

我们创建一个StatesComponents组件.

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

我们正在定义一个组件TutItem，〜tut表示要标记此参数，尽管我们可以调整参数的位置字节码和机器码的区别，然后通过标签将值传递给参数.

let component = ReasonReact.statelessComponent("TutItem");let make =(~tut: TutData.tut, _children) => { ...component, render: _self => { //创建数据  
 (ReasonReact.string(tut.title)) 
; },};

创建tut类型的dummyTut数据，然后通过prop将dummyTut传递到组件.

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/ruanjian/article-249266-1.html