API

静态方法

  1. aotoo {function}
    aotoo的核心方法

  2. aotoo.render
    对 ReactDom.render的封装,更简单的使用,在node端,返回解析JSX的字符串,支持同构组件

  3. aotoo.html
    只能使用在node端,解析JSX并返回pure html,不支持同构组件

  4. aotoo.plugins {function}
    插件方法,生成aotoo的插件

  5. aotoo.wrap {function} 
    包裹JSX或者React Class,后面讲

  6. aotoo.wrapEx {function}
    交互扩展方法

实例方法

  1. dispatch
    不推荐使用
  2. hasMounted
    组件是否已经挂载
  3. on
    hook, 挂载一个触发器方法
  4. off
    hook, 删除一个挂载器方法
  5. emit hook, 执行某个挂载器方法集
  6. render
    返回jsx或者输出结构
  7. extend
    为aotoo组件实例扩展方法
  8. setConfig
    设置aotoo的基础配置
  9. setProps 设置aotoo组件的props
  10. getState 获取aotoo组件的state

实例属性

  1. x
    react组件类
  2. config
    aotoo组件配置
  3. rendered
    dom绑定后的回调方法

Other Api

以下API转自lodash,具体文档请参考lodash

  • Aotoo.find
  • Aotoo.findIndex
  • Aotoo.cloneDeep
  • Aotoo.filter
  • Aotoo.merge
  • Aotoo.uniqueid
  • Aotoo.isPlainObject

使用示例

aotoo

将react组建封装成带状态控制的aotoo组件。

Demo:
Edit simple_component
第一次访问需要翻墙,因为codesandbox有相关google的广告内容

// 例1  生成aotoo的实例
class Test extends Component{
    state = {message: 'hello world'},
    render(){
        return <span>{this.state.message}</span>
    }
}

const Actions = {
    CHANGE: function(ostate, opts){
        let state = this.curState
        state.message = opts.message
        return state
    }
}

const Instance = Aotoo(Test, Actions, {props: {...}})

Instance.$change({message: 'aotoo'})

render

对 React.render的封装,更简单的使用,在node端,返回解析JSX的字符串,支持同构组件

// 接例1

const xxx = Instance.render()   // xxx是JSX

Instance.render('id')   // 将Instance渲染到页面中DOM中

Aotoo.render(Instance.render(), 'id')     // 前端,将Instance渲染到页面中DOM中
Aotoo.render(Instance.render())           // NODE端,Instance的jsx的React html字符串
Aotoo.html(Instance.render())             // NODE端,Instance的jsx的pure html字符串

Aotoo.render(<Instance />, 'id')          // 前端,将Instance渲染到页面中DOM中
Aotoo.render(<Instance />)                // NODE端,Instance的jsx的React html字符串
Aotoo.html(<Instance />)                  // NODE端,Instance的jsx的pure html字符串

html

只能使用在node端,解析JSX并返回pure html,不支持同构组件,参考render

plugins

插件方法,生成aotoo的插件,aotoo的插件可以直接使用在React组件内部

给aotoo开发一个插件

function $list(props, isreact){
  const List = require('./listview')
  if (!props) return List
  return <List {...props} />
}
Aotoo.plugins('list', $list)   // 生成插件

插件的使用方式,组件内部使用

class Test extends Component{
    state = {data: this.props.data||[]},
    render(){
        return this.list({data: this.state.data})   // 使用list插件
    }
}
const Actions = { ... }
Aotoo(Test, Actions)

插件的使用方式,组件外部使用

const mockData = [1, 2, 3, 4]
const demoJsx = Aotoo.list({data: mockData})

wrap

包裹JSX在componentDidMount后执行绑定的方法

Demo:
Edit aotoo-wrap
第一次访问需要翻墙,因为codesandbox有相关google的广告内容

包裹JSX

const demoJsx = <span>demo</span>
const Demo = Aotoo.wrap(demoJsx, function(dom){
    // dom 指向demojsx的 html DOM
    const text = $(dom).text()
    alert(text)
})

Aotoo.render(<Demo />, 'id')

wrapEx

开发针对JSX的交互插件,扩展wrap的方法,自定义wrap方法

Aotoo.wrapEx('interactive Name', function(container, options, utile){
    /* do some thing*/
})

// 后面会有专门的章节详述wrapEx的使用

aotoo-mixins-scroll是通过wrapEx扩展出来的交互方法,该方法绑定scroll事件,并提供了一些API方法,用于开发JSX的交互动画

import 'aotoo-mixins-scroll'  
Aotoo.scroll(jsx, {
    container: window,             // 指定容器,不指定此参数,将使用jsx作为容器
    onscroll: function(pos){},    // 绑定容器滚动scroll事件,并实时返回位置信息
    oninrange: function(dom){},    // 在容器的可视区域,对指定的DOM做lazy操作
    ... 
})

实例方法

render

{function} 返回实例组件的JSX或者渲染组件到页面的DOM上

...
const Instance = Aotoo(Test, Actions, {props: {...}})
Instance.render('id')   // 渲染到页面上

// or

const myJsx = Instance.render()  //返回组件的JSX

hasMounted

{function} 判断实例所绑定的组件是否渲染完成

...
const Instance = Aotoo(Test, Actions, {props: {...}})
const hasMounted = Instance.hasMounted()

setConfig

{function} 创建实例后可重新设置实例的配置

...
const Instance = Aotoo(Test, Actions, {props: {...}})
const myConfig = {
    container: 'xxx',
    props: { ... }
}
Instance.setConfig(myConfig)

setProps

{function} 创建实例后可重新设置实例的config的props属性,用于实例组件的渲染

...
const Instance = Aotoo(Test, Actions, {props: {...}})
const myProps = {
    ...
}
Instance.setProps(myProps)

getState

{function} 实例组件Mounted后,获取实例组件的state值,该值为clone后的值

...
const Instance = Aotoo(Test, Actions, {props: {...}})

Instance.render('id')

const myState = Instance.getState()

extend

{function} 创建实例后,扩展实例的方法

...
const Instance = Aotoo(Test, Actions, {props: {...}})
Instance.extend({
    aaa: function(){},
    bbb: function(){}
})

dispatch

{function} 创建aotoo实例后,用于触发状态机

class Test extends Component{
    state = {message: 'hello world'},
    render(){
        return <span>{this.state.message}</span>
    }
}
const Actions = {
    CHANGE: function(ostate, opts){
        let state = this.curState
        state.message = opts.message
        return state
    }
}
const Instance = Aotoo(Test, Actions, {props: {...}})
Instance.render('id') 

Instance.dispatch('CHANGE', {...})

// or 

Instance.extend({
    aaa: function(args){
        this.dispatch('CHANGE', args)
    }
})

钩子系统

{function} 钩子系统用于组件内部或者组件间通信,钩子系统包含三个方法on, off, emit,钩子系统的所有方法只支持一个参数

class Test extends Component{
    state = {message: 'hello world'},
    render(){
         this.emit('Hello')
        return <span>{this.state.message}</span>
    }
}

const Actions = {
    CHANGE: function(ostate, opts, ctx){
         ctx.on('Hello', function(){
             console.log('状态机中')
         })
        let state = this.curState
        state.message = opts.message
        return state
    }
}

const Instance = Aotoo(Test, Actions, {props: {...}})
Instance.on('Hello', function(){
    console.log('在业务中调用')
})

Instance.render('id')

// 组件渲染后,render方法会执行`Hello`的钩子,并打印 

// 在业务中调用
// 状态机中

实例属性

x属性

任何aotoo创建的实例都具有.x属性,该属性使得aotoo的实例可以使用React的JSX方式来书写

...
const Instance = Aotoo(Test, Actions)

const props = { ... }
const myJsx = <Instance.x {...props} />

config属性

aotoo实例的配置,包含props的配置

...
const Instance = Aotoo(Test, Actions, {props: { ... }})
console.log(Instance.confg)

rendered属性

aotoo实例rendered方法为自定义的componentDidMount方法,该方法会在React的componentDidMount,componentDidUpdate后执行,该方法有一个DOM的参数

...
const Instance = Aotoo(Test, Actions, {props: { ... }})
Instance.rendered = function(dom){
    // dom is real DOM of Test component by ReactDOM.findDOMNode
}
Instance.render('id')