Closed sc0ttj closed 3 years ago
Would be nice to find some good redux
or useState
alternatives, that can play nice with the above patterns and be added as a module to the Component codebase:
useState
-like patterns:
redux
-like patterns:
Ideally, I'd also like something simpler than the above - a fromState
method that simply works like so:
// a stateful component using "fromState()"
const Foo = props => {
const { title, count } = fromState();
return `<div>...</div>`;
}
// ...or a stateful component using initial state: "fromState([ ...initial values ])"
const Foo = props => {
const { title, count } = fromState([ "initial text", 0 ]);
return `<div>...</div>`;
}
And fromState()
would basically do this:
// return initial state, or latest state (with props any merged in)
fromState(initial) {
this.state = { ...this.state, ...props };
return { ...initial, ...this.state };
}
..as far as I understand it, the above pattern should work because:
props
received by the component will be known to fromState
without having to pass it inthis
keyword in the fromState
function will refer to the component in which it's called, as long as:
fromState
is not an arrow function ...I need to test that theory...
DONE, #29 was merged
Refactor the code so the DOM diffing is done by an import-able module called
render
(instead ofdomDiff
).This will have various benefits:
So, users will be able to do something like this:
Either way, you would (re)render the above components to the page with new data, like so:
...or call render() outside your components:
The benefits of using only
render
would be:domDiff
(soon to berender
) is only ~800 byteshtmel
(can be used alongside) is also only ~800 bytes..that's only 1.6kb total for components with a state, JSX-like templating, Event handling, and DOM diffing - all with a more "React-like" API and no build tools needed.