react中使用構建緩存_通過在React中構建Tic Tac Toe來學習ReasonML

react中使用構建緩存

3. 7. 2018: UPDATED to ReasonReact v0.4.2
3. 7. 2018：更新為ReasonReact v0.4.2

You may have heard of Reason before. It’s a syntax on top of OCaml that compiles to both readable JavaScript code and to native and bytecode as well.

您可能以前聽說過理性。這是OCaml之上的語法，可編譯為可讀JavaScript代碼以及本機代碼和字節代碼。

This means you could potentially write a single application using Reason syntax, and be able to run it in the browser, and on Android and iOS phones as well.

這意味著您可能會使用Reason語法編寫單個應用程序，并能夠在瀏覽器以及Android和iOS手機上運行它。

This is one of the reasons why Reason (ouch, pun) is becoming increasingly popular. This is especially true in the JavaScript community because of the syntax similarities.

這是原因(哎呀，雙關語)變得越來越流行的原因之一。由于語法相似，在JavaScript社區中尤其如此。

If you were a JavaScript developer before Reason came out and wanted to learn a functional programming (FP) language, you would have had to also learn a whole new syntax and set of rules. This might’ve discouraged many people.

如果您在Reason問世之前是JavaScript開發人員，并且想學習一種功能編程(FP)語言，那么您還必須學習一種全新的語法和規則集。這可能使許多人灰心。

With Reason, you mainly need to understand the FP principles on which it’s based — such as immutability, currying, composition, and higher-order-functions.

使用Reason，您主要需要了解FP所基于的FP原理，例如不變性，currying，組成和高階函數。

Before I discovered Reason, I was trying to use FP principles in JavaScript as much as I could. However, JavaScript is limited in this sense, since it’s not meant to be an FP language. To take advantage of these principles effectively, you need to use a bunch of libraries that create complicated abstractions which are hidden from you.

在我發現Reason之前，我試圖盡可能多地在JavaScript中使用FP原理。但是，JavaScript在這種意義上受到限制，因為它并不意味著是FP語言。為了有效地利用這些原理，您需要使用一堆庫來創建對您隱藏的復雜抽象。

Reason, on the other hand, opens the entire FP realm to all interested JavaScript developers. It provides us with an opportunity to use all those cool OCaml features using syntax we dearly know.

另一方面，Reason向所有感興趣JavaScript開發人員開放了整個FP領域。它為我們提供了使用我們熟知的語法來使用所有這些很酷的OCaml功能的機會。

Last but not least, we can write our React or React Native apps using Reason.

最后但并非最不重要的一點是，我們可以使用Reason編寫React或React Native應用程序。

您為什么要嘗試理性？ (Why should you give Reason a try?)

I hope you’ll discover the answer for yourself by the time you’ve finished reading this post.

希望您在閱讀完這篇文章后能自己找到答案。

As we go through the source code of the classic Tic Tac Toe game — written in Reason, using React — I’ll explain the core features of the language. You’ll see the benefits of the strong type system, immutability, pattern matching, functional composition using pipe, and so on. Unlike JavaScript, these features are intrinsic to Reason itself.

當我們瀏覽經典的Tic Tac Toe游戲的源代碼時，使用React用Reason編寫。我將解釋該語言的核心功能。您將看到強類型系統，不變性，模式匹配，使用管道的功能組合等優點。與JavaScript不同，這些功能是Reason本身固有的。

熱身 (Warming up)

Before getting your hands dirty, you need to install Reason on your machine following this guide.

在弄臟手之前，您需要按照本指南在計算機上安裝Reason。

After that, you need to setup your app. To do this, you can either clone my repository containing the code of our app or you can setup your own project using ReasonScripts and code along.

之后，您需要設置您的應用程序。為此，您可以克隆包含我們應用程序代碼的存儲庫，也可以使用ReasonScripts和代碼來設置自己的項目。

To view your app in the browser, you need to compile your Reason files to JavaScript ones first. The BuckleScript compiler will take care of that.

要在瀏覽器中查看您的應用，您需要先將Reason文件編譯為JavaScript文件。 BuckleScript編譯器將負責此工作。

In other words, when you run npm start (in the ReasonScripts project), your Reason code gets compiled to JavaScript. The result of the compilation is then rendered to the browser. You can see for yourself how readable the compiled code is by checking the lib folder inside your app.

換句話說，當您運行npm start (在ReasonScripts項目中)時，您的Reason代碼將編譯為JavaScript。然后將編譯結果呈現給瀏覽器。通過檢查應用程序內的lib文件夾，您可以自己查看編譯后代碼的可讀性。

我們的第一個組成部分 (Our first component)

As we’ve already mentioned, our Tic Tac Toe app is written using ReasonReact library. This makes Reason approachable for JavaScript developers, and a lot of newcomers are coming from this community.

正如我們已經提到的，我們的Tic Tac Toe應用是使用ReasonReact庫編寫的。這使得Reason對于JavaScript開發人員來說很容易上手，并且這個社區有很多新來者。

Our app has a classic component structure, like any other React app. We’ll go through the components top-down when talking about UI, and bottom-up when describing their logic.

我們的應用程序具有經典的組件結構，就像其他任何React應用程序一樣。在談論UI時，我們將自上而下瀏覽組件，而在描述其邏輯時，則將自下而上瀏覽。

Let’s get started by taking a look at the top level App component.

讓我們開始看看頂級的App組件。

let component = ReasonReact.statelessComponent("App");
let make = _children => {...component,render: _self =><div><div className="title">(ReasonReact.string("Tic Tac Toe"))</div><Game /></div>,
};

The component gets created when you call ReasonReact.statelessComponent and pass the name of the component to it. You don’t need any class keywords like in React, since Reason doesn’t have any whatsoever.

當您調用ReasonReact.statelessComponent并將該組件的名稱傳遞給它時，將創建該組件。您不需要像React中的任何類關鍵字，因為Reason沒有任何內容。

The component is neither a class nor function — it’s a so-called record. record is one of Reason’s data structures, which is similar to the JavaScript object. Unlike the latter, however, record is immutable.

組件既不是類也不是函數，它既是所謂的record 。 record是Reason的數據結構之一，類似于JavaScript對象。但是，與后者不同， record是不可變的。

Our new record component contains various default properties such as the initial state, lifecycle methods, and render. To adjust the component to our needs, we need to override some of these properties. We can do that inside the make function that returns our component.

我們的新record組件包含各種默認屬性，例如初始狀態，生命周期方法和呈現。要根據我們的需求調整組件，我們需要覆蓋其中一些屬性。我們可以在返回組件的make函數中執行此操作。

Since the record is immutable, we can’t override its properties by mutation. Instead, we need to return a new record. To do this, we need to spread our component and redefine the properties we want to change. This is very similar to the JavaScript object spread operator.

由于record是不可變的，因此我們無法通過更改覆蓋其屬性。相反，我們需要返回一個新record 。為此，我們需要擴展組件并重新定義我們要更改的屬性。這與JavaScript對象傳播運算符非常相似。

Since the App is a pretty simple component, we want to override only the default render method so we can render our elements to the screen. The render method takes a single self argument that gives us access to the state and reducers, as we’ll see later.

由于該App是一個非常簡單的組件，因此我們只想覆蓋默認的render方法，以便可以將元素渲染到屏幕上。 render方法采用單個self參數，使我們可以訪問狀態和reducer，我們將在后面看到。

Since ReasonReact supports JSX, our render function can return JSX elements. The uncapitalized element will be recognized as a DOM element — div. The capitalized element will be recognized as a component — Game.

由于ReasonReact支持JSX ，因此我們的render函數可以返回JSX元素。沒有大寫的元素將被識別為DOM元素— div 。大寫的元素將被識別為組件Game 。

Due to Reason’s strong type system, you can’t simply pass a string to an element in order to display it, as you can in classic React.

由于Reason強大的類型系統，您不能像經典React那樣簡單地將字符串傳遞給元素以顯示它。

Instead, you need to pass such string into a ReasonReact.string helper function that’ll convert it into reactElement which can be rendered.

相反，您需要將這樣的字符串傳遞給ReasonReact.string幫助器函數，該函數會將其轉換為可以呈現的reactElement 。

Since this is a little bit verbose, and we’ll use this helper quite often, let’s store it in a toString variable. In Reason, you can use only the let keyword to do that.

由于這有點冗長，并且我們將經常使用此幫助器，因此將其存儲在toString變量中。在理性中，您只能使用let關鍵字來做到這一點。

let toString = ReasonReact.string;

Before moving any further, let’s talk a bit about the make function’s arguments. Since we are not passing any props to the App component, it takes only the default children argument.

在繼續之前，讓我們先討論一下make函數的參數。由于我們沒有將任何道具傳遞給App組件，因此它僅采用默認的children參數。

However, we are not using it. We can make this explicit by writing an underscore before it. If we haven’t done this, the compiler would give us a warning that the argument is not being used. We are doing the same with the self argument in the render method.

但是，我們沒有使用它。我們可以通過在其前面加一個下劃線來使之明確。如果我們還沒有這樣做，編譯器會警告我們該參數沒有被使用。我們在render方法中使用self參數做同樣的事情。

Understandable error and warning messages are another cool feature that’ll improve your developer experience, compared to JavaScript.

與JavaScript相比，可理解的錯誤和警告消息是另一個很酷的功能，它將改善您的開發人員體驗。

設置變體類型 (Setting up variant types)

Before diving into the application itself, we’ll define our types first.

在深入研究應用程序本身之前，我們將首先定義類型。

Reason is a statically typed language. This means it evaluates the types of our values during the compilation time. In other words, you don’t need to run your app to check if your types are correct. This also means that your editor can provide you with useful editing support.

原因是一種靜態類型的語言。這意味著它將在編譯期間評估我們的值的類型。換句話說，您無需運行應用程序即可檢查類型是否正確。這也意味著您的編輯器可以為您提供有用的編輯支持。

However, having a type system doesn’t mean you need to explicitly define types for all the values. If you decide not to, Reason will figure out (infer) the types for you.

但是，擁有類型系統并不意味著您需要為所有值明確定義類型。如果您決定不這樣做，Reason將為您找出(推斷)類型。

We’ll take advantage of the type system to define the types that we’ll use throughout our app. This will force us to think about the structure of our app before coding it and we’ll get a code documentation as a bonus.

我們將利用類型系統來定義將在整個應用程序中使用的類型。這將迫使我們在對應用程序進行編碼之前考慮一下應用程序的結構，并且還會獲得一份代碼文檔作為獎勵。

If you’ve had any experience with TypeScript or Flow, Reason types will look familiar. However, unlike these two libraries, you don’t need any previous configuration at all (I’m looking at you Typescript). Types are available out of the box.

如果您有使用TypeScript或Flow的經驗，Reason類型將很熟悉。但是，與這兩個庫不同，您根本不需要任何先前的配置(我在看您的Typescript)。開箱即用。

In Reason, we can distinguish between types and variant types (in short variants). Types are for example bool, string, and int. On the other hand, variants are more complex. Think of them as of enumerable sets of values—or more precisely, constructors. Variants can be processed via pattern matching, as we’ll see later.

在Reason中，我們可以區分類型和變體類型 (簡稱為變體)。類型是例如bool ， string和int 。另一方面，變體更加復雜。將它們視為可枚舉的值集，或更準確地說，是構造函數。可以通過模式匹配來處理變體，我們將在后面看到。

type player =| Cross| Circle;type field =| Empty| Marked(player);

Here we define player and field variants. When defining a variant, you need to use a type keyword.

在這里，我們定義player和field 變體。定義變體時，需要使用type關鍵字。

Since we are building a Tic Tac Toe game, we’ll need two players. So, the player type will have two possible constructors — Cross and Circle.

由于我們正在構建Tic Tac Toe游戲，因此我們需要兩名玩家。因此， player類型將具有兩個可能的構造函數Cross和Circle 。

If we think about the playing board, we know that each field type can have two possible constructors — either Empty or Marked by one of the players.

如果我們考慮游戲板，我們知道每種field類型都可以有兩個可能的構造函數- Empty或由一個玩家Marked的。

If you take a look at the Marked constructor, you can see that we are using it as a data structure. We use a variant to hold another piece of data. In our case, we pass it the player variant. This behavior is pretty powerful since it enables us to combine different variants and types together to create more complex types.

如果看一下Marked構造函數，可以看到我們正在將其用作數據結構。我們使用一個變體來保存另一段數據。在我們的案例中，我們將其傳遞給player變量。這種行為非常強大，因為它使我們能夠將不同的變體和類型組合在一起以創建更復雜的類型。

So, we’ve got the field variant. However, we need to define the whole playing board which consists of rows of fields.

因此，我們有了field變量。但是，我們需要定義由多個字段組成的整個游戲板。

type row = list(field);
type board = list(row);

Each row is a list of fields and the playing board is composed of a list of rows.

每row是field s的列表，游戲board由row s的列表組成。

The list is one of Reason’s data structures—similar to the JavaScript array. The difference is, it’s immutable. Reason also has an array as a mutable fixed-length list. We’ll come back to these structures later.

該list是Reason的數據結構之一，類似于JavaScript數組。不同之處在于，它是不變的。原因也有一個array作為可變的固定長度列表。稍后我們將回到這些結構。

type gameState = | Playing(player)| Winner(player)| Draw;

Another variant we need to define is a gameState. The game can have three possible states. One of the players can be Playing, be a Winner, or we can have a Draw.

我們需要定義的另一個變體是gameState 。游戲可以具有三種可能的狀態。 player可以是Playing Winner ，或是Winner ，或者我們可以開Draw 。

Now, we have all the types we need to compose the state of our game.

現在，我們擁有構成游戲狀態所需的所有類型。

type state = {board,gameState,
};

Our component’s state is a record composed of the board and the gameState.

我們組件的狀態是由board和gameState組成的record 。

Before moving any further, I’d like to talk about modules. In Reason, files are modules. For example, we stored all our variants inside SharedTypes.re file. This code gets automatically wrapped inside the module like this:

在進一步介紹之前，我想談談模塊。實際上，文件是模塊。例如，我們將所有變體存儲在SharedTypes.re文件中。這段代碼會自動包裝在模塊中，如下所示：

module SharedTypes {/* variant types code */
}

If we wanted to access this module in a different file, we don’t need any import keyword. We can easily access our modules anywhere in our app using the dot notation — for example SharedTypes.gameState.

如果要在其他文件中訪問此模塊，則不需要任何import關鍵字。我們可以使用點符號(例如SharedTypes.gameState輕松地在應用程序中的任何位置訪問模塊。

Since we are using our variants quite often, we can make it more concise by writing open SharedTypes at the top of the file in which we want to access our module. This allows us to drop the dot notation since we can use our module in the scope of our file.

由于我們經常使用變體，因此可以通過在要訪問模塊的文件頂部編寫open SharedTypes使其更加簡潔。因為我們可以在文件范圍內使用模塊，所以這使我們可以刪除點符號。

建立狀態 (Establishing state)

Since we know how the state of our app will look, we can start building the game itself.

由于我們知道應用程序的狀態，因此我們可以開始構建游戲本身。

We’ve seen that our App component renders the Game component. This is the place where all the fun starts. I’ll walk you through the code step-by-step.

我們已經看到，我們的App組件呈現了Game組件。這是所有樂趣開始的地方。我將逐步指導您完成代碼。

The App was a stateless component, similar to the functional component in React. On the other hand, the Game is a stateful one which means it can contain state and reducers. Reducers in Reason are based on the same principles as those you know from Redux. You call an action, and the reducer will catch it and update the state accordingly.

該App是一個無狀態組件，類似于React中的功能組件。另一方面， Game是有狀態的，這意味著它可以包含狀態和約簡。理性中的reducers基于與Redux相同的原理。您調用一個動作，減速器將捕獲該動作并相應地更新狀態。

To see what’s going on in the Game component, let’s inspect the make function (the code is shortened).

要查看Game組件中發生了什么，讓我們檢查一下make函數(縮短了代碼)。

let component = ReasonReact.reducerComponent("Game");let make = _children => {...component,initialState: () => initialState,reducer: (action: action, state: state) => ...,render: ({state, send}) => ...,
};

In the App component, we’ve overridden only the render method. Here, we are overriding reducer and initialState properties as well. We’ll talk about reducers later.

在App組件中，我們僅覆蓋了render方法。在這里，我們也覆蓋了reducer和initialState屬性。稍后我們將討論減速器。

initialState is a function that (surprisingly) returns the initial state which we stored in a variable.

initialState是一個函數(令人驚訝地)返回我們存儲在變量中的初始狀態的函數。

let initialState = {board: [[Empty, Empty, Empty],[Empty, Empty, Empty],[Empty, Empty, Empty],],gameState: Playing(Cross),
};

If you scroll up a little bit and check our state type, you’ll see that the initialState has the same structure. It’s composed of the board that consists of rows of fields. At the beginning of the game all fields are Empty.

如果向上滾動一點并檢查我們的state類型，您會看到initialState具有相同的結構。它由包含field s的row的board組成。在游戲開始時，所有字段均為Empty 。

However, their status may change as the game goes on. Another part of the state is the gameState which is initially set to theCross player who plays first.

但是，它們的狀態可能會隨著游戲的進行而改變。狀態的另一部分是gameState ，它最初設置為首先玩的Cross玩家。

渲染板 (Rendering board)

Let’s take a look at the render method of our Game component.

讓我們看一下Game組件的render方法。

render: ({state, send}) =><div className="game"><BoardstateonRestart=(_evt => send(Restart))onMark=(id => send(ClickSquare(id)))/></div>,

We already knew that it receives the self argument. Here, we use destructuring to access the state and the send function. This works just like in JavaScript.

我們已經知道它接受了self論證。在這里，我們使用解構來訪問state和send功能。就像在JavaScript中一樣。

The render method returns the Board component and passes it the state and two state handlers as props. The first one takes care of the app restart and the second one fires when the field gets marked by a player.

render方法返回Board組件，并將state和兩個狀態處理程序作為道具傳遞給它。第一個負責應用的重啟，第二個負責在玩家標記該字段時觸發。

You might’ve noticed that we aren’t writing state=state when passing the state prop. In Reason, if we are not changing the prop’s name, we can pass prop using this simplified syntax.

您可能已經注意到，通過state道具時，我們不是在寫state=state 。因此，如果我們不更改道具名稱，則可以使用此簡化語法傳遞道具。

Now, we can take a look at the Board component. I’ve omitted most of the render method for the time being.

現在，我們來看一下Board組件。我暫時省略了大多數render方法。

let component = ReasonReact.statelessComponent("Board");let make = (~state: state, ~onMark, ~onRestart, _children) => {...component,render: _ =><div className="game-board">/* ... */</div>,
};

The Board is a stateless component. As you might’ve noticed, the make function now takes several arguments. These are the props we’ve passed from the Game parent component.

Board是無國籍的組成部分。您可能已經注意到， make函數現在帶有幾個參數。這些是我們從Game父組件傳遞的道具。

The ~ symbol means that the argument is labeled. When calling a function with such an argument, we need to explicitly write the name of the argument when calling this function (component). And that’s what we did when we passed the props to it in the Game component.

~符號表示該參數已標記。當使用這樣的參數調用函數時，我們需要在調用該函數(組件)時顯式地編寫參數名稱。這就是我們在Game組件中將道具傳遞給它時所做的。

You might’ve also noticed that we are doing another thing with one of the arguments — ~state:state. In the previous section, we defined our state type. Here, we are telling the compiler that the structure of this argument should be same as of the state type. You might know this pattern from Flow.

您可能還注意到，我們正在使用其中一個參數~state:state做另一件事。在上一節中，我們定義了state類型。在這里，我們告訴編譯器此參數的結構應與state類型相同。您可能從Flow知道這種模式。

Let’s come back to the render method of the Board component.

讓我們回到Board組件的render方法。

Since we are dealing with lists there, we’ll talk about them a little bit more now, before inspecting the rest of the render method.

由于我們在這里處理列表，因此在檢查其余render方法之前，我們現在將稍微討論它們。

游覽I：列表和數組 (Excursion I: list and array)

In Reason, we have two data structures resembling JavaScript arrays — list and array. The list is immutable and resizable, whereas the array is mutable and has a fixed length. We are using a list due to its flexibility and efficiency which really shines when we use it recursively.

在原因，我們有兩個數據結構類似于JavaScript數組- list和array 。該list是不可變的并且可調整大小，而array是可變的，并且具有固定的長度。我們使用list因為它的靈活性和效率，當我們遞歸使用它時，它確實很出色。

To map a list, you can use List.map method that receives two arguments—a function and a list. The function takes an element from the list and maps it. This works pretty much like the JavaScript Array.map. Here’s a simple example:

要映射list ，可以使用List.map方法，該方法接收兩個參數-一個函數和一個list 。該函數從list獲取一個元素并進行映射。這非常類似于JavaScript Array.map 。這是一個簡單的例子：

let numbers = [1, 5, 8, 9, 15];
let increasedNumbers = List.map((num) => num + 2, numbers);
Js.log(increasedNumbers);  /* [3,[7,[10,[11,[17,0]]]]] */

What? You’re saying that the printed result looks weird? This is because the lists in Reason are linked.

什么？您是說打印結果看起來很奇怪？這是因為Reason中的列表是鏈接的。

Printing lists in your code can be confusing. Fortunately, you can convert it into an array using the Array.of_list method.

在代碼中打印列表可能會造成混淆。幸運的是，您可以使用Array.of_list方法將其轉換為array 。

Js.log(Array.of_list(increasedNumbers));  /* [3,7,10,11,17] */

Let’s come back to our app and remind ourselves how our state looks.

讓我們回到我們的應用程序，提醒自己我們的state 。

let initialState = {board: [[Empty, Empty, Empty],[Empty, Empty, Empty],[Empty, Empty, Empty],],gameState: Playing(Cross),
};

Inside the Board’s render method we first map over board which is composed of a list of rows. So, by mapping over it, we’ll gain access to the rows. Then, we render the BoardRow component.

內部審計委員會的render方法，我們首先映射在board它是由行的列表中。因此，通過對其進行映射，我們將可以訪問row s。然后，我們渲染BoardRow組件。

let component = ReasonReact.statelessComponent("Board");let make = (~state: state, ~onMark, ~onRestart, _children) => {...component,render: _ =><div className="game-board">( ReasonReact.array(Array.of_list(List.mapi((index: int, row: row) =><BoardRowkey=(string_of_int(index))gameState=state.gameStaterowonMarkindex/>,state.board,),),))/* ... */

We are using the List.mapi method, which provides us with an index argument that we need to uniquely define our ids.

我們正在使用List.mapi方法，該方法為我們提供了一個index參數，我們需要用它來唯一地定義ID。

When mapping the list to the JSX elements, we need to do two additional things.

將list映射到JSX元素時，我們需要做另外兩件事。

First, we need to convert it to an array using Array.of_list. Secondly, we need to convert the result to the reactElement using ReasonReact.array, since we (as already mentioned) can’t simply pass the string to the JSX element like in React.

首先，我們需要使用Array.of_list將其轉換為array 。其次，我們需要將結果轉換到reactElement使用ReasonReact.array ，因為我們(已經提到)不能串簡單地傳遞到JSX元素像React。

To get to the field values, we need to map over each row as well. We are doing this inside the BoardRow component. Here, each element from the row is then mapped to the Square component.

為了獲得字段值，我們還需要映射每row 。我們在BoardRow組件中執行此BoardRow 。在此，該row每個元素都將映射到Square組件。

let component = ReasonReact.statelessComponent("BoardRow");let make = (~gameState: gameState, ~row: row, ~onMark, ~index: int, _children) => {...component,render: (_) =><div className="board-row">(ReasonReact.array(Array.of_list(List.mapi((ind: int, value: field) => {let id = string_of_int(index) ++ string_of_int(ind);<Squarekey=idvalueonMark=(() => onMark(id))gameState/>;},row,),),))</div>,
};

Using these two mappings, our board gets rendered. You’ll agree with me that the readability of this code isn’t so good because of all the function wrappings.

使用這兩個映射，可以渲染我們的電路板。您會同意我的觀點，由于所有函數包裝，該代碼的可讀性不是很好。

To improve it, we can use the pipe operator which takes our list data and pipes it through our functions. Here’s the second mapping example — this time using pipe.

為了改善它，我們可以使用pipe運算符，該運算符獲取list數據并通過函數將其管道傳輸。這是第二個映射示例-這次使用pipe 。

let component = ReasonReact.statelessComponent("BoardRow");let make = (~gameState: gameState, ~row: row, ~onMark, ~index: int, _children) => {...component,render: (_) =><div className="board-row">(row|> List.mapi((ind: int, value: field) => {let id = string_of_int(index) ++ string_of_int(ind<Square key=idvalueonMark=(() => onMark(id))gameState/>;})|> Array.of_list|> ReasonReact.array)</div>,
};

This makes our code much more readable, don’t you think? First, we take the row and pass it to the mapping method. Then, we convert our result to an array. Finally, we convert it to the reactElement.

這使我們的代碼更具可讀性，您不覺得嗎？首先，我們將該row傳遞給映射方法。然后，將結果轉換為array 。最后，我們將其轉換為reactElement 。

By mapping our board, we are rendering a bunch of Square components to the screen and by doing so, we are creating the whole playing board.

通過映射我們的棋盤，我們在屏幕上渲染了一堆Square組件，并以此創建了整個游戲棋盤。

We’re passing a couple of props to the Square. Since we want our id to be unique, we create it by combining indices from both mappings. We are also passing down the value which contains the field type that can be either Empty or Marked.

我們要把一些道具傳遞給Square 。因為我們希望id是唯一的，所以我們通過組合兩個映射的索引來創建它。我們還向下傳遞了包含可以為Empty或Marked的field類型的value 。

Finally, we pass a gameState and the onMark handler which will get invoked when a particular Square is clicked.

最后，我們傳遞一個gameState和onMark處理程序，當單擊特定Square時將調用它們。

輸入欄位 (Entering fields)

let component = ReasonReact.statelessComponent("Square");let make = (~value: field, ~gameState: gameState, ~onMark, _children) => {...component,render: _self =><buttonclassName=(getClass(gameState, value))disabled=(gameState |> isFinished |> Js.Boolean.to_js_boolean)onClick=(_evt => onMark())>(value |> toValue |> toString)</button>,
};

The Square component renders a button and passes it some props. We are using a couple of helper functions here, but I won’t talk about all of them in detail. You can find them all in the repo.

Square組件呈現一個按鈕，并向其傳遞一些道具。我們在這里使用了幾個輔助函數，但是我不會詳細討論它們。你可以找到所有的回購。

The button’s class is calculated using the getClass helper function which turns the square green when one of the players wins. When this happens, all the Squares will be disabled as well.

使用getClass輔助函數計算按鈕的類，當其中一位玩家獲勝時，該函數將正方形變為綠色。發生這種情況時，所有Square也將被禁用。

To render the button’s value, we use two helpers.

為了呈現按鈕的value ，我們使用了兩個幫助器。

let toValue = (field: field) =>switch (field) {| Marked(Cross) => "X"| Marked(Circle) => "O"| Empty => ""
};

toValue will convert the field type to the string using pattern matching. We’ll talk about pattern matching later. For now, you need to know that we are matching the field data to our three patterns. So, the result would be X, O, or an empty string. Then, we use toString to convert it to the reactElement.

toValue將使用模式匹配將field類型轉換為字符串。稍后我們將討論模式匹配。現在，您需要知道我們正在將field數據與我們的三種模式進行匹配。因此，結果將是X ， O或空字符串。然后，我們使用toString將其轉換為reactElement 。

Phew. We’ve just rendered the game board. Let’s quickly recap how we did it.

ew 我們剛剛渲染了游戲板。讓我們快速回顧一下我們是如何做到的。

Our top-level App component renders the Game component which holds the game state and passes it down along with the handlers to the Board component.

我們的頂級App組件呈現了Game組件，該組件保留游戲狀態并將其與處理程序一起傳遞給Board組件。

The Board then takes the board state prop and maps the rows to the BoardRow component which maps the rows to the Square components. Each Square has an onClick handler that will fill it with a square or a circle.

然后， Board獲取董事會狀態道具并將行映射到BoardRow組件，后者將行映射到Square組件。每個Square都有一個onClick處理程序，該處理程序將用正方形或圓形填充它。

使它已經做某事！ (Make it do something already!)

Let’s take a look at how our logic controlling the game works.

讓我們看看控制游戲的邏輯是如何工作的。

Since we have a board, we can allow a player to click on any square. When this happens, the onClick handler is fired and the onMark handler is called.

由于我們有一塊木板，因此我們可以允許玩家單擊任何正方形。發生這種情況時，將觸發onClick處理程序并調用onMark處理程序。

/* Square component */
<buttonclassName=(getClass(gameState, value))disabled=(gameState |> isFinished |> Js.Boolean.to_js_boolean)onClick=(_evt => onMark())>(value |> toValue |> toString)
</button>

The onMark handler got passed from the BoardRow component, but it was originally defined in the Game component that takes care of the state.

onMark處理程序是從BoardRow組件傳遞BoardRow ，但它最初是在負責狀態的Game組件中定義的。

/* Game component */
render: ({state, send}) =><div className="game"><BoardstateonRestart=(_evt => send(Restart))onMark=(id => send(ClickSquare(id)))/></div>,

We can see that the onMark prop is a ClickSquare reducer, which means we are using it to update the state (as in Redux). The onRestart handler works similarly.

我們可以看到onMark道具是一個ClickSquare器，這意味著我們正在使用它來更新狀態(如Redux中一樣)。 onRestart處理程序的工作方式與此類似。

Notice that we are passing square’s unique id to the onMark handler inside the BoardRow component.

請注意，我們是路過廣場的獨特id的onMark內部處理BoardRow組件。

/* BoardRow component */
(row|> List.mapi((ind: int, value: field) => {let id = string_of_int(index) ++ string_of_int(ind<Square key=idvalueonMark=(() => onMark(id))gameState/>;})|> Array.of_list|> ReasonReact.array
)

Before taking a look at our reducers in detail, we need to define actions to which our reducers will respond.

在詳細研究我們的減速器之前，我們需要定義減速器將響應的動作。

type action =| ClickSquare(string)| Restart;

As with the global variant types, this forces us to think about our logic before we start implementing it. We define two action variants. ClickSquare takes one argument that will have a type of astring.

與全局變量類型一樣，這迫使我們在開始執行邏輯之前先考慮一下自己的邏輯。我們定義了兩個動作變體。 ClickSquare接受一個參數，該參數將具有string類型。

Now, let’s take a look at our reducers.

現在，讓我們看一下減速器。

let updateBoard = (board: board, gameState: gameState, id) =>board|> List.mapi((ind: int, row: row) =>row|> List.mapi((index: int, value: field) =>string_of_int(ind) ++ string_of_int(index) === id ?switch (gameState, value) {| (_, Marked(_)) => value| (Playing(player), Empty) => Marked(player)| (_, Empty) => Empty} :value));reducer: (action: action, state: state) =>switch (action) {| Restart => ReasonReact.Update(initialState)| ClickSquare((id: string)) =>let updatedBoard = updateBoard(state.board, state.gameState, id);ReasonReact.Update({board: updatedBoard,gameState:checkGameState3x3(updatedBoard, state.board, state.gameState),});},

The ClickSquare reducer takes an id of the particular Square. As we’ve seen, we are passing in the BoardRow component. Then, our reducer calculates a new state.

ClickSquare采用特定Square的id 。如我們所見，我們傳入了BoardRow組件。然后，我們的減速器計算一個新狀態。

For the board state update, we’ll call the updateBoard function. It uses the same mapping logic we used in the Board and BoardRow component. Inside of it, we map over the state.board to get the rows and then map over the rows to get the field values.

對于board狀態更新，我們將調用updateBoard函數。它使用與Board和BoardRow組件相同的映射邏輯。在其內部，我們在state.board進行映射以獲取行，然后在行上進行映射以獲取字段值。

Since the id of each square is a composition of ids from both mappings, we’ll use it to find the field which the player clicked. When we find it, we’ll use the pattern matching to determine what to do with it. Otherwise, we’ll leave the square’s value unmodified.

由于id每平方米的IDS是來自兩個映射組成，我們將用它來查找該用戶點擊了該領域。找到它后，我們將使用模式匹配來確定如何處理它。否則，我們將不修改平方的value 。

游覽II：模式匹配 (Excursion II: pattern matching)

We use the pattern matching to process our data. We define patterns which we’ll match against our data. When exercising the pattern matching in Reason, we use a switch statement.

我們使用模式匹配來處理我們的數據。我們定義將與數據匹配的模式。在Reason中執行模式匹配時，我們使用switch語句。

switch (state.gameState, value) {| (_, Marked(_)) => value| (Playing(player), Empty) => Marked(player)| (_, Empty) => Empty
}

In our case, we are using a tuple to represent our data. Tuples are data structures that separate data with commas. Our tuple contains the gameState and the value (containing the field type).

在我們的例子中，我們使用一個元組來表示我們的數據。元組是用逗號分隔數據的數據結構。我們的tuple包含gameState和value (包含field類型)。

Then we define multiple patterns that we’ll match against our data. The first match determines the result of the entire pattern matching.

然后，我們定義將與數據匹配的多個模式。第一個匹配確定整個模式匹配的結果。

By writing an underscore inside the pattern, we are telling the compiler that we don’t care what the particular value is. In other words, we want to have a match every time.

通過在模式內部寫下劃線，我們告訴編譯器我們不在乎特定的值是什么。換句話說，我們希望每次都有一場比賽。

For example, the first pattern is matched when the value is Marked by any player. So, we don’t care about the gameState and we don’t care about the player type either.

例如，當value被任何玩家Marked時，第一個模式將匹配。因此，我們不在乎gameState ，也不在乎玩家類型。

When this pattern is matched, the result is the original value. This pattern prevents players from overriding already marked Squares.

匹配此模式后，結果為原始value 。這種模式可防止玩家覆蓋已經標記的Squares 。

The second pattern addresses the situation when any player is playing, and the field is Empty. Here, we use the player type in the pattern and then again in the result. We are basically saying that we don’t care about which player is playing (Circle or Cross) but we still want to mark the square according to the player that is actually playing.

第二種模式解決了任何玩家正在玩并且該字段為Empty 。在這里，我們在模式中使用player類型，然后在結果中再次使用。基本上，我們說的是我們不在乎哪個玩家在玩( Circle或Cross )，但我們仍要根據實際玩的玩家來標記正方形。

The last pattern acts as the default one. If the first or the second pattern isn’t matched, the third will always match. Here, we don’t care about the gameState.

最后一個模式用作默認模式。如果第一個或第二個模式不匹配，則第三個將始終匹配。在這里，我們不在乎gameState 。

However, since we’re checking for the Playing game state in the previous pattern, we are now checking for the Draw or Winner gameState type. If this is the case, we’ll leave the field Empty. This default scenario prevents players from continuing to play when the game is over.

但是，由于我們要檢查先前模式中的“ Playing游戲狀態，因此現在要檢查“ Draw或“ Winner gameState類型。如果是這種情況，我們將保留字段Empty 。此默認方案可防止玩家在游戲結束后繼續玩游戲。

A cool thing about pattern matching in Reason is that the compiler will warn you if you haven’t covered all the possible pattern matches. This will save you a lot of trouble, because you’ll always know if you’ve covered all the possible scenarios. So, if the compiler is not giving you any warnings, your pattern matching will never fail.

原因中關于模式匹配的一個很酷的事情是，如果您沒有涵蓋所有可能的模式匹配，編譯器會警告您。這將為您省去很多麻煩，因為您將始終知道是否已涵蓋所有可能的情況。因此，如果編譯器未向您發出任何警告，則模式匹配將永遠不會失敗。

When the pattern matching is finished, the particular field gets updated. When all the mappings are done, we get a new board state and store it as the updatedBoard. We can then update the component’s state by calling ReasonReact.Update.

模式匹配完成后，特定字段將更新。完成所有映射后，我們將獲得一個新的板狀態并將其存儲為updatedBoard 。然后，我們可以通過調用ReasonReact.Update來更新組件的狀態。

ReasonReact.Update({board: updatedBoard,gameState:checkGameState3x3(updatedBoard, state.board, state.gameState),

We update the board state using the result of the pattern matching. When updating the gameState, we call the checkGameState3x3 helper which calculates the state of the game for us.

我們使用模式匹配的結果來更新board狀態。在更新gameState ，我們調用checkGameState3x3幫助程序，該幫助程序為我們計算游戲狀態。

我們有贏家嗎？ (Do we have a winner?)

Let’s take a look what the checkGameState3x3 does.

讓我們看一下checkGameState3x3功能。

First, we need to define all the possible combinations of winning fields (for the 3x3 board) and store them as winningCombs. We also have to define the winningRows type.

首先，我們需要定義所有可能的獲勝字段組合(對于3x3板)，并將它們存儲為winningCombs 。我們還必須定義winningRows類型。

type winningRows = list(list(int));let winningCombs = [[0, 1, 2],[3, 4, 5],[6, 7, 8],[0, 3, 6],  [1, 4, 7],[2, 5, 8],[0, 4, 8],[2, 4, 6],
];

We passed this list to the checkGameState function as the first argument.

我們將此列表作為第一個參數傳遞給checkGameState函數。

let checkGameState3x3 = checkGameState(winningCombs);

By doing this, we are taking advantage of the currying principle. When we pass the winningCombs to the checkGameState function, we get back a new function waiting for the rest of the arguments to be passed. We store this new function as the checkGameState3x3.

通過這樣做，我們利用了流通原則。當我們將winningCombs傳遞給checkGameState函數時，我們將返回一個新函數，等待傳遞其余參數。我們將此新功能存儲為checkGameState3x3 。

This behavior is really helpful, since we are able to configure the checkGameState function depending on the width and height of the board.

這種行為確實很有幫助，因為我們能夠根據棋盤的寬度和高度來配置checkGameState函數。

Let’s see what’s going on inside the checkGameState function.

讓我們看看checkGameState函數內部發生了checkGameState 。

let checkGameState =(winningRows: winningRows,updatedBoard: board,oldBoard: board,gameState: gameState,) =>oldBoard == updatedBoard ?gameState :{let flattenBoard = List.flatten(updatedBoard);let rec check = (rest: winningRows) => {let head = List.hd(rest);let tail = List.tl(rest);switch (getWinner(flattenBoard, head),gameEnded(flattenBoard),tail,) {| (Cross, _, _) => Winner(Cross)| (Circle, _, _) => Winner(Circle)| (_, true, []) => Draw| (_, false, []) => whosPlaying(gameState)| _ => check(tail)};};check(winningRows);
};

First, we check if the board state is different from the previous one. If that’s not the case, we’ll return the unchanged gameState. Otherwise, we’ll calculate the new game state.

首先，我們檢查板狀態是否與前一個狀態不同。如果不是這種情況，我們將返回未更改的gameState 。否則，我們將計算新的游戲狀態。

計算新狀態 (Calculating new states)

We start determining our new game state by converting the board part of the state, which consists of a list of rows, to a simple list using List.flatten. The flattened result will have this kind of structure:

我們開始通過使用List.flatten將狀態的board部分轉換為簡單list來確定新游戲狀態，該board部分由行list List.flatten 。展平的結果將具有以下結構：

[Empty, Empty, Empty, Empty, Empty, Empty, Empty, Empty, Empty]

Back in the function, we define a check function that receives a single rest argument that has type of winningRows . The rec keyword before its definition means that it can be invoked recursively. However, for the recursive function calls, we need recursive data as well. Fortunately, the list is a recursive data structure.

回到該函數中，我們定義了一個check函數，該函數接收一個類型為winningRows的單個rest參數。定義前的rec關鍵字意味著可以遞歸調用它。但是，對于遞歸函數調用，我們還需要遞歸數據。幸運的是，該list是遞歸數據結構。

We’ve already learned that lists in Reason are linked. This feature enables us to iterate through lists using recursion easily.

我們已經了解到Reason中的列表是鏈接的。此功能使我們可以輕松地使用遞歸遍歷列表。

At the bottom of the checkGameState, we call the check function for the first time and pass it the winningCombs list. Inside the function, we extract the first element from the list and store it as the head. The rest of the list gets stored as the tail.

在checkGameState的底部，我們第一次調用check函數，并將其傳遞給winningCombs列表。在函數內部，我們從list提取第一個元素并將其存儲為head 。 list的其余部分將作為tail存儲。

After that, we use the pattern matching again. We already know how it works, so I won’t go into detail. But it’s worth checking how we define our data and patterns.

之后，我們再次使用模式匹配。我們已經知道它是如何工作的，所以我將不做詳細介紹。但是值得檢查一下我們如何定義數據和模式。

type winner =| Cross| Circle| NoOne;switch (getWinner(flattenBoard, head),gameEnded(flattenBoard),tail,
) { ...

Inside the switch statement, we use a tuple again to represent our data. Our tuple contains three elements—winner type as a result of the getWinner function, boolean as a result of the gameEnded function, and remaining list elements (tail).

在switch語句內部，我們再次使用tuple表示數據。我們的tuple包含三個元素得主類型作為結果getWinner功能，布爾作為結果gameEnded功能，和剩余的list元素( tail )。

Before going any further, let’s talk a bit about these two helper functions.

在繼續之前，讓我們先談談這兩個輔助函數。

We’ll take a look inside the getWinner function first.

我們首先來看一下getWinner函數。

let getWinner = (flattenBoard, coords) =>switch (List.nth(flattenBoard, List.nth(coords, 0)),List.nth(flattenBoard, List.nth(coords, 1)),List.nth(flattenBoard, List.nth(coords, 2)),) {| (Marked(Cross), Marked(Cross), Marked(Cross)) => Cross| (Marked(Circle), Marked(Circle), Marked(Circle)) => Circle| (_, _, _) => NoOne};

When we call the check recursive function for the first time, the head will be the first element of the winningRows, that is [0, 1, 2] which is a list. We pass head to the getWinner function as the coords argument along with the flattenBoard.

當我們第一次調用check遞歸函數時， head將是winningRows的第一個元素，即[0, 1, 2] ，這是一個list 。我們通過head向getWinner函數作為coords與一起說法flattenBoard 。

Again, we use the pattern matching with the tuple. Inside the tuple, we use the List.nth method to access the equivalent positions of the coords coordinates in the flattened board list. The List.nth function takes a list and a number and returns the list’s element to that position.

同樣，我們使用與tuple匹配的模式。在tuple內部，我們使用List.nth方法訪問List.nth list coords的等效位置。 List.nth函數獲取一個list和一個數字，然后將列表的元素返回到該位置。

So, our tuple consists of the three winning coordinates of our board that we’ve accessed using List.nth.

因此，我們的tuple由我們使用List.nth訪問的董事會的三個獲勝坐標List.nth 。

Now, we can match our tuple data against the patterns. The first two patterns check if all three fields are marked by the same player. If they are, we’ll return the winner — Cross or Circle. Otherwise, we’ll return NoOne.

現在，我們可以將tuple數據與模式匹配。前兩個模式檢查所有三個字段是否都由同一玩家標記。如果是，我們將退還贏家Cross或Circle 。否則，我們將返回NoOne 。

Let’s see what’s going on inside the gameEnded function. It checks if all the fields are Marked and returns a boolean.

讓我們看看gameEnded函數內部發生了gameEnded 。它檢查是否所有字段都已Marked并返回布爾值。

let gameEnded = board =>List.for_all(field => field == Marked(Circle) || field == Marked(Cross),board,);

Since we know what values can be returned from our helper functions, let’s come back to our check function.

由于我們知道可以從輔助函數中返回什么值，因此讓我們回到check函數。

switch (getWinner(flattenBoard, head),gameEnded(flattenBoard),tail,) {| (Cross, _, _) => Winner(Cross)| (Circle, _, _) => Winner(Circle)| (_, true, []) => Draw| (_, false, []) => whosPlaying(gameState)| _ => check(tail)};

Our pattern matching can now determine if the game ended in a win or draw. If these cases are not matched, we’ll move to the following case. If it’s matched, the game will continue and the whosPlaying function will be called, and the other player will take a turn.

現在，我們的模式匹配可以確定游戲是以贏還是平局結束。如果這些情況不匹配，我們將移至以下情況。如果匹配，游戲將繼續并調用whosPlaying函數，另一位玩家將回合。

let whosPlaying = (gameState: gameState) =>switch (gameState) {| Playing(Cross) => Playing(Circle)| _ => Playing(Cross)};

Otherwise, we’ll call the check function recursively with a new combination of winning fields.

否則，我們將使用獲勝字段的新組合遞歸調用check函數。

That’s it. Now you know how our code controlling the game logic works.

而已。現在您知道了我們控制游戲邏輯的代碼如何工作。

那是所有人！ (That’s all folks!)

I hope this post helped you to understand the core features of this promising and still-developing language. However, to fully appreciate the power of this new syntax on top of OCaml, you need to start building your own stuff. Now you’re ready to do that.

我希望這篇文章可以幫助您了解這種有前途且仍在發展中的語言的核心功能。但是，要充分了解OCaml之上這種新語法的功能，您需要開始構建自己的東西。現在您準備好了。

Good luck!

祝好運！

If you liked this article, give it a few claps. I would greatly appreciate it and more people will be able to see this post as well.

如果您喜歡這篇文章，請給她一些鼓掌。我將不勝感激，更多的人也將能夠看到這篇文章。

This post was originally published on my blog.

該帖子最初發布在我的博客上。

If you have any questions, criticism, observations, or tips for improvement, feel free to write a comment below or reach me via Twitter.

如果您有任何疑問，批評，意見或改進技巧，請隨時在下面寫評論或通過Twitter與我聯系。