@aotoo/aotoo v6.2.5

AOTOO

一个react的封装库，将react组件封装成JS对象。

GITHUB源码 中文文档

LOG

2021.5.25 支持react native(需要aotoo-hub环境)，或者在全局中加入以下变量

import aotoo, {lib} from "@aotoo/aotoo"
import { 
  Text, 
  View, 
  PanResponder,
  TouchableHighlight,
  TouchableOpacity,
  TouchableWithoutFeedback,
  Animated,
  Easing,
  Button,
  Image,
  FlatList
} from 'react-native';
const {useRef, useEffect, useState} = React
const context = lib.curContext()
context.aotoo = aotoo
context.Text = Text
context.View = View
context.Image = Image
context.Button = Button
context.useRef = useRef
context.useEffect = useEffect
context.useState = useState
context.globalRNelements = {
  lib,
  PanResponder,
  TouchableHighlight,
  TouchableOpacity,
  Animated,
  Easing,
  TouchableWithoutFeedback,
  Button,
  FlatList
}

其他相关类库

@aotoo/react-cell: 一套标准的容器组件，方便自定义各种表单组件 @aotoo/react-pager: 基于react, aotoo的前端路由(仿小程序)，可支持SEO
@aotoo/aotoo-koa-server: 基于aotoo的server端类库，融合到aotoo-hub中使用，不支持独立使用
aotoo-cli: 命令行工具，用于安装完整的大前端环境，包括编译，输出，部署等等

INSTALL AOTOO

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

DEMO 1

封装REACT组件的计数器

封装react原生组件，并曝露api方法以方便外部修改组件状态
下例是一个简单的计数器组件，为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'))

DEMO 2

配置化计数器组件

封装配置，并生成js对象及曝露该对象的api方法
参考微信小程序组件的设计，使用配置化生成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: {
    count: 0
  },
  increase() {
    let count = this.getData().count;
    count++;
    this.setData({ count });
  }
};

let count = createComponent(countConfig, countTemplate);

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

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

WRAP

封装JSX输出真实dom，有些场景调用第三方库需要作用于真实dom

import createComponent from '@aotoo/aotoo'

let jsx = createComponent((
  <div>
    <span>文本内容</span>
  <div>
), function(dom){
  $(dom).on('click', clickHandle)
  return function(){
    $dom.off('click', clickHandle)
  }
})

ReactDOM.render(jsx, document.getElementById('root'))

生命周期

组件的生命周期，指的是组件自身的一些函数，这些函数在特殊的时间点或遇到一些特殊的框架事件时被自动触发。其中，最重要的生命周期是 created attached detached ，包含一个组件实例生命流程的最主要时间点。生命周期的设计参考微信小程序

import createComponent, {$$} from '@aotoo/aotoo';
createComponent({
  created: function(){
    // 在组件实例刚刚被创建时执行
  },
  attached: function() {
    // 在组件实例进入页面节点树时执行
  },
  ready: function(){
    // 在组件在视图层布局完成后执行
  },
  didUpdate: function(){
    // 在组件挂载后，每一次更新后会调用
  },
  detached: function() {
    // 在组件实例被从页面节点树移除时执行
  },
},
template
)

通用属性

通用API

内置组件

item

引入@aotoo/aotoo后，会生成全局变量ui_item和全局方法组件UI_item, item组件将会生成一个div的html结构

ui_item

配置化生成item组件

import '@aotoo/aotoo'

const itemConfig = {
  title: '标题',
  onClick: 'changeTitle?title=新的标题',
  changeTitle(e, param, inst){
    inst.update({
   title: param.title
 })
  }
}

const item = ui_item(itemConfig)

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

UI_item

通过React方法组件

import '@aotoo/aotoo'

function changeTitle(e){
  this.update({
    title: '新的标题'
  })
}

const JSX = <UI_item title='标题' onClick={changeTitle}/>

item属性

item API 方法

list

引入@aotoo/aotoo后，会生成全局变量ui_list和全局方法组件UI_list, list组件将会生成一组div的html结构(基于item组件)

ui_list

配置生成list组件

const listConfig = {
  data: [
    {title: 'JACK', onClick: 'onItemClick?user=jack'},
    {title: 'ROSE', onClick: 'onItemClick?user=rose'}
  ],
  listClass: 'list-class',
  onItemClick(e, param, inst){
    if (param.user === 'jack') {
      this.update({
        'data[0].title': 'JACK LOVE ROSE'
      })
    }
  }
}

const list = ui_list(listConfig)  

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

UI_list

通过React方法组件

import {$$} '@aotoo/aotoo'

function itemClick(e, param, inst){
  if (param.user === 'jack') {
    this.update({
      'data[0].title': 'JAKE LOVE ROSE'
    })
  }
}

const listData = [
  {title: 'JACK', onClick: 'onItemClick?user=jack'},
  {title: 'ROSE'}
]

const JSX = <UI_list
  $$id='mylist'
  data={listData}
  onItemClick={itemClick}
/>

setTimeout(() => {
  $$('#mylist').update({
    'data[1].title': 'ROSE LOVE JACK TOO'
  })
}, 4000);

ReactDOM.render(JSX, document.getElementById('root'))

list配置参数

list API 方法

tree

tree组件是list组件的超集，通过扁平数据输出层次性的HTML结构，可支持多层次数据

const listConfig = {
  data: [
    {title: '广东省', idf: 'gd'},
    {title: '广州市', parent: 'gd', idf: 'gz'},
      {title: '天河区', parent: 'gd', parent: 'gz'},
      {title: '白云区', parent: 'gd', parent: 'gz'},
      {title: '越秀区', parent: 'gd', parent: 'gz'},
    {title: '深圳市', parent: 'gd'},
    {title: '东莞市', parent: 'gd'},

 {title: '湖南省', idf: 'hn'},
 {title: '长沙市', parent: 'hn'},
 {title: '衡阳市', parent: 'hn'},
  ],
  mode: 'tree'
}

const tree = ui_list(listConfig)  

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

空格不是必须的，为展现数据层次

关注我们，后续完善文档