开始使用

aotoo的快速上手操作

组件

使用aotoo封装原生react组件,简单的封装方法,灵活的状态更新机制

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

import '@aotoo/aotoo'


// 原生react组件
class SimpleComponent extends React.Component {
  state = {info: 'hello world'}
  render(){
    return (
      <div>{this.state.info}</div>
    )
  }
}

// 定义ACTION,ACTION用于修改state的状态
const Actions = {
  INFO: function(oriState, options){
    this.curState.info = options.info
    return this.curState
  }
}

// 将原生组件封装成aotoo组件实例
const MyComponent = Aotoo(SimpleComponent, Actions)


// 组件结构完全输出后,对应componentDidMount
MyComponent.on('rendered', function(param){
  const {dom} = param
  $('#a_button').on('click', ()=>{
    MyComponent.$info({info: 'hello aotoo'})
  })
})

MyComponent.render('id')
// 或者
ReactDom.render(<MyComponent.x />, document.getElementById('id'))

wrap方法

包裹JSX结构,并获取其真实DOM

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

import '@aotoo/aotoo'

const myjsx = (
  <div className="MyJsxStyle">
    <h1>更简单的开发React组件</h1>
  </div>
)

const Myjsx = Aotoo.wrap(myjsx, (dom)=>{
  // dom => 真实myjsx的dom
  console.log(dom)
})

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

render方法

Aotoo.render代替ReactDom.render,简化了render的使用方法,Aotoo.render方法还能在node端使用

import '@aotoo/aotoo'


// =========== jsx ===============
const myjsx = (
  <div className="MyJsxStyle">
    <h1>更简单的开发React组件</h1>
  </div>
)
Aotoo.render(myjsx, 'id')


// ======== Function Comp =========
function Mycomp(props) {
  return (
    <div className="MyJsxStyle">
      <h1>更简单的开发React组件</h1>
    </div>
  )
}
Aotoo.render(<Mycomp />, 'id')


/*
* ======== node端使用 =========
*/
const str = Aotoo.render(<Mycomp />)   // or
const str = Aotoo.html( <Mycomp /> )   //不包含react特征
ctx.body = str