Question

在类似React的东西中给出一个非常简单的增量组件：

class Increment extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      value: props.value
    }
  }

  componentDidMount() {
    setInterval(() => {
      this.setState(({ value }) => ({ value: value + 1 }))
    }, 1000);
  }

  render(){
    return (
      <p>{ this.state.value }</p>
    );
  }
}


ReactDOM.render(<Increment value={0} />, document.getElementById('root'))

这如何转换为Purescript的卤素？在网上浏览各种东西时，我还没有找到可以用于自己的原型的任何示例。我知道Effect.Time公开了setInterval，但是我将如何使用它来触发一些让我更新状态的东西（通过受控的动作，通过handleAction）。

我正在尝试将应用程序从Elm移到Halogen，在该应用程序中，它依赖于subscriptions函数的关键功能来更新与Direct不相关的应用程序状态用户输入。如果Halogen具有类似的功能（我看过subscribe，尽管这似乎与父/子组件之间的通信有关，尽管我可能对此有误解...），将其指向是很好的

Answer 1

这是一个用卤素写的counter示例，代码在purescript-halogen-storybook example。

要使其自动递增，可以在初始化处理程序中添加一个自循环函数。

loop = 
  H.liftAff $ Aff.delay $ Aff.Milliseconds 1000.0
  H.modify_ \s -> s { value = s.value + 1 }
  loop

handleAction Initialize = loop

查看官方lifecycle示例以了解如何使用initialize。

如何在Purescript Halogen中实现类似自动递增计数器的功能

1 个答案: