blob: 2ef968c2b6c53aac3ed1c610d2f97580c27b3bd7 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
|
import { h, render } from 'preact';
import htm from 'htm';
import './style.css';
const html = htm.bind(h);
const createRoot = parent => ({
render: v => render(v, parent)
});
function List({ items, renders, useKeys, useCounts, update }) {
const toggleKeys = () => update({ useKeys: !useKeys });
const toggleCounts = () => update({ useCounts: !useCounts });
const swap = () => {
const u = { items: items.slice() };
u.items[1] = items[8];
u.items[8] = items[1];
update(u);
};
return html`
<div>
<button onClick=${update}>Re-render</button>
<button onClick=${swap}>Swap 2 & 8</button>
<label>
<input type="checkbox" checked=${useKeys} onClick=${toggleKeys} />
Use Keys
</label>
<label>
<input type="checkbox" checked=${useCounts} onClick=${toggleCounts} />
Counts
</label>
<ul class="list">
${items.map(
(item, i) => html`
<li
class=${i % 2 ? 'odd' : 'even'}
key=${useKeys ? item.name : undefined}
>
${item.name} ${useCounts ? ` (${renders} renders)` : ''}
</li>
`
)}
</ul>
</div>
`;
}
const root = createRoot(document.body);
let data = {
items: new Array(1000).fill(null).map((x, i) => ({ name: `Item ${i + 1}` })),
renders: 0,
useKeys: false,
useCounts: false
};
function update(partial) {
if (partial) Object.assign(data, partial);
data.renders++;
data.update = update;
root.render(List(data));
}
update();
|
