使用 React 构建一个计数器应用程序

计数器是初学者开发人员（像我）在学习新框架时首先要做的事情之一。并且有充分的理由。这是引入初始化、设置和更新状态以及事件处理程序等概念的简单方法。由于它的简单性，它也可以用来学习更高级的概念。在这里，我使用了一个计数器应用程序来学习如何正确地实现一个自定义钩子，以及一个 reducer。这是否意味着计数器加倍？是的，它确实。但不要害怕，因为我找到了一个故事来配合每个柜台，让他们更好看。让我们进入如何。

第一步：弄清楚该做什么

我要做的第一件事就是弄清楚如何编写一个 reducer 和一个自定义钩子。React 中的 Reducers 通过调度操作来更新状态。不是通过设置状态告诉 React “做什么”，而是通过从事件处理程序中分派“动作”来指定“用户刚刚做了什么”。这些“动作”作为对象传递到调度中。我为四种状态更改编写了操作和调度：计数增加时、计数减少时、重置时以及用户使用提供的文本框设置自定义值时。对于自定义挂钩，我编写了一个返回对象的函数，该对象的属性包含状态、增加、减少、重置和设置计数的函数。

第二步：线框图

虽然这可能不是技术术语，但这是我使用的词。现在我有了我的 reducer 和自定义挂钩，我现在必须使用事件处理程序将它连接到应用程序。在这种情况下，所有处理程序都将监听点击事件。对于 reducer，这有点简单，只需将正确的调度调用插入正确的事件处理程序即可。自定义挂钩更具挑战性，因为与分派不同，我仍在自定义挂钩内设置状态，尤其是增加和减少动作。必须将其正确写入自定义挂钩中才能使其正常工作。完成后，我只需将正确的对象属性插入正确的事件处理程序。然后我使用 React Router 通过添加一个按钮来在柜台之间导航，当你在一个柜台上时，该按钮指向另一个柜台。这样，我就完成了线框图。

第三步：造型

不好看的话申请也没意义。为了设置应用程序的样式，我使用Google Fonts作为自定义字体，使用Happy Hues作为颜色。一旦我选择了满意的字体和颜色，我就开始考虑可以使用计数器做什么。我决定使用追踪器。一个计数器跟踪您喝了多少水（以杯子计），另一个计数器跟踪您一天吃了几顿饭。最后，我对最终结果很满意。

第四步：托管

如果没有其他人可以使用它，那么制作应用程序就没有意义。因此，弄清楚如何托管它至关重要。我决定使用 Netlify 来托管这个应用程序。原因有很多，但主要原因是这是我能理解的最简单的托管选项。它还允许从 GitHub 进行持续部署，这意味着我可以更改代码，并在网站上实时更新（真正的意思是将更改推送到存储库时）。

问题

我在做这件事时遇到的一个主要问题涉及用户直接将值设置到计数器的功能。该设置按预期工作，但它被设置为字符串而不是数字，因此任何增加数字的尝试都会在状态中现有数字的末尾添加“1”。我为这个问题苦苦挣扎了几个小时，仔细研究了我写的每一行，试图找到这个错误。当我最终发现错误时（setValue 将数字设置为字符串而不是数字），我添加了一个 parseInt 函数，它将接收到的输入转换为数字，并且该错误已修复。

结论

这个项目作为一个教育机会非常有用。它让我了解了 reducer 和自定义钩子，知道它们是如何工作的，以及可以使用它们的情况。

本站声明：
1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；

2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；

3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；

4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；

5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。