From 0aed7797a7ad4b6954fccdeb84bdb2c7531bf158 Mon Sep 17 00:00:00 2001 From: kevinfiol Date: Mon, 21 Feb 2022 13:26:22 -0500 Subject: [PATCH] 2604: correct and move text about statements in view method --- docs/hyperscript.md | 31 ------------------------------- docs/vnodes.md | 31 +++++++++++++++++++++++++++++++ 2 files changed, 31 insertions(+), 31 deletions(-) diff --git a/docs/hyperscript.md b/docs/hyperscript.md index 39704d2e..8528ba64 100644 --- a/docs/hyperscript.md +++ b/docs/hyperscript.md @@ -522,37 +522,6 @@ var BetterLabeledComponent = { } ``` -#### Avoid statements in view methods - -JavaScript statements often require changing the naturally nested structure of an HTML tree, making the code more verbose and harder to understand. Constructing an virtual DOM tree procedurally can also potentially trigger expensive deoptimizations (such as an entire template being recreated from scratch) - -```javascript -// AVOID -var BadListComponent = { - view: function(vnode) { - var list = [] - for (var i = 0; i < vnode.attrs.items.length; i++) { - list.push(m("li", vnode.attrs.items[i])) - } - - return m("ul", list) - } -} -``` - -Instead, prefer using JavaScript expressions such as the ternary operator and Array methods. - -```javascript -// PREFER -var BetterListComponent = { - view: function(vnode) { - return m("ul", vnode.attrs.items.map(function(item) { - return m("li", item) - })) - } -} -``` - #### Avoid creating vnodes outside views When a redraw encounters a vnode which is strictly equal to the one in the previous render, it will be skipped and its contents will not be updated. While this may seem like an opportunity for performance optimisation, it should be avoided because it prevents dynamic changes in that node's tree - this leads to side-effects such as downstream lifecycle methods failing to trigger on redraw. In this sense, Mithril.js vnodes are immutable: new vnodes are compared to old ones; mutations to vnodes are not persisted. diff --git a/docs/vnodes.md b/docs/vnodes.md index bf925fc0..a9313f25 100644 --- a/docs/vnodes.md +++ b/docs/vnodes.md @@ -144,3 +144,34 @@ users.map(function(user){ return m(UserComponent, {key: user.id, model: user}) }) ``` + +#### Avoid statements in view methods + +JavaScript statements in view methods often require changing the naturally nested structure of an HTML tree, making the code more verbose and less readable. + +```javascript +// AVOID +var BadListComponent = { + view: function(vnode) { + var list = [] + for (var i = 0; i < vnode.attrs.items.length; i++) { + list.push(m("li", vnode.attrs.items[i])) + } + + return m("ul", list) + } +} +``` + +Instead, prefer using JavaScript expressions such as the ternary operator for conditional rendering and Array methods for list-like structures. + +```javascript +// PREFER +var BetterListComponent = { + view: function(vnode) { + return m("ul", vnode.attrs.items.map(function(item) { + return m("li", item) + })) + } +} +``` \ No newline at end of file