Javascript 简单递增式中的避免状态

我试图用JavaScript函数编程技术来避免状态。我掌握了很多基本的fp技术，如闭包、咖喱等。但我不能在处理国家问题上绞尽脑汁

我想知道创建功能程序的人如何实现以下非常简单的应用程序：

用户单击浏览器中的按钮（jQuery实现很好）。每次用户单击按钮时，屏幕上的值应增加1

---

我们如何在不改变状态的情况下做到这一点？如果需要改变状态，从功能角度来看，什么是最好的方法？

正如您所看到的，非fp模式下的计数器只是有状态的。 它保存状态，以便可以根据其api相应地增加或减少状态

constcreatecounter=（）=>{
设值=0；
返回{
获取值（）{
返回值；
},
增量（）{
值=值+1；
},
减量{
值=值-1；
},
};
};
常量计数器=createCounter（）；
console.log（'初始值'，计数器值）；
counter.increment（）；
counter.increment（）；
console.log（'两次增量后的值'，counter.value）；
计数器。减量（）；
console.log（'一次减量后的值'，counter.value）以下是如何实现一个简单的计数器应用程序，而不改变除DOM之外的任何东西


const h1=document.querySelector（“h1”）；
常量[减量、复位、增量]=document.queryselectoral（“按钮”）；
const render=count=>{
h1.innerHTML=count；//输出
decrement.onclick=event=>render（count-1）；//-+
reset.onclick=event=>render（0）；/|--转换函数
increment.onclick=event=>render（计数+1）；//-+
};
渲染（0）；
//     ^
//     |
//+--初始状态

-
重置
+
函数方法不是避免状态，而是使状态显式。在某种抽象层次上，我们甚至无法做到这一点，因为DOM是可变的，用户交互是有状态的。我知道DOM是可变的，更新DOM需要一个有副作用的函数。所以这里肯定有一些取舍。在这种情况下，您将如何使状态显式？看看Hm，虽然在调用堆栈中存储状态在技术上是正确的，但您没有提到DOM部分，即如何将这种方法与DOM连接起来。我同意这个答案，如果它清楚地显示了状态应该如何更新，那么不提及DOM方面。不过，我不知道你所说的“让消费者提供国家”是什么意思。我也不知道这个值在哪里继续递增。它可以从0变为2，但这不会将它从2变为4。您的DOM示例不起作用，因为您的存储不纯净。你能让你的例子在不改变商店状态的情况下工作吗？提示，这是可能的，并且生成的代码更简洁。不太确定你所说的存储不纯净是什么意思，真正需要纯净的是你的减缩函数。。。根据定义，存储是有状态的，您可以看看它是如何实现的。Redux是一个糟糕的例子。它不必要地通过操作、减缩器和调度使事情复杂化。考虑一下你的例子。当用户按下
inc
按钮时，调用
IncBtn
函数，该函数向减速机发送一个操作，减速机将递增的值返回到存储，存储更新其内部状态。之后，您必须手动调用
值
函数来呈现更新的状态。这会导致代码膨胀。您可以在68行代码中完成，我可以使用递归在19行代码中完成。到处都是让维护变得困难的东西。我喜欢这个解决方案和对摩尔机器的参考。render（）函数也让人想起React so cool解决方案。虽然这个解决方案在技术上并没有改变逻辑中的状态，但它仍然依赖于存储在DOM中的状态。这不一定是一件可怕的事情，但这是理想的吗？表面上的反应并不是肤浅的。React基本上模拟了一台摩尔机器，尽管它因副作用而变形。我不是React的超级粉丝。Facebook的想法是正确的，但他们把实现搞砸了。React比jQuery更具功能性，但它不是真正的功能性。即使是React钩子也没有真正的功能。如果你想要一个真正的功能框架来创建web应用程序，那么看看Elm。@AaditMShah从技术上讲，状态存储在一个可变范围内，该范围由存储在DOM中的函数关闭，但您无法真正避免这种情况，而且在我看来，这种封装实际上比在全局范围内存储状态要好。但是，导入部分是不从可变DOM读取任何状态。@如果使用事件委派，则在每次渲染时甚至不必重新分配事件侦听器。这里有一个例子。现在，您只有一个事件侦听器，并且在每次渲染时更新DOM对象的一个属性，这比添加事件侦听器快得多。@scriptum将事件委派移动到答案的末尾，并添加了一个解释，说明为什么这样做更好。