Last active
August 29, 2015 14:13
-
-
Save ken-okabe/f5afabfe7a7c3a330ac2 to your computer and use it in GitHub Desktop.
#FRPで無限ループ while(true)を実現する方法 facebook React + Immutable
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
#FRPで無限ループ while(true)を実現する方法 facebook React + Immutable | |
###while(true) | |
```js | |
var i =0; | |
while(true) | |
{ | |
console.log(i++); | |
} | |
``` | |
##FRPと無限ループ | |
FRPは宣言型プログラミングなので、 | |
ループというフローの概念がありません。 | |
再帰関数でループをエミュレートする発想もありません。 | |
しかし(パフォーマンス重視でなく) | |
あくまでFRPでイミュータブルにやりたいときは、 | |
任意のImmutableJSの無限数列をFRP時間軸にマップして、 | |
時間発展する形式で表現できます。 | |
###facebook-immutable + ConceptualFRP | |
```js | |
var _ = require('immutable'); | |
var __ = require('spacetimeline'); | |
var _natural = _.Range(); //natural numbers (inifinite sequence) | |
var it = _natural.values(); //iterator of the sequence | |
var __t = __(); //timeline infinite sequence | |
var f = function() | |
{ | |
var dummy = __t.appear(it.next().value); //iterator next | |
}; | |
var timer = setInterval(f, 0); // tick 0 | |
var dummy = __t.compute(console.log); //bind logic and hardware | |
``` | |
----- | |
###facebook-immutable + react | |
```html | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/immutable/3.4.1/immutable.min.js"></script> | |
<!-- The core React library --> | |
<script src="http://fb.me/react-0.12.1.js"></script> | |
<!-- In-browser JSX transformer, remove when pre-compiling JSX. --> | |
<script src="http://fb.me/JSXTransformer-0.12.1.js"></script> | |
<script type="text/jsx" src="index.js"></script> | |
``` | |
```js | |
var _natural = Immutable.Range();//natural numbers (inifinite sequence) | |
var it = _natural.values(); //iterator of the sequence | |
var Timer = React.createClass({ | |
getInitialState: function() { | |
return {tickValue: it.next().value}; //iterator next | |
}, | |
tick: function() { | |
this.setState({tickValue: it.next().value}); //iterator next | |
}, | |
componentDidMount: function() { | |
this.interval = setInterval(this.tick, 0);// tick 0 | |
}, | |
componentWillUnmount: function() { | |
clearInterval(this.interval); | |
}, | |
render: function() { | |
return ( | |
<div>Value: {this.state.tickValue}</div> | |
); | |
} | |
}); | |
React.render(<Timer />, document.body); //bind logic and hardware | |
``` |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment