把react组件封装成JS对象

aotoo

aotoo是一个react的封装库，将react组件js实例化

在一些小型的项目，不需要引入redux等状态库，使用ao2封装原生react组件(自定义)生成JS对象，通过定义内部的属性和方法，来更新状态

GITHUB源码

INSTALL

yarn add @aotoo/aotoo
#
npm install @aotoo/aotoo

USAGE 1 计数器

下例是一个简单的计数器组件，为react原生组件添加了属性和api方法，其中api暴露给外部使用，如下例中的button按钮通过暴露的increase方法设置组件计数

Demo: https://codesandbox.io/s/aotoo6jishuqi-dv1uf

import createComponent from '@aotoo/aotoo'

class Count extends React.Component {
   
  render() {
   
    return (
      <div className="container" onClick={
   this.env.increase}>
        {
   this.state.count || 0}
      </div>
    );
  }
}

const countInstance = createComponent(Count, {
   
  data: {
     // 将转化成react组件的state
    count: 0,
  },
  increase(e) {
   
    let count = this.getData().count;
    count++;
    this.setData({
    count });
  }
});

function Container() {
   
  return (
    <>
      <countInstance.UI />
      <button onClick={
   countInstance.increase}>计数器</button>
    </>
  );
}

ReactDOM.render(<Container />, document.getElementById('root'))

USAGE 2 配置化计数器组件

参考微信小程序组件的设计，使用配置化生成react组件，并对外曝露相关api方法

Demo: https://codesandbox.io/s/aotoo6jishuqi-forked-vh8n2

import createComponent from '@aotoo/aotoo'

const countTemplate = function (state, props) {
   
  return <div className={
   "container"}>{
   state.count}</div>;
};

const countConfig = {
   
  data: {
   
    co