2

在 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功能的关键位来更新与直接用户输入无关的应用程序状态。如果 Halogen 具有类似的功能（我已经看到subscribe，虽然这似乎与父/子组件之间的通信有关，但我可能误解了这一点......）最好指出它。

4

1 回答 1

4

这是一个用卤素编写的反例，代码位于purescript-halogen-storybook 示例。

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

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

handleAction Initialize = loop

查看官方生命周期示例以了解如何使用initialize.

于 2019-06-11T04:09:39.827 回答