當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

react中使用构建缓存_通过在React中构建Tic Tac Toe来学习ReasonML

發(fā)布時(shí)間：2023/11/29 编程问答 30 豆豆

生活随笔收集整理的這篇文章主要介紹了 react中使用构建缓存_通过在React中构建Tic Tac Toe来学习ReasonML 小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

react中使用構(gòu)建緩存

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.

您可能以前聽(tīng)說(shuō)過(guò)理性。這是OCaml之上的語(yǔ)法，可編譯為可讀JavaScript代碼以及本機(jī)代碼和字節(jié)代碼。

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.

這意味著您可能會(huì)使用Reason語(yǔ)法編寫單個(gè)應(yīng)用程序，并能夠在瀏覽器以及Android和iOS手機(jī)上運(yùn)行它。

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.

這是原因(哎呀，雙關(guān)語(yǔ))變得越來(lái)越流行的原因之一。由于語(yǔ)法相似，在JavaScript社區(qū)中尤其如此。

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問(wèn)世之前是JavaScript開(kāi)發(fā)人員，并且想學(xué)習(xí)一種功能編程(FP)語(yǔ)言，那么您還必須學(xué)習(xí)一種全新的語(yǔ)法和規(guī)則集。這可能使許多人灰心。

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，組成和高階函數(shù)。

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.

在我發(fā)現(xiàn)Reason之前，我試圖盡可能多地在JavaScript中使用FP原理。但是，JavaScript在這種意義上受到限制，因?yàn)樗⒉灰馕吨荈P語(yǔ)言。為了有效地利用這些原理，您需要使用一堆庫(kù)來(lái)創(chuàng)建對(duì)您隱藏的復(fù)雜抽象。

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開(kāi)發(fā)人員開(kāi)放了整個(gè)FP領(lǐng)域。它為我們提供了使用我們熟知的語(yǔ)法來(lái)使用所有這些很酷的OCaml功能的機(jī)會(huì)。

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

最后但并非最不重要的一點(diǎn)是，我們可以使用Reason編寫React或React Native應(yīng)用程序。

您為什么要嘗試?yán)硇?#xff1f; (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.

當(dāng)我們?yōu)g覽經(jīng)典的Tic Tac Toe游戲的源代碼時(shí)，使用React用Reason編寫。我將解釋該語(yǔ)言的核心功能。您將看到強(qiáng)類型系統(tǒng)，不變性，模式匹配，使用管道的功能組合等優(yōu)點(diǎn)。與JavaScript不同，這些功能是Reason本身固有的。

熱身 (Warming up)

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

在弄臟手之前，您需要按照本指南在計(jì)算機(jī)上安裝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.

之后，您需要設(shè)置您的應(yīng)用程序。為此，您可以克隆包含我們應(yīng)用程序代碼的存儲(chǔ)庫(kù) ，也可以使用ReasonScripts和代碼來(lái)設(shè)置自己的項(xiàng)目。

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.

要在瀏覽器中查看您的應(yīng)用，您需要先將Reason文件編譯為JavaScript文件。 BuckleScript編譯器將負(fù)責(zé)此工作。

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.

換句話說(shuō)，當(dāng)您運(yùn)行npm start (在ReasonScripts項(xiàng)目中)時(shí)，您的Reason代碼將編譯為JavaScript。然后將編譯結(jié)果呈現(xiàn)給瀏覽器。通過(guò)檢查應(yīng)用程序內(nèi)的lib文件夾，您可以自己查看編譯后代碼的可讀性。

我們的第一個(gè)組成部分 (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.

正如我們已經(jīng)提到的，我們的Tic Tac Toe應(yīng)用是使用ReasonReact庫(kù)編寫的。這使得Reason對(duì)于JavaScript開(kāi)發(fā)人員來(lái)說(shuō)很容易上手，并且這個(gè)社區(qū)有很多新來(lái)者。

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.

我們的應(yīng)用程序具有經(jīng)典的組件結(jié)構(gòu)，就像其他任何React應(yīng)用程序一樣。在談?wù)揢I時(shí)，我們將自上而下瀏覽組件，而在描述其邏輯時(shí)，則將自下而上瀏覽。

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

讓我們開(kāi)始看看頂級(jí)的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.

當(dāng)您調(diào)用ReasonReact.statelessComponent并將該組件的名稱傳遞給它時(shí)，將創(chuàng)建該組件。您不需要像React中的任何類關(guān)鍵字，因?yàn)镽eason沒(méi)有任何內(nèi)容。

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.

組件既不是類也不是函數(shù)，它既是所謂的record 。 record是Reason的數(shù)據(jù)結(jié)構(gòu)之一，類似于JavaScript對(duì)象。但是，與后者不同， 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組件包含各種默認(rèn)屬性，例如初始狀態(tài)，生命周期方法和呈現(xiàn)。要根據(jù)我們的需求調(diào)整組件，我們需要覆蓋其中一些屬性。我們可以在返回組件的make函數(shù)中執(zhí)行此操作。

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是不可變的，因此我們無(wú)法通過(guò)更改覆蓋其屬性。相反，我們需要返回一個(gè)新record 。為此，我們需要擴(kuò)展組件并重新定義我們要更改的屬性。這與JavaScript對(duì)象傳播運(yùn)算符非常相似。

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是一個(gè)非常簡(jiǎn)單的組件，因此我們只想覆蓋默認(rèn)的render方法，以便可以將元素渲染到屏幕上。 render方法采用單個(gè)self參數(shù)，使我們可以訪問(wèn)狀態(tài)和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函數(shù)可以返回JSX元素。沒(méi)有大寫的元素將被識(shí)別為DOM元素— div 。大寫的元素將被識(shí)別為組件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強(qiáng)大的類型系統(tǒng)，您不能像經(jīng)典React那樣簡(jiǎn)單地將字符串傳遞給元素以顯示它。

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幫助器函數(shù)，該函數(shù)會(huì)將其轉(zhuǎn)換為可以呈現(xiàn)的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.

由于這有點(diǎn)冗長(zhǎng)，并且我們將經(jīng)常使用此幫助器，因此將其存儲(chǔ)在toString變量中。在理性中，您只能使用let關(guān)鍵字來(lái)做到這一點(diǎn)。

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.

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

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.

但是，我們沒(méi)有使用它。我們可以通過(guò)在其前面加一個(gè)下劃線來(lái)使之明確。如果我們還沒(méi)有這樣做，編譯器會(huì)警告我們?cè)搮?shù)沒(méi)有被使用。我們?cè)趓ender方法中使用self參數(shù)做同樣的事情。

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

與JavaScript相比，可理解的錯(cuò)誤和警告消息是另一個(gè)很酷的功能，它將改善您的開(kāi)發(fā)人員體驗(yàn)。

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

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

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

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.

原因是一種靜態(tài)類型的語(yǔ)言。這意味著它將在編譯期間評(píng)估我們的值的類型。換句話說(shuō)，您無(wú)需運(yùn)行應(yīng)用程序即可檢查類型是否正確。這也意味著您的編輯器可以為您提供有用的編輯支持。

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.

但是，擁有類型系統(tǒng)并不意味著您需要為所有值明確定義類型。如果您決定不這樣做，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.

我們將利用類型系統(tǒng)來(lái)定義將在整個(gè)應(yīng)用程序中使用的類型。這將迫使我們?cè)趯?duì)應(yīng)用程序進(jìn)行編碼之前考慮一下應(yīng)用程序的結(jié)構(gòu)，并且還會(huì)獲得一份代碼文檔作為獎(jiǎng)勵(lì)。

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的經(jīng)驗(yàn)，Reason類型將很熟悉。但是，與這兩個(gè)庫(kù)不同，您根本不需要任何先前的配置(我在看您的Typescript)。開(kāi)箱即用。

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中，我們可以區(qū)分類型和變體類型 (簡(jiǎn)稱為變體)。類型是例如bool ， string和int 。另一方面，變體更加復(fù)雜。將它們視為可枚舉的值集，或更準(zhǔn)確地說(shuō)，是構(gòu)造函數(shù)。可以通過(guò)模式匹配來(lái)處理變體，我們將在后面看到。

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 變體。定義變體時(shí)，需要使用type關(guān)鍵字。

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.

由于我們正在構(gòu)建Tic Tac Toe游戲，因此我們需要兩名玩家。因此， player類型將具有兩個(gè)可能的構(gòu)造函數(shù)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類型都可以有兩個(gè)可能的構(gòu)造函數(shù)- Empty或由一個(gè)玩家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構(gòu)造函數(shù)，可以看到我們正在將其用作數(shù)據(jù)結(jié)構(gòu)。我們使用一個(gè)變體來(lái)保存另一段數(shù)據(jù)。在我們的案例中，我們將其傳遞給player變量。這種行為非常強(qiáng)大，因?yàn)樗刮覀兡軌驅(qū)⒉煌淖凅w和類型組合在一起以創(chuàng)建更復(fù)雜的類型。

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

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

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的數(shù)據(jù)結(jié)構(gòu)之一，類似于JavaScript數(shù)組。不同之處在于，它是不變的。原因也有一個(gè)array作為可變的固定長(zhǎng)度列表。稍后我們將回到這些結(jié)構(gòu)。

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.

我們需要定義的另一個(gè)變體是gameState 。游戲可以具有三種可能的狀態(tài)。 player可以是Playing Winner ，或是Winner ，或者我們可以開(kāi)Draw 。

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

現(xiàn)在，我們擁有構(gòu)成游戲狀態(tài)所需的所有類型。

type state = {board,gameState, };

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

我們組件的狀態(tài)是由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:

在進(jìn)一步介紹之前，我想談?wù)勀K。實(shí)際上，文件是模塊。例如，我們將所有變體存儲(chǔ)在SharedTypes.re文件中。這段代碼會(huì)自動(dòng)包裝在模塊中，如下所示：

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.

如果要在其他文件中訪問(wèn)此模塊，則不需要任何import關(guān)鍵字。我們可以使用點(diǎn)符號(hào)(例如SharedTypes.gameState輕松地在應(yīng)用程序中的任何位置訪問(wèn)模塊。

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.

由于我們經(jīng)常使用變體，因此可以通過(guò)在要訪問(wèn)模塊的文件頂部編寫open SharedTypes使其更加簡(jiǎn)潔。因?yàn)槲覀兛梢栽谖募秶鷥?nèi)使用模塊，所以這使我們可以刪除點(diǎn)符號(hào)。

建立狀態(tài) (Establishing state)

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

由于我們知道應(yīng)用程序的狀態(tài)，因此我們可以開(kāi)始構(gòu)建游戲本身。

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.

我們已經(jīng)看到，我們的App組件呈現(xiàn)了Game組件。這是所有樂(lè)趣開(kāi)始的地方。我將逐步指導(dǎo)您完成代碼。

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是一個(gè)無(wú)狀態(tài)組件，類似于React中的功能組件。另一方面， Game是有狀態(tài)的，這意味著它可以包含狀態(tài)和約簡(jiǎn)。理性中的reducers基于與Redux相同的原理。您調(diào)用一個(gè)動(dòng)作，減速器將捕獲該動(dòng)作并相應(yīng)地更新?tīng)顟B(tài)。

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

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

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是一個(gè)函數(shù)(令人驚訝地)返回我們存儲(chǔ)在變量中的初始狀態(tài)的函數(shù)。

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.

如果向上滾動(dòng)一點(diǎn)并檢查我們的state類型，您會(huì)看到initialState具有相同的結(jié)構(gòu)。它由包含field s的row的board組成。在游戲開(kāi)始時(shí)，所有字段均為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.

但是，它們的狀態(tài)可能會(huì)隨著游戲的進(jìn)行而改變。狀態(tài)的另一部分是gameState ，它最初設(shè)置為首先玩的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.

我們已經(jīng)知道它接受了self論證。在這里，我們使用解構(gòu)來(lái)訪問(wèn)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和兩個(gè)狀態(tài)處理程序作為道具傳遞給它。第一個(gè)負(fù)責(zé)應(yīng)用的重啟，第二個(gè)負(fù)責(zé)在玩家標(biāo)記該字段時(shí)觸發(fā)。

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.

您可能已經(jīng)注意到，通過(guò)state道具時(shí)，我們不是在寫state=state 。因此，如果我們不更改道具名稱，則可以使用此簡(jiǎn)化語(yǔ)法傳遞道具。

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

現(xiàn)在，我們來(lái)看一下Board組件。我暫時(shí)省略了大多數(shù)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是無(wú)國(guó)籍的組成部分。您可能已經(jīng)注意到， make函數(shù)現(xiàn)在帶有幾個(gè)參數(shù)。這些是我們從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.

~符號(hào)表示該參數(shù)已標(biāo)記。當(dāng)使用這樣的參數(shù)調(diào)用函數(shù)時(shí)，我們需要在調(diào)用該函數(shù)(組件)時(shí)顯式地編寫參數(shù)名稱。這就是我們?cè)贕ame組件中將道具傳遞給它時(shí)所做的。

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.

您可能還注意到，我們正在使用其中一個(gè)參數(shù)~state:state做另一件事。在上一節(jié)中，我們定義了state類型。在這里，我們告訴編譯器此參數(shù)的結(jié)構(gòu)應(yīng)與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.

由于我們?cè)谶@里處理列表，因此在檢查其余render方法之前，我們現(xiàn)在將稍微討論它們。

游覽I：列表和數(shù)組 (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.

在原因，我們有兩個(gè)數(shù)據(jù)結(jié)構(gòu)類似于JavaScript數(shù)組- list和array 。該list是不可變的并且可調(diào)整大小，而array是可變的，并且具有固定的長(zhǎng)度。我們使用list因?yàn)樗撵`活性和效率，當(dāng)我們遞歸使用它時(shí)，它確實(shí)很出色。

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方法，該方法接收兩個(gè)參數(shù)-一個(gè)函數(shù)和一個(gè)list 。該函數(shù)從list獲取一個(gè)元素并進(jìn)行映射。這非常類似于JavaScript Array.map 。這是一個(gè)簡(jiǎn)單的例子：

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.

什么？您是說(shuō)打印結(jié)果看起來(lái)很奇怪？這是因?yàn)镽eason中的列表是鏈接的。

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

在代碼中打印列表可能會(huì)造成混淆。幸運(yùn)的是，您可以使用Array.of_list方法將其轉(zhuǎn)換為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.

讓我們回到我們的應(yīng)用程序，提醒自己我們的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.

內(nèi)部審計(jì)委員會(huì)的render方法，我們首先映射在board它是由行的列表中。因此，通過(guò)對(duì)其進(jìn)行映射，我們將可以訪問(wèn)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方法，該方法為我們提供了一個(gè)index參數(shù)，我們需要用它來(lái)唯一地定義ID。

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

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

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將其轉(zhuǎn)換為array 。其次，我們需要將結(jié)果轉(zhuǎn)換到reactElement使用ReasonReact.array ，因?yàn)槲覀?已經(jīng)提到)不能串簡(jiǎn)單地傳遞到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 。我們?cè)贐oardRow組件中執(zhí)行此BoardRow 。在此，該row每個(gè)元素都將映射到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.

使用這兩個(gè)映射，可以渲染我們的電路板。您會(huì)同意我的觀點(diǎn)，由于所有函數(shù)包裝，該代碼的可讀性不是很好。

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運(yùn)算符，該運(yùn)算符獲取list數(shù)據(jù)并通過(guò)函數(shù)將其管道傳輸。這是第二個(gè)映射示例-這次使用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.

這使我們的代碼更具可讀性，您不覺(jué)得嗎？首先，我們將該row傳遞給映射方法。然后，將結(jié)果轉(zhuǎn)換為array 。最后，我們將其轉(zhuǎn)換為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.

通過(guò)映射我們的棋盤，我們?cè)谄聊簧箱秩玖艘欢裇quare組件，并以此創(chuàng)建了整個(gè)游戲棋盤。

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 。因?yàn)槲覀兿Ｍ鹖d是唯一的，所以我們通過(guò)組合兩個(gè)映射的索引來(lái)創(chuàng)建它。我們還向下傳遞了包含可以為Empty或Marked的field類型的value 。

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

最后，我們傳遞一個(gè)gameState和onMark處理程序，當(dāng)單擊特定Square時(shí)將調(diào)用它們。

輸入欄位 (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組件呈現(xiàn)一個(gè)按鈕，并向其傳遞一些道具。我們?cè)谶@里使用了幾個(gè)輔助函數(shù)，但是我不會(huì)詳細(xì)討論它們。你可以找到所有的回購(gòu) 。

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輔助函數(shù)計(jì)算按鈕的類，當(dāng)其中一位玩家獲勝時(shí)，該函數(shù)將正方形變?yōu)榫G色。發(fā)生這種情況時(shí)，所有Square也將被禁用。

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

為了呈現(xiàn)按鈕的value ，我們使用了兩個(gè)幫助器。

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類型轉(zhuǎn)換為字符串。稍后我們將討論模式匹配。現(xiàn)在，您需要知道我們正在將field數(shù)據(jù)與我們的三種模式進(jìn)行匹配。因此，結(jié)果將是X ， O或空字符串。然后，我們使用toString將其轉(zhuǎn)換為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.

我們的頂級(jí)App組件呈現(xiàn)了Game組件，該組件保留游戲狀態(tài)并將其與處理程序一起傳遞給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獲取董事會(huì)狀態(tài)道具并將行映射到BoardRow組件，后者將行映射到Square組件。每個(gè)Square都有一個(gè)onClick處理程序，該處理程序?qū)⒂谜叫位驁A形填充它。

使它已經(jīng)做某事！ (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.

由于我們有一塊木板，因此我們可以允許玩家單擊任何正方形。發(fā)生這種情況時(shí)，將觸發(fā)onClick處理程序并調(diào)用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 ，但它最初是在負(fù)責(zé)狀態(tài)的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道具是一個(gè)ClickSquare器，這意味著我們正在使用它來(lái)更新?tīng)顟B(tài)(如Redux中一樣)。 onRestart處理程序的工作方式與此類似。

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

請(qǐng)注意，我們是路過(guò)廣場(chǎng)的獨(dú)特id的onMark內(nèi)部處理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.

在詳細(xì)研究我們的減速器之前，我們需要定義減速器將響應(yīng)的動(dòng)作。

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.

與全局變量類型一樣，這迫使我們?cè)陂_(kāi)始執(zhí)行邏輯之前先考慮一下自己的邏輯。我們定義了兩個(gè)動(dòng)作變體。 ClickSquare接受一個(gè)參數(shù)，該參數(shù)將具有string類型。

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

現(xiàn)在，讓我們看一下減速器。

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 。如我們所見(jiàn)，我們傳入了BoardRow組件。然后，我們的減速器計(jì)算一個(gè)新?tīng)顟B(tài)。

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.

對(duì)于board狀態(tài)更新，我們將調(diào)用updateBoard函數(shù)。它使用與Board和BoardRow組件相同的映射邏輯。在其內(nèi)部，我們?cè)趕tate.board進(jìn)行映射以獲取行，然后在行上進(jìn)行映射以獲取字段值。

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是來(lái)自兩個(gè)映射組成，我們將用它來(lái)查找該用戶點(diǎn)擊了該領(lǐng)域。找到它后，我們將使用模式匹配來(lái)確定如何處理它。否則，我們將不修改平方的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.

我們使用模式匹配來(lái)處理我們的數(shù)據(jù)。我們定義將與數(shù)據(jù)匹配的模式。在Reason中執(zhí)行模式匹配時(shí)，我們使用switch語(yǔ)句。

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).

在我們的例子中，我們使用一個(gè)元組來(lái)表示我們的數(shù)據(jù) 。元組是用逗號(hào)分隔數(shù)據(jù)的數(shù)據(jù)結(jié)構(gòu)。我們的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.

然后，我們定義將與數(shù)據(jù)匹配的多個(gè)模式。第一個(gè)匹配確定整個(gè)模式匹配的結(jié)果。

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.

通過(guò)在模式內(nèi)部寫下劃線，我們告訴編譯器我們不在乎特定的值是什么。換句話說(shuō)，我們希望每次都有一場(chǎng)比賽。

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.

例如，當(dāng)value被任何玩家Marked時(shí)，第一個(gè)模式將匹配。因此，我們不在乎gameState ，也不在乎玩家類型。

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

匹配此模式后，結(jié)果為原始value 。這種模式可防止玩家覆蓋已經(jīng)標(biāo)記的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 。在這里，我們?cè)谀Ｊ街惺褂胮layer類型，然后在結(jié)果中再次使用。基本上，我們說(shuō)的是我們不在乎哪個(gè)玩家在玩( Circle或Cross )，但我們?nèi)砸鶕?jù)實(shí)際玩的玩家來(lái)標(biāo)記正方形。

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.

最后一個(gè)模式用作默認(rèn)模式。如果第一個(gè)或第二個(gè)模式不匹配，則第三個(gè)將始終匹配。在這里，我們不在乎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游戲狀態(tài)，因此現(xiàn)在要檢查“ Draw或“ Winner gameState類型。如果是這種情況，我們將保留字段Empty 。此默認(rèn)方案可防止玩家在游戲結(jié)束后繼續(xù)玩游戲。

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.

原因中關(guān)于模式匹配的一個(gè)很酷的事情是，如果您沒(méi)有涵蓋所有可能的模式匹配，編譯器會(huì)警告您。這將為您省去很多麻煩，因?yàn)槟鷮⑹冀K知道是否已涵蓋所有可能的情況。因此，如果編譯器未向您發(fā)出任何警告，則模式匹配將永遠(yuǎn)不會(huì)失敗。

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.

模式匹配完成后，特定字段將更新。完成所有映射后，我們將獲得一個(gè)新的板狀態(tài)并將其存儲(chǔ)為updatedBoard 。然后，我們可以通過(guò)調(diào)用ReasonReact.Update來(lái)更新組件的狀態(tài)。

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.

我們使用模式匹配的結(jié)果來(lái)更新board狀態(tài)。在更新gameState ，我們調(diào)用checkGameState3x3幫助程序，該幫助程序?yàn)槲覀冇?jì)算游戲狀態(tài)。

我們有贏家嗎？ (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.

首先，我們需要定義所有可能的獲勝字段組合(對(duì)于3x3板)，并將它們存儲(chǔ)為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.

我們將此列表作為第一個(gè)參數(shù)傳遞給checkGameState函數(shù)。

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.

通過(guò)這樣做，我們利用了流通原則。當(dāng)我們將winningCombs傳遞給checkGameState函數(shù)時(shí)，我們將返回一個(gè)新函數(shù)，等待傳遞其余參數(shù)。我們將此新功能存儲(chǔ)為checkGameState3x3 。

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

這種行為確實(shí)很有幫助，因?yàn)槲覀兡軌蚋鶕?jù)棋盤的寬度和高度來(lái)配置checkGameState函數(shù)。

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

讓我們看看checkGameState函數(shù)內(nèi)部發(fā)生了checkGameState 。

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.

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

計(jì)算新?tīng)顟B(tài) (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:

我們開(kāi)始通過(guò)使用List.flatten將狀態(tài)的board部分轉(zhuǎn)換為簡(jiǎn)單list來(lái)確定新游戲狀態(tài)，該board部分由行l(wèi)ist List.flatten 。展平的結(jié)果將具有以下結(jié)構(gòu)：

[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.

回到該函數(shù)中，我們定義了一個(gè)check函數(shù)，該函數(shù)接收一個(gè)類型為winningRows的單個(gè)rest參數(shù)。定義前的rec關(guān)鍵字意味著可以遞歸調(diào)用它。但是，對(duì)于遞歸函數(shù)調(diào)用，我們還需要遞歸數(shù)據(jù)。幸運(yùn)的是，該list是遞歸數(shù)據(jù)結(jié)構(gòu)。

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

我們已經(jīng)了解到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的底部，我們第一次調(diào)用check函數(shù)，并將其傳遞給winningCombs列表。在函數(shù)內(nèi)部，我們從list提取第一個(gè)元素并將其存儲(chǔ)為head 。 list的其余部分將作為tail存儲(chǔ)。

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.

之后，我們?cè)俅问褂媚Ｊ狡ヅ洹?我們已經(jīng)知道它是如何工作的，所以我將不做詳細(xì)介紹。但是值得檢查一下我們?nèi)绾味x數(shù)據(jù)和模式。

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語(yǔ)句內(nèi)部，我們?cè)俅问褂胻uple表示數(shù)據(jù)。我們的tuple包含三個(gè)元素得主類型作為結(jié)果getWinner功能，布爾作為結(jié)果gameEnded功能，和剩余的list元素( tail )。

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

在繼續(xù)之前，讓我們先談?wù)勥@兩個(gè)輔助函數(shù)。

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

我們首先來(lái)看一下getWinner函數(shù)。

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.

當(dāng)我們第一次調(diào)用check遞歸函數(shù)時(shí)， head將是winningRows的第一個(gè)元素，即[0, 1, 2] ，這是一個(gè)list 。我們通過(guò)head向getWinner函數(shù)作為coords與一起說(shuō)法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內(nèi)部，我們使用List.nth方法訪問(wèn)List.nth list coords的等效位置。 List.nth函數(shù)獲取一個(gè)list和一個(gè)數(shù)字，然后將列表的元素返回到該位置。

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

因此，我們的tuple由我們使用List.nth訪問(wèn)的董事會(huì)的三個(gè)獲勝坐標(biāo)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.

現(xiàn)在，我們可以將tuple數(shù)據(jù)與模式匹配。前兩個(gè)模式檢查所有三個(gè)字段是否都由同一玩家標(biāo)記。如果是，我們將退還贏家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函數(shù)內(nèi)部發(fā)生了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.

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

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.

現(xiàn)在，我們的模式匹配可以確定游戲是以贏還是平局結(jié)束。如果這些情況不匹配，我們將移至以下情況。如果匹配，游戲?qū)⒗^續(xù)并調(diào)用whosPlaying函數(shù)，另一位玩家將回合。

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.

否則，我們將使用獲勝字段的新組合遞歸調(diào)用check函數(shù)。

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

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

那是所有人！ (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.

我希望這篇文章可以幫助您了解這種有前途且仍在發(fā)展中的語(yǔ)言的核心功能。但是，要充分了解OCaml之上這種新語(yǔ)法的功能，您需要開(kāi)始構(gòu)建自己的東西。現(xiàn)在您準(zhǔn)備好了。

Good luck!

祝好運(yùn)！

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.

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

This post was originally published on my blog.

該帖子最初發(fā)布在我的博客上。

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

如果您有任何疑問(wèn)，批評(píng)，意見(jiàn)或改進(jìn)技巧，請(qǐng)隨時(shí)在下面寫評(píng)論或通過(guò)Twitter與我聯(lián)系。

翻譯自: https://www.freecodecamp.org/news/learn-reasonml-by-building-tic-tac-toe-in-react-334203dd513c/