Domcom各方面都要比React简洁优雅。以下一些代码演示了两个框架的某些方面。

生命周期

React

React针对声明周期提供了一组繁琐的API，其使用方法如下：

xxxMethod: : (function(){ ... }).bind(this)

以下是与生命周期相关的方法名。注意，React并不提供通用的事件系统。
componentWillMount，componentDidMount，
componentWillReceiveProps，
shouldComponentUpdate，componentDidUpdate
componentWillUnmount，componentDidUnmount

Domcom

Domcom提供了完整而通用的部件事件系统，用户程序可以用component.emit, component.on, component.off方法管理部件上的事件及其回调函数。生命周期事件不过是 Domcom 框架本身发送的一组系统事件而已，包括 willMount, didMount, willAttach, didAttach, willRender, didRender 等。可以按照如下方法动态地添加一个或多个回调函数，也可以用 component.off 动态地删除某个回调函数。 

component.on('eventName', function(event, node) { ... })

请注意Domcom部件事件与Dom事件的区别，详情请查看有关文档。

获得Dom节点

React

需要结合 refs 和 React.findDOMNode

React.findDOMNode(componentRef)

演示代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var MyComponent = React.createClass({
        handleClick: function() {
       React.findDOMNode(this.refs.myTextInput).focus();
      },
      render: function() {
        return (
             <div>
                <input type="text" ref="myTextInput" />
              <input
                type="button"
                value="Focus the text input"
                onClick={this.handleClick}
              />
            </div>
          );
        }
  });

Domcom

简单地用部件变量名及 .node 字段即可达到目的。

component.node

演示代码

1
2
3
4
5
6
7
8
9
10
const text1;
const {div, text, button} = dc;
component = div(
    text1 = text(),
    button( {
        onclick() { text1.node.focus(); }
      },
      "Focus the text input"
    )
);