VirtualDOM api differences
Guide that defines some differences that exist between Atomico and React when working with the DOM.
Atomico's virtualDOM is:
- 1.Close to standard DOM .
- 2.Additional coverage to webcomponents.
Atomico does not support the use of functions to instantiate the component as we traditionally do in React, so that the component can be instantiated as a constructor it must be a webcomponent or a real Node.
❌ Not supported
✔️ Spported
✔️ Supported
function Component(){
return <host></host>
}
function App(){
return <host>
<Component/>
</host>
}
function component(){
return <host></host>
}
const Component = c(component);
customElements.define("my-component",Component)
function app(){
return <host>
<Component/>
</host>
}
function app(){
const Div = document.createElement("div");
return <host>
<Image/>
<Div/>
</host>
}
Like React in Atomico you need to use the prefix on to announce an event, but there is a difference Atomico does not manipulate the name of the event so
onClick is different from onclick, the purpose of this difference is to support custom events.<div>
<button onclick={console.log}>click</button>
<button onMyCustomEvent={console.log}>click</button>
<button onmy-event={console.log}>click</button>
<button onmouseover={console.log}>click</button>
</div>
the
key property in Atomicoo can be of type String, Number, Symbol or other immutable reference.<div>
<div key={1}>1</div>
<div key={symbol}>1</div>
<div key={immutable}>1</div>
</div>
<div innerHTML={`<h1>html!</h1>`}/>
Last modified 1yr ago