开发状态组件

介绍一个简单的插件开发过程及如何通过组件实例的方法更改组件状态

1. 标准react组件

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

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

2. 状态机

状态机用于处理react组件的各种状态

const Actions = {
  /**
   * o {JSON} 原始 SimpleComponent.state
   * opts {JSON} 原始 外部传入的参数
   * curState {JSON} 实时SimpleComponent.state
  */
  INFO: function(o, opts){
    this.curState.info = opts.info
    return this.curState
  }
}

3. 封装

将react的组件封装成JS实例

const ComponentInstance = Aotoo(SimpleComponent, Actions, {props: {...}})

默认的封装方法

aotoo在封装React组件时会解构Actions,并为每一个解构属性生成一个$方法(方法名全小写),如$info的方法对应Actions.INFO,$info接收一个opts参数,会被传导至Actions.INFO的opts属性

  ComponentInstance.$info({info: 'hello guangzhou'})

4. 渲染

JS模式

使用render方法

// 渲染到指定id
ComponentInstance.render('id')

// 直接返回jsx
return ComponentInstance.render()

React模式

使用jsx的方式

const props = {...}
return <ComponentInstance.x { ...props }>

自定义实例方法

生成aotoo组件过程中,会生成Actions的属性解构对应方法,如$info,但仍不够灵活,我们需要构造足够语义化,足够简单的实例方法来响应需求。使用实例的extend来扩展出更多方法

  ComponentInstance.extend({
    info: function(name, info){
      console.log(name)
      this.$info({info})
  })

如上面的示例,我们将$info的方法进一步扩展,构建出实例的info方法,这个方法更贴近业务。维护成本更小。