A view is the visible interface an application creates from its current state. Rendering turns data into something a user can see: a to-do stored as a string, for example, becomes HTML containing its description and controls. A view is not necessarily fixed when the page loads; JavaScript can create it and change it as the application runs. section 2.2.3 section 1.3.2
It helps to separate three responsibilities:
- State holds the data, such as an array of to-dos or a counter value. section 2.2.3 section 6.2
- A view description says what should appear for that state. A virtual DOM can serve as this description. section 3.0 section 3.1
- Rendering creates the visible HTML. The Document API lets JavaScript create elements, set their content, and attach them to the document. section 1.3.2 section 2.2.3
In a single-page application, the browser first loads a mostly empty HTML page along with JavaScript and CSS. JavaScript then creates the initial view, a step called mounting. When navigation changes the URL, a router can update the view without reloading the entire application. section 1.3.2
A to-do with two views
Start with a string in a to-do array. In read mode, render it as a list item containing its text and a Done button. On a double-click, replace that list item with an edit-mode item containing an input and Save and Cancel buttons. Saving updates the array and replaces the item with a new read-mode rendering; canceling restores the read-mode rendering. The underlying to-do and its visible representation have different jobs. section 2.2.3
Direct DOM manipulation works, but mixing element creation and updates with application logic makes the code harder to maintain. A framework can instead accept a description of the desired view and handle the Document API work. In a small counter example, a view function receives the count and an event emitter, describes a button displaying that count, and emits an action when clicked. This simple framework replaces the button element after each state change; the user sees its number change. section 3.0 section 3.1 section 6.2
A component can own a smaller part of the view. A stateful component has its own state and lifecycle and updates its view when that state changes; an instance can manage its own DOM subtree. The same state-to-view idea applies whether the visible result is one button or part of a larger interface. section 9.1 section 9.4
