| 1 | ## View
|
| 2 |
|
| 3 | View is a function in Component class that returns [Hyperscript](#hyperscript)/JSX nodes, DOM Nodes, Component or Array of these three.
|
| 4 |
|
| 5 | ```jsx
|
| 6 | this.view() {
|
| 7 | return <h1>Hello World</h1>
|
| 8 | }
|
| 9 | ```
|
| 10 |
|
| 11 | ```jsx
|
| 12 | this.view() {
|
| 13 | return <MyComponent />
|
| 14 | }
|
| 15 | ```
|
| 16 |
|
| 17 | ```jsx
|
| 18 | this.view() {
|
| 19 | return [
|
| 20 | <h1></h1>,
|
| 21 | <MyComponent>,
|
| 22 | document.getElementById('foo')
|
| 23 | ]
|
| 24 | }
|
| 25 | ```
|
| 26 |
|
| 27 | View is rendered only once when Component is mounted or re-mounted. This is where Radi differs from other frameworks - it doesn't re render whole view, instead it uses [Listener](#listener) to re-render only necessary parts of DOM.
|
| 28 | So if you write logic inside `view` method before return statement, it will NOT be triggered every time something updates.
|