∅:D[
3.129] → [
4.2473:2605]
B:BD[
4.2473] → [
4.2473:2605]
B:BD[
4.2605] → [
2.1721:2052]
∅:D[
2.2052] → [
3.130:222]
B:BD[
4.2692] → [
3.130:222]
B:BD[
3.222] → [
2.2053:2185]
∅:D[
2.2185] → [
3.223:500]
B:BD[
4.2886] → [
3.223:500]
B:BD[
3.500] → [
2.2186:2240]
∅:D[
2.2240] → [
4.2886:2933]
∅:D[
3.500] → [
4.2886:2933]
B:BD[
4.2886] → [
4.2886:2933]
B:BD[
4.2998] → [
4.2998:3002]
B:BD[
4.3002] → [
3.501:805]
B:BD[
3.805] → [
2.2241:2312]
* constructor(args, props) // args - things that the component doesn't have to listen for changes. both are passed down from parent
* this.queuedEvents // used for onEvent listeners, to delay action until the next tick; perhaps this should interact with the global event queue?
* globalEventQueue.push(eventAction: (delta, prevProps, prevState, updaters) => void)
and then in the root component, every tick:
globalEventQueue.map((eventAction) => eventAction(
* this.state, this.setState // local state only accessible to this entity and its children.
* updateState(delta, props) { // component is given new props which should be stored; also edits this.state . typically looks like:
// OPEN QUESTION: props will be stale if updaters() gets called here?? queued events have race conditions?? what if update causes other components to need updates - is there a long dependency tree there?
if (!this.shouldUpdate()) { return } // this should be library code
updateSelf(); // update self state based on props
this.children.map((it) => it.update(...));
}
* render(delta, props) // pure, only accesses this.state. delta == ticksSinceLastRender is so common that we explicitly have a param for it. this would also be a good place to create new children if necessary. sample implementation: {
this.children.map((it) => it.render(...));
renderSelf();
}
* componentDidUpdate(props, updaters) { // sends state updates upwards
* PropsType = { delta: number, args: {...}, updaters: {...}, ...other stuff } // by convention, we include delta, args (immutable), updaters (immutable callbacks), since they're very useful
* constructor(props) // props is passed down from parent and is readonly. by convention renderSelf() is also called as the last part of the constructor. perhaps also didMount().
* this.state // data accessible only to this component and children. initialized in constructor; also oftentimes comes with a setState() callback to provide to children
* this.prevProps // is useful to store last tick's props
* onEvent(() => updaters.update(old => new)) // when hooking on event listeners, they call updaters.update() to send changes up to my own or parent state. the updaters callback is in charge of batching up updates. can access this.state and this.prevProps; can update this.state, but oftentimes it's more effective to batch it
* update(props) { // component is given new props which should be stored; also edits this.state . typically looks like:
updateSelf() // update our own state, making use of props.delta
this.children.map(it => it.update(childProps)) // update our children, who then render themselves
renderSelf(props)
* renderSelf(props) // pure, only accesses this.state. note that delta is available as props here as well.
* componentDidUpdate(props, updaters) { // after rendering, sends state updates upwards; batcher will delay them until next tick