ovto 0.6.2 → 0.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/CHANGELOG.md +4 -0
- data/Gemfile.lock +15 -16
- data/Rakefile +2 -9
- data/book/SUMMARY.md +15 -11
- data/book/book.toml +10 -0
- data/docs/.nojekyll +1 -0
- data/docs/404.html +189 -0
- data/docs/FontAwesome/css/font-awesome.css +4 -0
- data/docs/FontAwesome/fonts/FontAwesome.ttf +0 -0
- data/docs/FontAwesome/fonts/fontawesome-webfont.eot +0 -0
- data/docs/FontAwesome/fonts/fontawesome-webfont.svg +2671 -0
- data/docs/{gitbook/fonts/fontawesome → FontAwesome/fonts}/fontawesome-webfont.ttf +0 -0
- data/docs/FontAwesome/fonts/fontawesome-webfont.woff +0 -0
- data/docs/FontAwesome/fonts/fontawesome-webfont.woff2 +0 -0
- data/docs/api/Array.html +4 -4
- data/docs/api/Hash.html +4 -4
- data/docs/api/MightyInspect.html +238 -0
- data/docs/api/Ovto/Actions.html +4 -4
- data/docs/api/Ovto/App.html +4 -4
- data/docs/api/Ovto/Component/MoreThanOneNode.html +5 -5
- data/docs/api/Ovto/Component.html +4 -4
- data/docs/api/Ovto/Middleware/Actions.html +4 -4
- data/docs/api/Ovto/Middleware/Base.html +5 -5
- data/docs/api/Ovto/Middleware/Component.html +5 -5
- data/docs/api/Ovto/Middleware.html +8 -8
- data/docs/api/Ovto/PureComponent/StateIsNotAvailable.html +4 -4
- data/docs/api/Ovto/PureComponent.html +4 -4
- data/docs/api/Ovto/Runtime.html +4 -4
- data/docs/api/Ovto/State/MissingValue.html +4 -4
- data/docs/api/Ovto/State/UnknownStateKey.html +4 -4
- data/docs/api/Ovto/State.html +12 -12
- data/docs/api/Ovto/WiredActionSet.html +4 -4
- data/docs/api/Ovto/WiredActions.html +4 -4
- data/docs/api/Ovto.html +8 -8
- data/docs/api/_index.html +5 -5
- data/docs/api/actions.html +215 -426
- data/docs/api/app.html +226 -432
- data/docs/api/component.html +268 -480
- data/docs/api/fetch.html +188 -393
- data/docs/api/file.README.html +4 -4
- data/docs/api/frames.html +1 -1
- data/docs/api/index.html +4 -4
- data/docs/api/middleware.html +249 -460
- data/docs/api/pure_component.html +186 -398
- data/docs/api/state.html +226 -438
- data/docs/api/top-level-namespace.html +4 -4
- data/docs/ayu-highlight.css +78 -0
- data/docs/book.js +688 -0
- data/docs/book.toml +10 -0
- data/docs/clipboard.min.js +7 -0
- data/docs/css/chrome.css +545 -0
- data/docs/css/general.css +203 -0
- data/docs/css/print.css +54 -0
- data/docs/css/variables.css +255 -0
- data/docs/elasticlunr.min.js +10 -0
- data/docs/favicon.png +0 -0
- data/docs/favicon.svg +22 -0
- data/docs/fonts/OPEN-SANS-LICENSE.txt +202 -0
- data/docs/fonts/SOURCE-CODE-PRO-LICENSE.txt +93 -0
- data/docs/fonts/fonts.css +100 -0
- data/docs/fonts/open-sans-v17-all-charsets-300.woff2 +0 -0
- data/docs/fonts/open-sans-v17-all-charsets-300italic.woff2 +0 -0
- data/docs/fonts/open-sans-v17-all-charsets-600.woff2 +0 -0
- data/docs/fonts/open-sans-v17-all-charsets-600italic.woff2 +0 -0
- data/docs/fonts/open-sans-v17-all-charsets-700.woff2 +0 -0
- data/docs/fonts/open-sans-v17-all-charsets-700italic.woff2 +0 -0
- data/docs/fonts/open-sans-v17-all-charsets-800.woff2 +0 -0
- data/docs/fonts/open-sans-v17-all-charsets-800italic.woff2 +0 -0
- data/docs/fonts/open-sans-v17-all-charsets-italic.woff2 +0 -0
- data/docs/fonts/open-sans-v17-all-charsets-regular.woff2 +0 -0
- data/docs/fonts/source-code-pro-v11-all-charsets-500.woff2 +0 -0
- data/docs/guides/debugging.html +184 -390
- data/docs/guides/development.html +171 -383
- data/docs/guides/install.html +206 -409
- data/docs/guides/tutorial.html +309 -525
- data/docs/highlight.css +82 -0
- data/docs/highlight.js +6 -0
- data/docs/index.html +390 -391
- data/docs/mark.min.js +7 -0
- data/docs/print.html +958 -0
- data/docs/searcher.js +483 -0
- data/docs/searchindex.js +1 -0
- data/docs/searchindex.json +1 -0
- data/docs/tomorrow-night.css +102 -0
- data/examples/sinatra/Gemfile.lock +25 -25
- data/examples/static/Gemfile.lock +8 -8
- data/lib/ovto/component.rb +2 -3
- data/lib/ovto/version.rb +1 -1
- metadata +47 -26
- data/docs/gitbook/fonts/fontawesome/FontAwesome.otf +0 -0
- data/docs/gitbook/fonts/fontawesome/fontawesome-webfont.eot +0 -0
- data/docs/gitbook/fonts/fontawesome/fontawesome-webfont.svg +0 -685
- data/docs/gitbook/fonts/fontawesome/fontawesome-webfont.woff +0 -0
- data/docs/gitbook/fonts/fontawesome/fontawesome-webfont.woff2 +0 -0
- data/docs/gitbook/gitbook-plugin-fontsettings/fontsettings.js +0 -240
- data/docs/gitbook/gitbook-plugin-fontsettings/website.css +0 -291
- data/docs/gitbook/gitbook-plugin-highlight/ebook.css +0 -135
- data/docs/gitbook/gitbook-plugin-highlight/website.css +0 -434
- data/docs/gitbook/gitbook-plugin-lunr/lunr.min.js +0 -7
- data/docs/gitbook/gitbook-plugin-lunr/search-lunr.js +0 -59
- data/docs/gitbook/gitbook-plugin-search/lunr.min.js +0 -7
- data/docs/gitbook/gitbook-plugin-search/search-engine.js +0 -50
- data/docs/gitbook/gitbook-plugin-search/search.css +0 -35
- data/docs/gitbook/gitbook-plugin-search/search.js +0 -213
- data/docs/gitbook/gitbook-plugin-sharing/buttons.js +0 -90
- data/docs/gitbook/gitbook.js +0 -4
- data/docs/gitbook/images/apple-touch-icon-precomposed-152.png +0 -0
- data/docs/gitbook/images/favicon.ico +0 -0
- data/docs/gitbook/style.css +0 -9
- data/docs/gitbook/theme.js +0 -4
- data/docs/search_index.json +0 -1
|
@@ -1,428 +1,216 @@
|
|
|
1
|
-
|
|
2
1
|
<!DOCTYPE HTML>
|
|
3
|
-
<html lang="" >
|
|
2
|
+
<html lang="en" class="sidebar-visible no-js light">
|
|
4
3
|
<head>
|
|
4
|
+
<!-- Book generated using mdBook -->
|
|
5
5
|
<meta charset="UTF-8">
|
|
6
|
-
<
|
|
7
|
-
<title>Ovto::PureComponent · GitBook</title>
|
|
8
|
-
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
9
|
-
<meta name="description" content="">
|
|
10
|
-
<meta name="generator" content="GitBook 3.2.2">
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
<link rel="stylesheet" href="../gitbook/style.css">
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
<link rel="stylesheet" href="../gitbook/gitbook-plugin-highlight/website.css">
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
<link rel="stylesheet" href="../gitbook/gitbook-plugin-search/search.css">
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
<link rel="stylesheet" href="../gitbook/gitbook-plugin-fontsettings/website.css">
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
6
|
+
<title>Ovto::PureComponent - Ovto Reference Manual</title>
|
|
32
7
|
|
|
33
|
-
|
|
34
8
|
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
9
|
+
<!-- Custom HTML head -->
|
|
40
10
|
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
11
|
+
<meta name="description" content="">
|
|
12
|
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
13
|
+
<meta name="theme-color" content="#ffffff" />
|
|
48
14
|
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
15
|
+
<link rel="icon" href="../favicon.svg">
|
|
16
|
+
<link rel="shortcut icon" href="../favicon.png">
|
|
17
|
+
<link rel="stylesheet" href="../css/variables.css">
|
|
18
|
+
<link rel="stylesheet" href="../css/general.css">
|
|
19
|
+
<link rel="stylesheet" href="../css/chrome.css">
|
|
20
|
+
<link rel="stylesheet" href="../css/print.css" media="print">
|
|
21
|
+
|
|
22
|
+
<!-- Fonts -->
|
|
23
|
+
<link rel="stylesheet" href="../FontAwesome/css/font-awesome.css">
|
|
24
|
+
<link rel="stylesheet" href="../fonts/fonts.css">
|
|
25
|
+
|
|
26
|
+
<!-- Highlight.js Stylesheets -->
|
|
27
|
+
<link rel="stylesheet" href="../highlight.css">
|
|
28
|
+
<link rel="stylesheet" href="../tomorrow-night.css">
|
|
29
|
+
<link rel="stylesheet" href="../ayu-highlight.css">
|
|
30
|
+
|
|
31
|
+
<!-- Custom theme stylesheets -->
|
|
65
32
|
|
|
66
33
|
</head>
|
|
67
34
|
<body>
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
35
|
+
<div id="body-container">
|
|
36
|
+
<!-- Provide site root to javascript -->
|
|
37
|
+
<script>
|
|
38
|
+
var path_to_root = "../";
|
|
39
|
+
var default_theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "navy" : "light";
|
|
40
|
+
</script>
|
|
41
|
+
|
|
42
|
+
<!-- Work around some values being stored in localStorage wrapped in quotes -->
|
|
43
|
+
<script>
|
|
44
|
+
try {
|
|
45
|
+
var theme = localStorage.getItem('mdbook-theme');
|
|
46
|
+
var sidebar = localStorage.getItem('mdbook-sidebar');
|
|
47
|
+
|
|
48
|
+
if (theme.startsWith('"') && theme.endsWith('"')) {
|
|
49
|
+
localStorage.setItem('mdbook-theme', theme.slice(1, theme.length - 1));
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
if (sidebar.startsWith('"') && sidebar.endsWith('"')) {
|
|
53
|
+
localStorage.setItem('mdbook-sidebar', sidebar.slice(1, sidebar.length - 1));
|
|
54
|
+
}
|
|
55
|
+
} catch (e) { }
|
|
56
|
+
</script>
|
|
57
|
+
|
|
58
|
+
<!-- Set the theme before any content is loaded, prevents flash -->
|
|
59
|
+
<script>
|
|
60
|
+
var theme;
|
|
61
|
+
try { theme = localStorage.getItem('mdbook-theme'); } catch(e) { }
|
|
62
|
+
if (theme === null || theme === undefined) { theme = default_theme; }
|
|
63
|
+
var html = document.querySelector('html');
|
|
64
|
+
html.classList.remove('no-js')
|
|
65
|
+
html.classList.remove('light')
|
|
66
|
+
html.classList.add(theme);
|
|
67
|
+
html.classList.add('js');
|
|
68
|
+
</script>
|
|
69
|
+
|
|
70
|
+
<!-- Hide / unhide sidebar before it is displayed -->
|
|
71
|
+
<script>
|
|
72
|
+
var html = document.querySelector('html');
|
|
73
|
+
var sidebar = null;
|
|
74
|
+
if (document.body.clientWidth >= 1080) {
|
|
75
|
+
try { sidebar = localStorage.getItem('mdbook-sidebar'); } catch(e) { }
|
|
76
|
+
sidebar = sidebar || 'visible';
|
|
77
|
+
} else {
|
|
78
|
+
sidebar = 'hidden';
|
|
79
|
+
}
|
|
80
|
+
html.classList.remove('sidebar-visible');
|
|
81
|
+
html.classList.add("sidebar-" + sidebar);
|
|
82
|
+
</script>
|
|
83
|
+
|
|
84
|
+
<nav id="sidebar" class="sidebar" aria-label="Table of contents">
|
|
85
|
+
<div class="sidebar-scrollbox">
|
|
86
|
+
<ol class="chapter"><li class="chapter-item expanded "><a href="../guides/tutorial.html"><strong aria-hidden="true">1.</strong> Getting Started</a></li><li class="chapter-item expanded "><a href="../guides/install.html"><strong aria-hidden="true">2.</strong> Install</a></li><li class="chapter-item expanded affix "><li class="part-title">API</li><li class="chapter-item expanded "><a href="../api/app.html"><strong aria-hidden="true">3.</strong> Ovto::App</a></li><li class="chapter-item expanded "><a href="../api/state.html"><strong aria-hidden="true">4.</strong> Ovto::State</a></li><li class="chapter-item expanded "><a href="../api/actions.html"><strong aria-hidden="true">5.</strong> Ovto::Actions</a></li><li class="chapter-item expanded "><a href="../api/component.html"><strong aria-hidden="true">6.</strong> Ovto::Component</a></li><li class="chapter-item expanded "><a href="../api/pure_component.html" class="active"><strong aria-hidden="true">7.</strong> Ovto::PureComponent</a></li><li class="chapter-item expanded "><a href="../api/middleware.html"><strong aria-hidden="true">8.</strong> Ovto::Middleware</a></li><li class="chapter-item expanded "><a href="../api/fetch.html"><strong aria-hidden="true">9.</strong> Ovto.fetch</a></li><li class="chapter-item expanded affix "><li class="part-title">Guides</li><li class="chapter-item expanded "><a href="../guides/debugging.html"><strong aria-hidden="true">10.</strong> Debugging</a></li><li class="chapter-item expanded "><a href="../guides/development.html"><strong aria-hidden="true">11.</strong> Development</a></li></ol>
|
|
87
|
+
</div>
|
|
88
|
+
<div id="sidebar-resize-handle" class="sidebar-resize-handle"></div>
|
|
89
|
+
</nav>
|
|
90
|
+
|
|
91
|
+
<div id="page-wrapper" class="page-wrapper">
|
|
92
|
+
|
|
93
|
+
<div class="page">
|
|
94
|
+
<div id="menu-bar-hover-placeholder"></div>
|
|
95
|
+
<div id="menu-bar" class="menu-bar sticky bordered">
|
|
96
|
+
<div class="left-buttons">
|
|
97
|
+
<button id="sidebar-toggle" class="icon-button" type="button" title="Toggle Table of Contents" aria-label="Toggle Table of Contents" aria-controls="sidebar">
|
|
98
|
+
<i class="fa fa-bars"></i>
|
|
99
|
+
</button>
|
|
100
|
+
<button id="theme-toggle" class="icon-button" type="button" title="Change theme" aria-label="Change theme" aria-haspopup="true" aria-expanded="false" aria-controls="theme-list">
|
|
101
|
+
<i class="fa fa-paint-brush"></i>
|
|
102
|
+
</button>
|
|
103
|
+
<ul id="theme-list" class="theme-popup" aria-label="Themes" role="menu">
|
|
104
|
+
<li role="none"><button role="menuitem" class="theme" id="light">Light</button></li>
|
|
105
|
+
<li role="none"><button role="menuitem" class="theme" id="rust">Rust</button></li>
|
|
106
|
+
<li role="none"><button role="menuitem" class="theme" id="coal">Coal</button></li>
|
|
107
|
+
<li role="none"><button role="menuitem" class="theme" id="navy">Navy</button></li>
|
|
108
|
+
<li role="none"><button role="menuitem" class="theme" id="ayu">Ayu</button></li>
|
|
109
|
+
</ul>
|
|
110
|
+
<button id="search-toggle" class="icon-button" type="button" title="Search. (Shortkey: s)" aria-label="Toggle Searchbar" aria-expanded="false" aria-keyshortcuts="S" aria-controls="searchbar">
|
|
111
|
+
<i class="fa fa-search"></i>
|
|
112
|
+
</button>
|
|
113
|
+
</div>
|
|
76
114
|
|
|
77
|
-
|
|
78
|
-
<nav role="navigation">
|
|
79
|
-
|
|
115
|
+
<h1 class="menu-title">Ovto Reference Manual</h1>
|
|
80
116
|
|
|
117
|
+
<div class="right-buttons">
|
|
118
|
+
<a href="../print.html" title="Print this book" aria-label="Print this book">
|
|
119
|
+
<i id="print-button" class="fa fa-print"></i>
|
|
120
|
+
</a>
|
|
81
121
|
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
122
|
+
</div>
|
|
123
|
+
</div>
|
|
124
|
+
|
|
125
|
+
<div id="search-wrapper" class="hidden">
|
|
126
|
+
<form id="searchbar-outer" class="searchbar-outer">
|
|
127
|
+
<input type="search" id="searchbar" name="searchbar" placeholder="Search this book ..." aria-controls="searchresults-outer" aria-describedby="searchresults-header">
|
|
128
|
+
</form>
|
|
129
|
+
<div id="searchresults-outer" class="searchresults-outer hidden">
|
|
130
|
+
<div id="searchresults-header" class="searchresults-header"></div>
|
|
131
|
+
<ul id="searchresults">
|
|
132
|
+
</ul>
|
|
133
|
+
</div>
|
|
134
|
+
</div>
|
|
135
|
+
|
|
136
|
+
<!-- Apply ARIA attributes after the sidebar and the sidebar toggle button are added to the DOM -->
|
|
137
|
+
<script>
|
|
138
|
+
document.getElementById('sidebar-toggle').setAttribute('aria-expanded', sidebar === 'visible');
|
|
139
|
+
document.getElementById('sidebar').setAttribute('aria-hidden', sidebar !== 'visible');
|
|
140
|
+
Array.from(document.querySelectorAll('#sidebar a')).forEach(function(link) {
|
|
141
|
+
link.setAttribute('tabIndex', sidebar === 'visible' ? 0 : -1);
|
|
142
|
+
});
|
|
143
|
+
</script>
|
|
144
|
+
|
|
145
|
+
<div id="content" class="content">
|
|
146
|
+
<main>
|
|
147
|
+
<h1 id="ovtopurecomponent"><a class="header" href="#ovtopurecomponent">Ovto::PureComponent</a></h1>
|
|
148
|
+
<p>It almost the same as <code>Ovto::Component</code>, but it caches the <code>render</code> method calling with arguments of the method.</p>
|
|
149
|
+
<h2 id="when-to-use-purecomponent"><a class="header" href="#when-to-use-purecomponent">When to use PureComponent?</a></h2>
|
|
150
|
+
<p>Use it when your app is slow and need more speed.</p>
|
|
151
|
+
<h2 id="cache-strategy"><a class="header" href="#cache-strategy">Cache strategy</a></h2>
|
|
152
|
+
<p>It compares <code>render</code> method arguments and the previous arguments.</p>
|
|
153
|
+
<pre><code class="language-rb">def render
|
|
154
|
+
o 'div' do
|
|
155
|
+
o Pure, foo: state.foo
|
|
156
|
+
o NotPure bar: state.bar
|
|
157
|
+
end
|
|
158
|
+
end
|
|
159
|
+
</code></pre>
|
|
160
|
+
<p>In this case, <code>NotPure</code> component's render method is called even if <code>state.foo</code> is changed.
|
|
161
|
+
Whereas <code>Pure</code> component's render method is called only if <code>state.foo</code> is changed.</p>
|
|
162
|
+
<h2 id="state"><a class="header" href="#state">State</a></h2>
|
|
163
|
+
<p><code>state</code> method is not available in <code>PureComponent</code>, because <code>PureComponent</code> does not treat state as the cache key.
|
|
164
|
+
If you'd like to use state in <code>PureComponent</code>, pass the state from the parent component.</p>
|
|
85
165
|
|
|
86
|
-
|
|
166
|
+
</main>
|
|
87
167
|
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
<a href="../">
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
Introduction
|
|
98
|
-
|
|
99
|
-
</a>
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
</li>
|
|
104
|
-
|
|
105
|
-
<li class="chapter " data-level="1.2" data-path="../guides/tutorial.html">
|
|
106
|
-
|
|
107
|
-
<a href="../guides/tutorial.html">
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
Getting Started
|
|
111
|
-
|
|
112
|
-
</a>
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
</li>
|
|
117
|
-
|
|
118
|
-
<li class="chapter " data-level="1.3" data-path="../guides/install.html">
|
|
119
|
-
|
|
120
|
-
<a href="../guides/install.html">
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
Install
|
|
124
|
-
|
|
125
|
-
</a>
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
</li>
|
|
130
|
-
|
|
131
|
-
<li class="chapter " data-level="1.4" >
|
|
132
|
-
|
|
133
|
-
<span>
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
API
|
|
137
|
-
|
|
138
|
-
</span>
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
<ul class="articles">
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
<li class="chapter " data-level="1.4.1" data-path="app.html">
|
|
146
|
-
|
|
147
|
-
<a href="app.html">
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
Ovto::App
|
|
151
|
-
|
|
152
|
-
</a>
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
</li>
|
|
157
|
-
|
|
158
|
-
<li class="chapter " data-level="1.4.2" data-path="state.html">
|
|
159
|
-
|
|
160
|
-
<a href="state.html">
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
Ovto::State
|
|
164
|
-
|
|
165
|
-
</a>
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
</li>
|
|
170
|
-
|
|
171
|
-
<li class="chapter " data-level="1.4.3" data-path="actions.html">
|
|
172
|
-
|
|
173
|
-
<a href="actions.html">
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
Ovto::Actions
|
|
177
|
-
|
|
178
|
-
</a>
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
</li>
|
|
183
|
-
|
|
184
|
-
<li class="chapter " data-level="1.4.4" data-path="component.html">
|
|
185
|
-
|
|
186
|
-
<a href="component.html">
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
Ovto::Component
|
|
190
|
-
|
|
191
|
-
</a>
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
</li>
|
|
196
|
-
|
|
197
|
-
<li class="chapter active" data-level="1.4.5" data-path="pure_component.html">
|
|
198
|
-
|
|
199
|
-
<a href="pure_component.html">
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
Ovto::PureComponent
|
|
203
|
-
|
|
204
|
-
</a>
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
</li>
|
|
209
|
-
|
|
210
|
-
<li class="chapter " data-level="1.4.6" data-path="middleware.html">
|
|
211
|
-
|
|
212
|
-
<a href="middleware.html">
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
Ovto::Middleware
|
|
216
|
-
|
|
217
|
-
</a>
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
</li>
|
|
222
|
-
|
|
223
|
-
<li class="chapter " data-level="1.4.7" data-path="fetch.html">
|
|
224
|
-
|
|
225
|
-
<a href="fetch.html">
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
Ovto.fetch
|
|
229
|
-
|
|
230
|
-
</a>
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
</li>
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
</ul>
|
|
238
|
-
|
|
239
|
-
</li>
|
|
240
|
-
|
|
241
|
-
<li class="chapter " data-level="1.5" >
|
|
242
|
-
|
|
243
|
-
<span>
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
Guides
|
|
247
|
-
|
|
248
|
-
</span>
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
<ul class="articles">
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
<li class="chapter " data-level="1.5.1" data-path="../guides/debugging.html">
|
|
256
|
-
|
|
257
|
-
<a href="../guides/debugging.html">
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
Debugging
|
|
261
|
-
|
|
262
|
-
</a>
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
</li>
|
|
267
|
-
|
|
268
|
-
<li class="chapter " data-level="1.5.2" data-path="../guides/development.html">
|
|
269
|
-
|
|
270
|
-
<a href="../guides/development.html">
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
Development
|
|
274
|
-
|
|
275
|
-
</a>
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
</li>
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
</ul>
|
|
283
|
-
|
|
284
|
-
</li>
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
<li class="divider"></li>
|
|
290
|
-
|
|
291
|
-
<li>
|
|
292
|
-
<a href="https://www.gitbook.com" target="blank" class="gitbook-link">
|
|
293
|
-
Published with GitBook
|
|
294
|
-
</a>
|
|
295
|
-
</li>
|
|
296
|
-
</ul>
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
</nav>
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
</div>
|
|
168
|
+
<nav class="nav-wrapper" aria-label="Page navigation">
|
|
169
|
+
<!-- Mobile navigation buttons -->
|
|
170
|
+
<a rel="prev" href="../api/component.html" class="mobile-nav-chapters previous" title="Previous chapter" aria-label="Previous chapter" aria-keyshortcuts="Left">
|
|
171
|
+
<i class="fa fa-angle-left"></i>
|
|
172
|
+
</a>
|
|
303
173
|
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
174
|
+
<a rel="next" href="../api/middleware.html" class="mobile-nav-chapters next" title="Next chapter" aria-label="Next chapter" aria-keyshortcuts="Right">
|
|
175
|
+
<i class="fa fa-angle-right"></i>
|
|
176
|
+
</a>
|
|
309
177
|
|
|
310
|
-
<div
|
|
311
|
-
|
|
178
|
+
<div style="clear: both"></div>
|
|
179
|
+
</nav>
|
|
180
|
+
</div>
|
|
181
|
+
</div>
|
|
312
182
|
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
</h1>
|
|
318
|
-
</div>
|
|
183
|
+
<nav class="nav-wide-wrapper" aria-label="Page navigation">
|
|
184
|
+
<a rel="prev" href="../api/component.html" class="nav-chapters previous" title="Previous chapter" aria-label="Previous chapter" aria-keyshortcuts="Left">
|
|
185
|
+
<i class="fa fa-angle-left"></i>
|
|
186
|
+
</a>
|
|
319
187
|
|
|
188
|
+
<a rel="next" href="../api/middleware.html" class="nav-chapters next" title="Next chapter" aria-label="Next chapter" aria-keyshortcuts="Right">
|
|
189
|
+
<i class="fa fa-angle-right"></i>
|
|
190
|
+
</a>
|
|
191
|
+
</nav>
|
|
320
192
|
|
|
193
|
+
</div>
|
|
321
194
|
|
|
322
195
|
|
|
323
|
-
<div class="page-wrapper" tabindex="-1" role="main">
|
|
324
|
-
<div class="page-inner">
|
|
325
|
-
|
|
326
|
-
<div id="book-search-results">
|
|
327
|
-
<div class="search-noresults">
|
|
328
|
-
|
|
329
|
-
<section class="normal markdown-section">
|
|
330
|
-
|
|
331
|
-
<h1 id="ovtopurecomponent">Ovto::PureComponent</h1>
|
|
332
|
-
<p>It almost the same as <code>Ovto::Component</code>, but it caches the <code>render</code> method calling with arguments of the method.</p>
|
|
333
|
-
<h2 id="when-to-use-purecomponent">When to use PureComponent?</h2>
|
|
334
|
-
<p>Use it when your app is slow and need more speed.</p>
|
|
335
|
-
<h2 id="cache-strategy">Cache strategy</h2>
|
|
336
|
-
<p>It compares <code>render</code> method arguments and the previous arguments.</p>
|
|
337
|
-
<pre><code class="lang-rb"><span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">render</span></span>
|
|
338
|
-
o <span class="hljs-string">'div'</span> <span class="hljs-keyword">do</span>
|
|
339
|
-
o Pure, <span class="hljs-symbol">foo:</span> state.foo
|
|
340
|
-
o NotPure <span class="hljs-symbol">bar:</span> state.bar
|
|
341
|
-
<span class="hljs-keyword">end</span>
|
|
342
|
-
<span class="hljs-keyword">end</span>
|
|
343
|
-
</code></pre>
|
|
344
|
-
<p>In this case, <code>NotPure</code> component's render method is called even if <code>state.foo</code> is changed.
|
|
345
|
-
Whereas <code>Pure</code> component's render method is called only if <code>state.foo</code> is changed.</p>
|
|
346
|
-
<h2 id="state">State</h2>
|
|
347
|
-
<p><code>state</code> method is not available in <code>PureComponent</code>, because <code>PureComponent</code> does not treat state as the cache key.
|
|
348
|
-
If you'd like to use state in <code>PureComponent</code>, pass the state from the parent component.</p>
|
|
349
196
|
|
|
350
|
-
|
|
351
|
-
</section>
|
|
352
|
-
|
|
353
|
-
</div>
|
|
354
|
-
<div class="search-results">
|
|
355
|
-
<div class="has-results">
|
|
356
|
-
|
|
357
|
-
<h1 class="search-results-title"><span class='search-results-count'></span> results matching "<span class='search-query'></span>"</h1>
|
|
358
|
-
<ul class="search-results-list"></ul>
|
|
359
|
-
|
|
360
|
-
</div>
|
|
361
|
-
<div class="no-results">
|
|
362
|
-
|
|
363
|
-
<h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
|
|
364
|
-
|
|
365
|
-
</div>
|
|
366
|
-
</div>
|
|
367
|
-
</div>
|
|
368
197
|
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
</div>
|
|
198
|
+
<script>
|
|
199
|
+
window.playground_copyable = true;
|
|
200
|
+
</script>
|
|
373
201
|
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
<a href="component.html" class="navigation navigation-prev " aria-label="Previous page: Ovto::Component">
|
|
377
|
-
<i class="fa fa-angle-left"></i>
|
|
378
|
-
</a>
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
<a href="middleware.html" class="navigation navigation-next " aria-label="Next page: Ovto::Middleware">
|
|
382
|
-
<i class="fa fa-angle-right"></i>
|
|
383
|
-
</a>
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
</div>
|
|
388
202
|
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
gitbook.page.hasChanged({"page":{"title":"Ovto::PureComponent","level":"1.4.5","depth":2,"next":{"title":"Ovto::Middleware","level":"1.4.6","depth":2,"path":"api/middleware.md","ref":"api/middleware.md","articles":[]},"previous":{"title":"Ovto::Component","level":"1.4.4","depth":2,"path":"api/component.md","ref":"api/component.md","articles":[]},"dir":"ltr"},"config":{"gitbook":"*","theme":"default","variables":{},"plugins":[],"pluginsConfig":{"highlight":{},"search":{},"lunr":{"maxIndexSize":1000000,"ignoreSpecialCharacters":false},"sharing":{"facebook":true,"twitter":true,"google":false,"weibo":false,"instapaper":false,"vk":false,"all":["facebook","google","twitter","weibo","instapaper"]},"fontsettings":{"theme":"white","family":"sans","size":2},"theme-default":{"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"showLevel":false}},"structure":{"langs":"LANGS.md","readme":"README.md","glossary":"GLOSSARY.md","summary":"SUMMARY.md"},"pdf":{"pageNumbers":true,"fontSize":12,"fontFamily":"Arial","paperSize":"a4","chapterMark":"pagebreak","pageBreaksBefore":"/","margin":{"right":62,"left":62,"top":56,"bottom":56}},"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"}},"file":{"path":"api/pure_component.md","mtime":"2020-02-10T04:33:15.000Z","type":"markdown"},"gitbook":{"version":"3.2.2","time":"2021-10-21T23:18:11.678Z"},"basePath":"..","book":{"language":""}});
|
|
393
|
-
});
|
|
394
|
-
</script>
|
|
395
|
-
</div>
|
|
203
|
+
<script src="../elasticlunr.min.js"></script>
|
|
204
|
+
<script src="../mark.min.js"></script>
|
|
205
|
+
<script src="../searcher.js"></script>
|
|
396
206
|
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
<script src="../gitbook/gitbook-plugin-search/search-engine.js"></script>
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
<script src="../gitbook/gitbook-plugin-search/search.js"></script>
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
<script src="../gitbook/gitbook-plugin-lunr/lunr.min.js"></script>
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
<script src="../gitbook/gitbook-plugin-lunr/search-lunr.js"></script>
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
<script src="../gitbook/gitbook-plugin-sharing/buttons.js"></script>
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
<script src="../gitbook/gitbook-plugin-fontsettings/fontsettings.js"></script>
|
|
423
|
-
|
|
424
|
-
|
|
207
|
+
<script src="../clipboard.min.js"></script>
|
|
208
|
+
<script src="../highlight.js"></script>
|
|
209
|
+
<script src="../book.js"></script>
|
|
425
210
|
|
|
211
|
+
<!-- Custom JS scripts -->
|
|
212
|
+
|
|
213
|
+
|
|
214
|
+
</div>
|
|
426
215
|
</body>
|
|
427
216
|
</html>
|
|
428
|
-
|