React中的高阶FRP - 为什么没有发生？

Question

Redux是一种一阶FRP，就像Elm曾经一样。

然而，似乎高阶FRP并没有真正与React一起使用。

为什么一阶FRP在React中很有用，而高阶不那么有用呢？

也许React不需要高阶主义？因此，可以保留时间旅行调试器？

换句话说：

React是一个函数，它接收状态并返回视图。

FRP是声明和执行状态机的一种方式。

这些是正交的问题，所以为什么不将它们结合起来呢？

编辑：

如果我比较这个https://github.com/ochrons/diode/tree/master/examples/todomvc/src/main/scala/example

使用这个https://github.com/lihaoyi/workbench-example-app/blob/todomvc/src/main/scala/example/ScalaJSExample.scala，似乎同一个应用程序使用scala.rx的代码行数只有Diode（类似Redux的单向数据流库）的一半。

编辑2：

我的猜测是，为什么不会发生这种情况的原因是，大多数高阶FRP爱好者（希望在Web开发中使用高阶FRP）使用reflex-frp，并且他们使用reflex-dom而不是react。可能reflex-dom使react变得不必要。

- jhegedus

---

即使是 ELM（一阶 FRP）也停止使用 FRP 了：http://elm-lang.org/blog/farewell-to-frp，因为它太难学了。这会是原因吗？人们只是不喜欢 FRP，因为它不熟悉吗？ - jhegedus

似乎发生了一些问题，但不是在React中，而是在Cycle中。 - jhegedus

嗯，我认为React并不真正涉及FRP。React只是一个渲染库，而FRP是描述状态机的一种方式。这是两个正交的问题。 - jhegedus

顺便说一下，在React中，子组件的呈现和初始化样式在render()方法中同时进行，导致了整个FP热潮。我编写了一个简单的包装器，使得可以使用引用而不是<ChildComponent prop1={val}/>。老派的MVC更好。Redux的开发者们让所有的FP热潮变得更加复杂。我们需要架构而不是框架。 - Brian Cannard

对于 cycle.js 的评论加一。虽然我同意所有这些框架都依赖于已经存在一段时间的范例和架构，但将其整合到现代实现中需要时间。对我来说，cycle.js 处于超轻量级和易于接近之间的甜点位置。它从 Haskell 基于流的 I/O 中获得了很多影响。https://cycle.js.org/dialogue.html - Matthew Brent

Answer 1

编辑：我认为React和Higher Order FRP概念的一个大挑战是，在React组件内处理状态会让用户接触到与HO FRP无关的语言概念。在我看来，这也是更广泛的ES6 JS问题。我不是这个主题的专家，但我想分享一下我的FRP之旅的思考和经验。

很多React组件的功能和组合都依赖于JS class 语法。对我来说，这是一个挑战，因为你混淆了术语和概念。对于很多前端开发人员（包括我自己），React是他们第一次接触FRP范例的经历。当你一直看着classes和constructors的OOP继承术语时，很难理解函数组合的重要性。我认为这就解释了为什么我们看到了React库的爆炸式增长，而没有看到底层的范例，因为有一整套相互对比的术语。它变成了更多的组件和基于DOM的视图，而不是FRP 阅读这篇简洁的文章。

React隐藏了许多基础概念，对于许多奉行FRP范例的程序员来说，他们不喜欢这种神奇感觉，这意味着新手很容易只使用“class”接口来创建他们的组件，并且不会接触到许多基础FRP范例。

在我看来，当处理状态时，React本质上应该是只读的。将其视为只读，React和Redux就变得正交了。Redux更倾向于FRP概念，实际上当以这种方式使用时，它变得更具声明性。

const mapStateToProps = (state, ownProps) => {
  return {
    id: ownProps.id,
    someData: state.projects.someData,
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    onSubmitForm(data) { //our callback
      dispatch( //redux dispatch function
        someAction(data) //our Redux Action Creator
      )
    }
  }
}

export default connect(mapStateToProps,mapDispatchToProps)(PresentationComponent)

在我们的展示组件中

const PresentationComponent = ({onSubmitForm, id}) => {
    return <form id="someForm" onSubmit={(e) => {
        e.preventDefault()
        onSubmitForm(getFormData(id))
    }}>
}

通过使用 Redux 的 HO 函数 connect(), mapStateToProps() 和 mapDispatchToProps()，它允许使用纯函数组件，这些组件只需要将状态和方法作为参数传入。这些方法本质上可以返回任何内容。这无疑传达了更加纯粹的 Higher/First Order 和 FRP 概念。

然而，我认为未来我们会看到越来越多的 FRP 应用和库开发，但我认为重要的是我们不要舍弃过去所学。

在 Dan Abramov 关于 Redux 的实用 文章 中，他提醒我们不必总是坚持一种工具并固执于一种范式，我并不反对 OOP，在生产中我经常使用工厂和面向对象的概念，我只是认为在同一呼吸中使用 OOP 的术语然后开始谈论 FRP 会有点令人困惑。

值得关注的东西

正如评论中所提到的，cycle.js 绝对值得一看。它在 React 的声明式和可重用组件结构之间取得了良好的平衡，并混合了 RxJS 中数据流和可观察对象等概念的优点。

这是我的个人意见，我很想听听其他人是否有其他建议？

- Matthew Brent

---

{btsdaf} - jhegedus

{btsdaf} - jhegedus

@jhegedus 我已经重写了我的答案，之前的不是特别清晰，希望这次能有所帮助？ - Matthew Brent

Answer 2

正在发生，就在这里。我编写了一个超级简单的实验性“Web框架”，它结合了Sodium FRP，React和Scala.js。

我喜欢它。我编写代码，编译它，然后它就可以工作。非常具有实验性的技术，尖端的FP stuff。它是真正的交易。没有妥协的FRP。

- jhegedus