Достаточно грубый пример, но суть должен передать:
const updater = (component, prevState) => {
if (Object.keys(prevState).some(
key => prevState[key] !== component.state[key],
)) {
component.render();
if (component.componentDidUpdate) {
component.componentDidUpdate(prevState);
}
}
}
const domRender = (Component) => {
const component = new Component();
component.render();
if (component.componentDidMount) {
component.componentDidMount();
}
}
class Component {
constructor() {
this.updater = updater;
}
setState(newState) {
const prevState = this.state;
if (typeof newState === 'function') {
this.state = newState(prevState);
} else {
this.state = { ...prevState, ...newState };
}
this.updater(this, prevState);
}
}
class Example extends Component {
constructor() {
super();
this.state = {
value: 'Initial value',
}
}
componentDidMount() {
setTimeout(() => {
this.setState({ value: 'New value' });
}, 2000);
}
componentDidUpdate(prevState) {
console.log('Prev state: ', prevState);
console.log('New state: ', this.state);
}
render() {
const { value } = this.state;
document.querySelector('.example').innerHTML = value;
}
}
domRender(Example);
Демо