npm地址：https://www.npmjs.com/package/automatic-react github地址：https://github.com/zhusjfaker/automatic-react#readme

automatic-react

简介

一组装饰器可以将你的 react | react-hooks | react-context 应用 改造为 响应式应用, 类似 vue | vue-composition | vuex 的开发模式

Export Member（导出成员）

• automatic-react -> (将react setState 作为render的操作移除，转而直接修改 proxystate上的属性直接触发渲染。)

• [decorator @ProxyState && @ProxyComponent](https://github.com/zhusjfaker/React-Reactive-Proxy-State/wiki/ProxyState-&&-ProxyComponent)

• function rxhook

• HocClassComponent ContextProvider && Decorator consumer && type UnPackReactContext

• HocClassComponent ReactiveProvider

Counter example

import React, { useEffect } from 'react'
import { rxhook } from 'automatic-react';


export const ProxyCounter: React.FC<any> = _props => {

  const state = rxhook({ count: 123, double: 0 });

  useEffect(() => {
    state.double = state.count * 2
  }, [state.count]);

  return (
    <div>
      <div>{state.count}</div>
      <div>{state.double}</div>
      <button
        onClick={() => {
          state.count = state.count + 1;
        }}
      >
        add count
      </button>
    </div>
  )
}

import React from "react";
import { ProxyComponent } from "automatic-react";

type IProxyState = {
  count: number;
};

[@ProxyComponent](/user/ProxyComponent)()
export class ProxyCounter extends React.Component<
  {},
  { proxystate: IProxyState }
> {
  constructor(props: Readonly<{}>) {
    super(props);
  }

  proxystate: IProxyState = {
    count: 0,
  };

  render() {
    return (
      <div>
        <div>Own component is valid</div>
        <div>{this.state.proxystate.count}</div>
        <button
          onClick={() => {
            this.proxystate.count = this.proxystate.count + 1;
          }}
        >
          {" "}
          add count{" "}
        </button>
        <ProxyCounterChild proxyprop={this.proxystate} />
      </div>
    );
  }
}

import React from "react";
import {
  consumer,
  UnPackReactContext,
  ReactiveProvider,
} from "automatic-react";

export const context = React.createContext({ proxystate: { count: 0 } });

type IProxyState = {
  count: number;
};

export class Demo extends React.Component<{}, { proxystate: IProxyState }> {
  state = {
    proxystate: {
      count: 1,
    },
  };

  render() {
    return (
      <ReactiveProvider context={context} initialidata={this.state}>
        <ReactiveCounter />
      </ReactiveProvider>
    );
  }
}

@consumer(context)
export class ReactiveCounter extends React.Component<
  UnPackReactContext<typeof context>
> {
  render() {
    return (
      <div>
        <div>{this.props.proxystate!.count}</div>
        <button
          onClick={() => {
            this.props.proxystate!.count = this.props.proxystate!.count + 1;
          }}
        >
          add count
        </button>
      </div>
    );
  }
}

ContactInformation

• Email 439453290@qq.com
• Email zhushijie.jayson@bytedance.com

WorkTogether

项目开发的比较快，可能还有很多的地方需要细化。如果喜欢Vue，但同时又必须要写React的小伙伴，喜欢这个比较‘轻量级’的解决方案，可以联系我，共同把 ‘automatic-react’ 进行完善。联系地址请看上方的‘联系方式’中的邮箱地址