反应模型

Question

反应式视图组件（React，Angular，Vue等）通过消除使视图与道具/状态保持最新的需求，彻底改变了界面编程。但是据我所知，还没有实现/普及类似的Model模式（如果Redux解决了这个问题，我还不清楚如何使用类来实现）。

（在许多应用程序中）我遇到的主要问题是涉及某种约束。在创建，更新，父项更新或同级项更新时，需要约束某些子项/相关模型。

可以执行以下操作（只是将它们迅速放在一起进行说明），但这在规模上不是很有效，因为它不是选择性的（即，React只释放更改的组件）。

是否有这种数据结构的实现，还是我必须自己介绍一下？

class ReactiveModel {
  setState(newState) {
    this.state = newState;

    this.updateChildren();
  }

  setProps(newProps) {
    this.props = newProps;

    this.updateChildren();
  }

  updateChildren() {
    var childrenSpecification = this.renderChildren();

    //for each child
      //create a new instance if one doesn't exist
      //update props if any need to be updated
        //updating props or state on a child triggers updateChildren on it so updating bubbles down
  }
}

class Box extends ReactiveModel {
  constructor(props) {
    super(props);

    this.state = {
      boxObjects: this.props.boxObjectsFromApi //just plain data - "Object" instances, not "Box" instances
    }
  }

  addBox(boxObject) {
    this.setState({boxObjects: [...this.state.boxObjects, boxObject]}); //should call updateChildren
  }

  renderChildren() {
    return {
      boxes: this.state.boxObjects.map(({width}) => {
        return {
          class: Box,
          props: {
            width: Math.min(this.props.width, width) //constrain child width to be inside parent width
          }
        };
      }
    }
  }
}