Function component

Function component is another way to represent your component without using classes. You can define your component as a stateless function (without internal state and lifecycle methods). It can be useful when your component is a pure function of its attributes.

function Hello(attrs, children, context) {
    return (
        <div class="Hello">
            <div>{ attrs.name }</div>
            <div>{ children }</div>
        </div>
    );
}

is an equivalent of:

import { Component } from 'vidom';

class Hello extends Component {
    onRender() {
        return (
            <div class="Hello">
                <div>{ this.attrs.name }</div>
                <div>{ this.children }</div>
            </div>
        );
    }
}

It is possible to specify default attributes for function components using defaultAttrs property:

Hello.defaultAttrs = {
    name : 'world'
};