响应式 REACT 工具

q-reactive-react 主要赋予了 react 能响应式更新的功能。

响应式更新包括两个部分：

1. 数据发生了改变，组件能够自动更新，而不需要手动 setState
2. 数据发生了改变，组件不需要全部更新，只更新和数据相关的组件。

如此一来:

1. 开发可以更加专注于逻辑层。
2. 即使一个组件很大，你也不用担心重新渲染带来的额外消耗，所有的组件都能够知道自己什么时候能更新。性能更好。

事实上，它比你想象的更强大， 它可以定位到最细粒度的组件更新，

一个例子

这里我会通过一个例子来介绍响应式工具的使用：

import React, { Component } from 'react';
import { H, HComponent, Model, Ref, State, Prop, Watch } from 'q-reactive-react';

@HComponent()
export class Test extends Component {
  @State() count = 1;

  @State() input = 'ss';

  @Prop() name;

  @Watch('count')
  onCountChange(newValue: number, oldValue: number) {
    //...
  }

  ref = React.createRef<any>();

  inputRef = React.createRef<any>();

  componentDidMount() {
    console.log(this.ref, this.inputRef);
  }

  render() {
    return (
      <div>
        <div
          {...Ref(() => this.ref)}
          onClick={() => {
            this.count++;
          }}
        >
          {H(() => this.count)}
          {this.name}
        </div>
        <div>
          {H(() => this.input)}
          <input {...Ref(() => this.inputRef)} {...Model(() => this.input)} />
        </div>
      </div>
    );
  }
}