独立的HOOKS

HOOKS是一套独立的系统,即可以独立于aotoo组件外运行,也可以糅合进组件内运行,我们在业务页面上可以使用HOOKS来灵活的处理一些异步的数据

全局变量SAX,在引入aotoo时,aotoo会自动挂载SAX

包含四个方法on, one, off, emit

独立HOOKS

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

import '@aotoo/aotoo'

// 新建SAX的实例,并指定命名空间  
// 每一个实例是独立的HOOKS系统
const pageObject = SAX('SPACE_NAME_1')
const pageYun = SAX('SPACE_NAME_2')


// 挂载第一个方法
pageObject.on('SOME_KEY', function(param){
  /* do some thing*/
  return param
})


// 挂载第二个方法
pageObject.on('SOME_KEY', function(param){
  /* do some thing*/
  return param
})


// 执行SOME_KEY
// 只允许传递一个参数
const result = pageObject.emit('SOME_KEY', {
  a: '1',
  b: '2'
})


// 注销SOME_KEY
pageObject.off('SOME_KEY')

在组件中使用

创建一个aotoo组件实例

  class Aaa extends React.Component {
    construct(props){
      super(props)
      // ....
    }
    render(){
      /* return something */
    }
  }

  const Actions = {
    ...
    ...
  }

  const Instance = Aotoo(Aaa, Actions)

on

使用on给事件挂载一个或多个方法
只支持一个参数

  // instance是aotoo组件的实例  
  Instance.on('my_event', function(opts){
    /*do something*/
    console.log(opts.info)
  })

  Instance.on('my_event', function(opts){
    console.log(opts.message)
  })

one

one与on类似,但one在执行过一次后会自动注销 使用one给事件挂载一个或多个方法
只支持一个参数

  // instance是aotoo组件的实例  
  Instance.one('my_event', function(opts){
    console.log(opts.info)
  })

off

解除由on挂载事件的所有方法

  Instance.off('my_event')
  Instance.emit('my_event', options)

emit

执行用on挂载的方法,允许切只允许传递一个参数

  const options = {
    info: 'hello world',
    message: 'hello aotoo'
  }

  Instance.emit('my_event', options)

DEMO

import '@aotoo/aotoo'
import '@aotoo/aotoo-web-widgets'

class MyTest extends React.Component{
  state = {message: 'hello world'}
  render(){
    const result = this.emit('Hello')
    console.log(result)
    return <span>{this.state.message}</span>
  }
}

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

const Myinstance = Aotoo(MyTest, MyActions)
Myinstance.on('Hello', function(){
  console.log('在业务中调用')
  return 'in business'
})

Myinstance.render('treex', function(dom){
  $(dom).once('click', function(){
    Myinstance.$change({message: 'hello aotoo'})
  })
})


/*
    组件渲染后,render方法会执行`Hello`的钩子,并打印 
    1. 在业务中调用

    after click
    2. 在业务中调用
    3. 状态机中
*/