arduino扩展板的使用

by Chris Aquino

克里斯·阿基诺(Chris Aquino)

如何使用Arduino和React为烧烤构建仪表板 (How to build a dashboard for your grill using Arduino and React)

“When should I use React?” My students at DigitalCrafts have been asking me this question a lot lately.

“我什么时候应该使用React？” 最近，我在DigitalCrafts的学生一直在问我这个问题。

We’re three months into the bootcamp and two days into React. Several students have commented that React has a weird mix that combines the familiar with the foreign.

我们距离训练营有3个月的时间，而有2天才进入React。一些学生评论说，React混合了外国人和外国人之间的怪异组合。

And naturally so. It looks like a bizarre mix of JavaScript and HTML, while having the one-way rendering sensibilities of Express and Handlebars.

当然是这样。它看起来像JavaScript和HTML的奇异混合体，同时具有Express和Handlebars的单向渲染功能。

My favorite go-to answer is dashboards. React is great for creating panels that independently update information. It is the kind of UIs that is a nightmare to build using jQuery.

我最喜欢的答案是仪表板。 React非常适合创建独立更新信息的面板。使用jQuery构建UI是一种噩梦。

Then they ask, “Ok, like what?”

然后他们问：“好，喜欢什么？”

And then I show them…PitMaster.

然后，我向他们展示…PitMaster。

First, a confession: I have an unnatural love for barbecue. If I’m not eating barbecue, I’m making a barbecue. (In the Southern United States, barbecue is a noun, not a verb. It is the process of exposing meat to low-temperature smoke for hours.)

首先，要承认：我对烧烤有一种不自然的爱。如果我不吃烧烤，那我就是在做烧烤。 (在美国南部，烧烤是名词，而不是动词。它是将肉类暴露于低温烟雾数小时的过程。)

Last Thanksgiving, in anticipation of being extremely lazy, I built a device that monitors the progress of turkey cooking in a smoker. The results were displayed in real time on a web page. Granted, a turkey does not take long to cook when compared to other kinds of meat. And I am really not that lazy, but I had a grander vision in mind.

上个感恩节，我以为自己会非常懒惰，所以我制造了一种设备，可以监视吸烟者中火鸡烹饪的进度。结果实时显示在网页上。当然，与其他种类的肉相比，火鸡不需要花费很多时间。我确实不是那么懒惰，但是我心中有一个宏伟的愿景。

Picture this: you’re 12 hours into an 18-hour smoke, and you’d really rather not get off the couch to check the temperature yet again. Besides, you shouldn’t open the smoker during the cook, thereby causing a massive temperature fluctuation.

想象一下：您已经冒了18个小时的烟雾，已经有12个小时了，您真的不想离开沙发再次检查温度。此外，在烹饪过程中，您不应该打开吸烟者，以免引起巨大的温度波动。

The details of the hardware could fill another blog post, but here is a rough sketch of it.

硬件的详细信息可能会填满另一篇博客文章，但这是它的粗略草图。

Poke a food-safe, high-temperature thermal resistor (thermistor) into the food just before you place it into the smoker. A thermistor is a piece of hardware that changes its electrical conductivity as its temperature changes. A long wire runs from the thermistor to an Arduino.

在将食物放入吸烟者中之前，将食物安全的高温热敏电阻(热敏电阻)插入食物中。热敏电阻是一种随温度变化而改变其导电性的硬件。从热敏电阻到Arduino的长导线。

The Arduino runs a program that converts the analog reading from the thermistor to a digital value. A Raspberry Pi polls the Arduino for this value every few 100 milliseconds, logs it to a file, and then pushes it to any client connected via WebSocket.

Arduino运行一个程序，将热敏电阻的模拟读数转换为数字值。 Raspberry Pi每隔几百毫秒会轮询Arduino以获取该值，将其记录到文件中，然后将其推送到通过WebSocket连接的任何客户端。

It may sound fancy, but here’s what the contraption actually looks like.

听起来似乎很花哨，但实际上是这样的样子。

Originally, the UI for displaying the current temperature was, to put it plainly, really ugly. It was precisely what you’d see in a “Hello World” tutorial, consisting of a single unstyled h1 in all its Times New Roman glory.

最初，用于显示当前温度的UI确实很丑陋。这正是您在“ Hello World”教程中看到的内容，该教程在其Times New Roman的所有荣耀中都包含一个无样式的h1 。

So I built PitMaster , a dashboard that monitors the progress of smokers. You can grab a copy of the code here.

因此，我建立了PitMaster ，它是一个监控吸烟者进度的仪表板。您可以在此处获取代码的副本。

In this post, I'll go over some key concepts that eluded me when I started learning React.

在这篇文章中，我将介绍当我开始学习React时所无法理解的一些关键概念。

总览 (Overview)

Despite all the buzz about “functional, declarative UIs” and “diffing the Virtual DOM,” I focus on these three guidelines when building with React:

尽管有很多关于“功能性，声明性UI”和“差异化虚拟DOM”的讨论，但是在使用React进行构建时，我还是专注于以下三个准则：

Data in, UI out
数据输入，UI输出
Build your components bottom-up, and pass data top-down
自底向上构建组件，自顶向下传递数据
Make your components as dumb as possible, but no dumber
使您的组件尽可能哑，但不要哑

With these in mind, let’s look at the UI.

考虑到这些，让我们看一下UI。

绘制PitMaster (Sketching out PitMaster)

Here is a basic wireframe of the PitMaster UI:

这是PitMaster UI的基本线框：

As recommended in the excellent Thinking in React page, the best way to start is by doing a visual breakdown of your UI.

正如出色的React中思考页面中所建议的那样，最好的开始方法是对UI进行可视化细分。

PitMaster is an application split into two parts: a form that can be used to add orders and a panel that displays the current status of each order.

PitMaster是一个分为两部分的应用程序：可用于添加订单的表单和显示每个订单当前状态的面板。

The form can be broken down into three parts:

该表格可分为三部分：

Drop-down with the different types of foods
下拉菜单中包含不同类型的食物
Text input to enter the name of the person who is ordering the food
输入文字以输入订购食物的人的姓名
Submit button to submit the form
提交按钮以提交表格

The panel only holds an individual “monitor” for a food order. These appear to be more complex, but they don’t do much other than display text and numbers. We’ll start with these, as they demonstrate the most fundamental idea in React: transforming data into an UI.

面板上只有一个食品订单的“监视器”。这些似乎更复杂，但是除了显示文本和数字外，它们没有做其他事情。我们将从这些开始，因为它们展示了React中最基本的想法：将数据转换为UI。

使用函数将数据转换为UI组件 (Using functions to transform data into UI components)

React lends itself perfectly to atomic design principles. This has nothing to do with nuclear physics and everything to do with a recent movement in UI design. In atomic design, you start by designing the smallest visual components and then composing them into larger and larger ones. This gives you the opportunity to reuse components in other parts of your UI. In the end, it’s less work and creates consistency across your entire UI.

React非常适合原子设计原则。这与核物理学无关，与UI设计的最新发展无关。在原子设计中，您首先要设计最小的视觉组件，然后将它们组成越来越大的组件。这使您有机会在UI的其他部分重用组件。最后，它的工作量减少了，并在整个UI中创建了一致性。

In PitMaster, you can see that the temperature Readout is the smallest, so I’ll start there. Another good candidate is the NameLabel, but the Readout is reused more often.

在PitMaster中，您可以看到温度读数最小，因此我将从那里开始。另一个不错的候选者是NameLabel，但Readout的使用频率更高。

构建读数组件 (Building the Readout component)

A Component in React is something that accepts data and returns a description of the UI that displays that data. Functions are exactly the right tool for the job. The Readout component will be no more than a function that accepts text, numbers as arguments, and returns a <span> with those values inside.

React中的Component可以接受数据并返回显示该数据的UI的描述。功能正是完成这项工作的正确工具。 Readout组件只不过是一个接受文本，数字作为参数并返回其中包含这些值的<sp an>的函数。

Here is the simplest version of that:

这是最简单的版本：

There are two things to note about this.

有两件事要注意。

First, any data that is passed to a component is bundled up in an object called props. Therefore, label and value must be accessed as properties of the props object.

首先，任何传递到组件的数据都捆绑在一个称为props的对象中。因此，必须将label和value作为props对象的属性进行访问。

Second, you aren’t actually creating DOM elements, you’re creating React elements, which are descriptions of DOM elements. This is going to feel very different if you are used to building UIs with jQuery, where you are either creating DOM elements or referencing existing DOM elements. The reasons for this will become more apparent soon.

其次，您实际上不是在创建DOM元素，而是在创建React元素，它们是DOM元素的描述。如果您习惯使用jQuery构建UI，那么您将感觉非常不同，在jQuery中您将创建DOM元素或引用现有DOM元素。原因很快就会变得更加明显。

The description React.createElement('span', null, props.label, props.value) means that the type of DOM element is a span .

描述React.createElement('span', null, props.label, props.value)表示DOM元素的类型为span 。

We are passing no props to it, and nested inside span are the values props.label and props.value.

我们没有传递任何props给它，并且嵌套在span内的是值props.label和props.value 。

Values that are nested inside of a React element are referred to as children.

嵌套在React元素内部的值称为子级。

箭头功能和销毁 (Arrow functions and destructuring)

There is an alternative syntax for functions that is used heavily in many React codebases. ES6 arrow functions are the same as anonymous functions, but with shorter syntax. (Because programmers hate pressing more keys than they need to!)

对于许多React代码库中大量使用的函数，还有另一种语法。 ES6 箭头功能与匿名功能相同，但语法较短。 (因为程序员讨厌按下比他们需要的更多的键！)

In the next snippet of code, an arrow function value is assigned to the variable Readout, which is declared using const, not var.

在下一个代码段中，将箭头函数值分配给变量Readout ，该变量使用const而不是var声明。

A const is a variable that cannot be reassigned.

const是无法重新分配的变量。

But wait, there’s more!

但是，等等，还有更多！

We can use ES6 destructuring syntax to pull specific values out of the props argument and assign them to local variables, all in one step.

我们可以使用ES6解构语法将特定值从props参数中提取出来并将它们分配给局部变量，所有这些操作只需一步即可。

React requires that your components return a single element. With arrow functions, if the body only has a single statement and it’s a return statement, then you can omit the curly braces and the return keyword. The value to the right of the arrow is implicitly returned.

React要求您的组件返回单个元素。使用箭头功能，如果主体只有一个语句，并且是return语句，则可以省略花括号和return关键字。箭头右边的值隐式return ed。

Because the return value can get long, you'll see code that looks like this, where parentheses have been added around the implicit return value:

由于return值可能变长，因此您将看到如下代码，其中在隐式返回值周围添加了括号：

It’s the same thing, but it lets the programmer do what they will with whitespace.

这是一回事，但是它使程序员可以使用空格来完成他们的工作。

JSX或“为什么我JavaScript中有HTML？” (JSX or “Why is there HTML in my JavaScript?”)

There’s another abstraction to add. Maybe we’ll need to put span inside of a div for styling purposes:

还有另一个要添加的抽象。也许出于样式目的，我们需要将span放在div内：

To do that, we have to write the following code in JavaScript:

为此，我们必须用JavaScript编写以下代码：

As you can imagine, as we try to describe more complex DOM structures, the nested React.createElement calls can quickly get out of hand. Thankfully, React lets you use an optional syntax for React.createElement that looks a lot like HTML. Here's that component rewritten using that syntax:

可以想象，当我们尝试描述更复杂的DOM结构时，嵌套的React.createElement调用会很快失去控制。幸运的是，React允许您为React.createElement使用可选的语法，该语法看起来很像HTML。这是使用该语法重写的组件：

This syntax is JSX, which is XML embedded in our JavaScript. Before the browser runs the JavaScript, the XML gets transformed into nested React.createElement function calls. Also, the curly braces, along with any JavaScript variables or expressions inside the curly braces, are evaluated and the resulting values are substituted in.

这种语法是JSX，这是我们JavaScript中嵌入的XML。在浏览器运行JavaScript之前，XML被转换为嵌套的React.createElement函数调用。此外，将对花括号以及花括号内的所有JavaScript变量或表达式进行评估，并将结果值替换为花括号。

The advantage here is that anyone familiar with HTML can glance at the JSX and know what DOM elements will be produced.

这样做的好处是，熟悉HTML的任何人都可以浏览JSX并知道将生成什么DOM元素。

定制组件 (Custom components)

What’s handy about React.createElement is that you aren't limited to describing HTML elements. Once you create a component like Readout, you can use it with React.createElement or with JSX.

React.createElement的方便React.createElement处在于您不仅限于描述HTML元素。一旦创建了类似Readout的组件，就可以将其与React.createElement或JSX一起使用。

Here's the full code listing for the component that displays three recent temperatures from three different time intervals (1 minute, 5 minutes, and 10 minutes).

这是该组件的完整代码列表，该组件显示来自三个不同时间间隔(1分钟，5分钟和10分钟)的三个最新温度。

You can mix your custom components in with the native HTML ones. Remember, your Readout components produce elements that are a span inside of a div.

您可以将自定义组件与本机HTML组件混合使用。记住，你Readout的组件产生是一个要素span一个内部div 。

And to pass arguments, for example props,to a custom component, you can use syntax that looks like HTML attributes:

并将参数(例如props,传递到自定义组件，您可以使用类似于HTML属性的语法：

If you look at Monitor.js, you can see that it is a combination of Readout, TemperatureHistory, NameLabel, and HTML components:

如果查看Monitor.js ，则可以看到它是Readout ， TemperatureHistory ， NameLabel和HTML组件的组合：

By now, it should be clear that components are nothing more than shorthand for nested calls to React.createElement. Each component receives data (props) from its parent and passes data to its children. All of the data that is displayed in a React app was originally passed to the root, top-most element.

到目前为止，应该很清楚，组件不过是嵌套调用React.createElement简写。每个组件都从其父级接收数据( props )并将数据传递给其子级。 React应用程序中显示的所有数据最初都传递给根的最顶层元素。

But the question then becomes, what is the result of all these function calls?

但是问题就变成了，所有这些函数调用的结果是什么？

使虚拟DOM神秘化 (Demystifying the Virtual DOM)

The answer is that all these nested React.createElement calls result in a large JavaScript object, also known as an element tree. Here is the element tree that is produced from <TemperatureHistory valueArray=[154, 132, 126] />:

答案是所有这些嵌套的React.createElement调用都会导致一个大JavaScript对象，也称为元素树。这是从<TemperatureHistory valueArray=[154, 132, 126] />生成的元素树：

React uses the element tree to create actual DOM elements and render them to the page. This is what is meant by the term Virtual DOM. The element tree serves as a blueprint for the DOM, and React can refer to this as it needs to update the page.

React使用元素树来创建实际的DOM元素并将其呈现到页面。这就是术语虚拟DOM的含义。元素树充当DOM的蓝图，React可以在更新页面时引用它。

更新DOM (Updating the DOM)

Alright, some time passes and the barbecue progresses towards delicious goodness. As the temperature readings change, so does the UI. Let’s say that only the first value of the temperature history has changed (from 154 to 156):

好吧，一段时间过去了，烧烤逐渐发展成美味佳肴。随着温度读数的变化，UI也会变化。假设只有温度历史记录的第一个值已更改(从154更改为156)：

<TemperatureHistory valueArray=[156, 132, 126] />

When the data changes, the new values are passed to the root component, and the data cascades down the component tree. This results in a new element tree.

当数据更改时，新值将传递到根组件，并且数据将在组件树中级联。这将产生一个新的元素树。

This is the resulting element tree:

这是结果元素树：

React then does something very clever. It compares this new element tree to the previous one. It then determines the minimal number of places in the DOM that it has to update. It literally figures out the difference between the two trees in order to do the least amount of work to ensure that the DOM reflects the most recent version of the data. (You should be freaking out right now because that’s really amazing.)

然后，React做一些非常聪明的事情。它将这个新元素树与前一个元素树进行比较。然后，它确定必须更新的DOM中最少的位置。它从字面上计算出两棵树之间的差异，以最少的工作量来确保DOM反映数据的最新版本。 (您现在应该吓坏了，因为这真的很棒。)

The next question is if everything in the element tree is a static value, how and where do we keep up with the application data?

下一个问题是，如果元素树中的所有内容都是静态值，我们如何以及在哪里跟踪应用程序数据？

A good example of a component that needs to keep up with application data is the FoodChooserForm. As the user enters information into the form, the data in the form changes, and this technically causes the form elements to re-render. But we need to make sure that anything the user has entered so far is retained.

FoodChooserForm是需要与应用程序数据保持FoodChooserForm一个很好的例子。当用户在表单中输入信息时，表单中的数据会发生变化，从技术上讲，这会导致表单元素重新呈现。但是我们需要确保保留用户到目前为止输入的所有内容。

添加类组件 (Adding class components)

Up till now, we have only looked at components that are functions. More specifically, these are known as stateless functional components. Most of your components will be of this variety. There is another kind of component that has a few additional capabilities. To create them, we’ll need to use the ES6 class syntax.

到目前为止，我们仅研究了作为功能的组件。更具体地说，这些被称为无状态功能组件 。您的大多数组件将具有这种多样性。还有另一种具有一些附加功能的组件。要创建它们，我们需要使用ES6类语法。

Here isFoodChooserForm, showing everything except the element tree it produces.

这是FoodChooserForm ，显示除它产生的元素树以外的所有内容。

Classes in JavaScript are really just syntactic sugar for functions and prototypes. In general, classes are used to create specialized versions of existing types of objects. When used with React, they primarily create components that can hold on to the state of the application data between re-renders. FoodChooserForm is an example of a stateful class component.

JavaScript中的类实际上只是函数和原型的语法糖。通常，使用类来创建现有对象类型的专用版本。当与React一起使用时，它们主要创建可以在重新渲染之间保持应用程序数据状态的组件。 FoodChooserForm是有状态类组件的示例。

It inherits from React.Component and invokes super(props) in its constructor. Also, notice that it initializes the instance variable this.state. The state variable is where a class component stores its application data. It has two other methods _updateOrderName and _updateFoodChoice. Each of these methods calls this.setState, which is a method provided by React.Component. This is the method that class components must use to make changes to the value of this.state. You pass it an object with the key/value pairs to update. React takes care of the rest.

它继承自React.Component并在其constructor调用super(props) 。另外，请注意，它会初始化实例变量this.state 。 state变量是类组件存储其应用程序数据的位置。它还有另外两个方法_updateOrderName和_updateFoodChoice 。这些方法中的每一个都调用this.setState ，这是React.Component提供的方法。这是类组件必须用来更改this.state的值的this.state 。您将带有键/值对的对象传递给它以进行更新。 React负责其余的工作。

Here is the full component code. It includes the definition of the render method, which is equivalent to the return value of a stateless functional component.

这是完整的组件代码。它包括render方法的定义，该方法等效于无状态功能组件的返回值。

The methods _updateOrderName, _updateFoodChoice, and _handleSubmit are all prefixed with an underscore. This is a common convention that distinguishes private methods from inherited methods. These private methods are passed as props to the event handlers of the components listed in the render method. Those components will receive these functions and blindly call them when those events are triggered, thus causing a change to the FoodChooserform's state.

方法_updateOrderName ， _updateFoodChoice和_handleSubmit都带有下划线前缀。这是将私有方法与继承方法区分开的通用约定。这些私有方法作为prop传递给render方法中列出的组件的事件处理程序。这些组件将接收这些功能，并在触发这些事件时盲目调用它们，从而导致FoodChooserform的state发生变化。

This is how most of your components can be “dumb” while a select few can be in charge of maintaining the state. Your dumb components know just enough to call these functions and pass to them the right information. In this case, FoodChooser calls _updateFoodChoice whenever something is selected from its drop-down menu, and NameLabel calls _updateOrderName as the user types in the text field. FoodChooserForm receives the most current value for the food choice and the order name, and saves it via this.setState.

这就是您的大多数组件可以“哑巴”的方式，而少数几个可以负责保持状态。您的愚蠢组件只知道足以调用这些函数并将正确的信息传递给它们。在这种情况下，每当从其下拉菜单中选择某些_updateFoodChoice时， FoodChooser调用_updateFoodChoice ，而NameLabel在用户在文本字段中NameLabel调用_updateOrderName 。 FoodChooserForm接收食物选择和订单名称的最新值，并通过this.setState保存。

FoodChooserForm also invokes a function that it was passed as props. In the constructor (where it receives all of its props), it saves a reference to props.submitHandler as the instance variable this.submitHandler. In the render method, it passes a reference to its _handleSubmit method to the form component.

FoodChooserForm还调用作为道具传递的函数。在构造函数(接收所有props的构造函数)中，它将对props.submitHandler的引用保存为实例变量this.submitHandler 。在render方法中，它将对_handleSubmit方法的引用传递给form组件。

When the form's submit event is triggered, _handleSubmit is called and the event information is passed to it. FoodChooserForm prevents the form from submitting (which would cause the page to reload). Then, it calls the submitHandler, passing it the current value of this.state. Finally, it resets value of its state, effectively resetting the form by blanking out the rendered values.

触发form的_handleSubmit事件时，将调用_handleSubmit并将事件信息传递给它。 FoodChooserForm阻止提交form (这将导致页面重新加载)。然后，它会调用submitHandler ，通过它的电流值this.state 。最后，它重置其state值，通过清除呈现的值来有效地重置表单。

And where does that new food order information now go? All the way to the top.

现在，新的食物订单信息将流向何处？一直到顶端。

PitMaster组件 (The PitMaster component)

PitMaster maintains a list of all food orders as part of its state, which it passes to the MonitorPanel. It provides FoodChooserForm with a list of food choices and a callback function to use whenever a new order has been placed. Its render method is refreshingly brief:

PitMaster维护所有食品订单清单作为其state一部分，并将其传递给MonitorPanel 。它为FoodChooserForm提供食物选择列表和回调函数，以便在下达新订单时使用。它的render方法非常简短：

It has private methods for adding and removing orders, as well as updating the list of temperatures. All other behaviours have been tucked away in other components.

它具有添加和删除订单以及更新温度列表的专用方法。所有其他行为已被隐藏在其他组件中。

结论 (Conclusion)

Learning React is no easy task, but it is easier once you see how the common patterns relate to JavaScript fundamentals. Functions transform your data into your UI. Small components should be composed into larger ones, and only a few of them should manage state. Stick to those guidelines and you’re well on your way to mastering React.

学习React不是一件容易的事，但是一旦您了解了通用模式与JavaScript基础之间的联系，它就会变得更加容易。函数将数据转换为UI。小组件应该组成更大的组件，并且只有少数几个组件可以管理状态。遵循这些指导方针，您就可以很好地掌握React。

My DigitalCrafts students are breathing a little easier as they bravely tackle yet another new topic in web development. They know that they can still use jQuery for smaller jobs, build a back-end with Postgres and Express for a server-rendered website, or make use of React for component-based single page apps. Most importantly, they’re able to take those fundamentals they have put many hours into, and apply them to whatever shiny new thing comes next.

我的DigitalCrafts学生大胆地呼吸，因为他们勇敢地解决了Web开发中的另一个新主题。他们知道，他们仍然可以使用jQuery来完成较小的任务，使用Postgres和Express构建后端以用于服务器渲染的网站，或者将React用于基于组件的单页面应用程序。最重要的是，他们能够吸收已经投入大量时间的那些基础知识，并将其应用于接下来出现的任何新事物。

Now, I wonder what they’ll ask me when we take on Redux next week…

现在，我想知道下周我们接受Redux时他们会问我什么……

翻译自: https://www.freecodecamp.org/news/how-to-build-a-dashboard-for-your-grill-using-arduino-and-react-425fb8d57ffe/