Library to build reusable component, inspired by React.js.
All UI logic will live within a Component. Component is abstract and should be extended for each new component you wish to create.
With Component you are given props and state, as well as the lifecycle methods.
props are an UnmodifiableMapView that are passed into the Component by whatever is rendering. Within a Component you have no control over the values within props.
state is a UnmodifiableMapView that is internal to the Component, whatever is rendering it has no control over the value of state. Within the Component you can only change the value of state by using the setState method.
Used to set the values to the used for Component.props if they are not set by the whatever is rendering the Component.
@override
Map getDefaultProps() => {
'someCustomProp': 'defaultValue'
};Used to set the default values used in Component.state. Since state is not set externally it is important to override this method.
@override
Map getInitialState() => {
'someCustomState': `defaultValue`
}render is the most important lifecycle method as this is used to build the UI. Should either return ComponentDescription or List<ComponentDescription> (if returning a List Component.domNode will not be set).
class CustomComponent extends Component {
ComponentDescription render() {
return h1({
'children': 'Hello World!'
});
}
}willMount is called once, right before initial rendering of the Component.
didMount is called once, right after the initial rendering of the Component.
willReceiveProps is called when the component is receiving new props from whatever is rendering it.
shouldUpdate is called right before applying new props and state if it returns false the Component will not be updated.
willUpdate is called right before applying new props and state.
didiUpdate is called right after applying new props and state.
willUnmount is called right before the Component is remove from the DOM.
In order to use a Component you have to register it by using the registerComponent function.
ComponentDescriptionFactory CustomComponentFactory = registerComponent(([Map props]) => new CustomComponent(props));The returned ComponentDescriptionFactory is what will actually be used to render the Component.
Before trying to mount component you have to call the top- level initAlkaliBrowserConfiguration. This allows the Components to be updated.
To render a Component into actual DOM use the mountComponent function.
mountComponent(CustomComponentFactory(), querySelector('#dart-entry-point'));