一个可以让你在React,体验Vue写法的轻量解决方案,觉得还好的可以讨论共建昂,本人很菜不对的地方可以指正
发布于 3 个月前 作者 zhusjfaker 1927 次浏览 来自 分享

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(导出成员)

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

WorkTogether

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

1 回复

如果有问题,请第一时间发邮件提issue ,如果用上觉得不错可以给个star ,谢谢各位老板,大佬了。

回到顶部