Merge pull request #2 from mobxjs/gh-pages

sync gh pages
ramybenaroya · Aug 15, 2018 · ba941b8 · ba941b8
2 parents 2b60911 + 90cb626
commit ba941b8
Show file tree

Hide file tree

Showing 45 changed files with 234 additions and 110 deletions.
diff --git a/best/actions.html b/best/actions.html
@@ -48,7 +48,7 @@
     <body>
 
 
-    <div class="book" data-level="5.2" data-basepath=".." data-revision="Thu Jun 07 2018 14:13:00 GMT+0200 (CEST)">
+    <div class="book" data-level="5.2" data-basepath=".." data-revision="Tue Aug 14 2018 15:53:18 GMT+0200 (CEST)">
 
 
 <div class="book-summary">
@@ -508,7 +508,7 @@
 
                             <b>6.6.</b>
 
-                        mobxUtis.fromResource
+                        mobxUtils.fromResource
                     </a>
 
 

diff --git a/best/decorators.html b/best/decorators.html
@@ -48,7 +48,7 @@
     <body>
 
 
-    <div class="book" data-level="8.3" data-basepath=".." data-revision="Thu Jun 07 2018 14:13:00 GMT+0200 (CEST)">
+    <div class="book" data-level="8.3" data-basepath=".." data-revision="Tue Aug 14 2018 15:53:18 GMT+0200 (CEST)">
 
 
 <div class="book-summary">
@@ -508,7 +508,7 @@
 
                             <b>6.6.</b>
 
-                        mobxUtis.fromResource
+                        mobxUtils.fromResource
                     </a>
 
 
@@ -899,7 +899,7 @@ <h1>
 }
 </code></pre>
 <p>Using the <code>decorate</code> utility:</p>
-<pre><code class="lang-javascript"><span class="hljs-keyword">import</span> { observable, computed, action } <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;mobx&quot;</span>;
+<pre><code class="lang-javascript"><span class="hljs-keyword">import</span> { observable, computed, action, decorate } <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;mobx&quot;</span>;
 
 <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Timer</span> </span>{
   start = <span class="hljs-built_in">Date</span>.now();
@@ -920,7 +920,7 @@ <h1>
   tick: action
 });
 </code></pre>
-<p>Note that the <code>observer</code> function from <code>mobx-react</code> is both a decorator and a function, that means that both all these syntax variants will work:</p>
+<p>Note that the <code>observer</code> function from <code>mobx-react</code> is both a decorator and a function, that means that all these syntax variants will work:</p>
 <pre><code class="lang-javascript">@observer
 <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Timer</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span> </span>{
     <span class="hljs-comment">/* ... */</span>

diff --git a/best/devtools.html b/best/devtools.html
@@ -48,7 +48,7 @@
     <body>
 
 
-    <div class="book" data-level="8.7" data-basepath=".." data-revision="Thu Jun 07 2018 14:13:00 GMT+0200 (CEST)">
+    <div class="book" data-level="8.7" data-basepath=".." data-revision="Tue Aug 14 2018 15:53:18 GMT+0200 (CEST)">
 
 
 <div class="book-summary">
@@ -508,7 +508,7 @@
 
                             <b>6.6.</b>
 
-                        mobxUtis.fromResource
+                        mobxUtils.fromResource
                     </a>
 
 
@@ -865,12 +865,12 @@ <h1>
 
                         <html><head></head><body><a id="edit-link" href="https://github.com/mobxjs/mobx/tree/gh-pages/docs/best/devtools.md" class="btn fa fa-edit pull-left">&#xA0;&#xA0;Edit This Page</a><h1 id="mobx-react-devtools"><a name="mobx-react-devtools" class="plugin-anchor" href="#mobx-react-devtools"><span class="fa fa-link"></span></a>MobX + React DevTools</h1>
 <p><a style="color: white; background:green;padding:5px;margin:5px;border-radius:2px" href="https://egghead.io/courses/manage-complex-state-in-react-apps-with-mobx" target="_blank">egghead.io lesson 2: devtools</a></p>
-<p>MobX ships with DevTools that can be used to track the rendering behavior and data depenencies of your app.</p>
+<p>MobX ships with DevTools that can be used to track the rendering behavior and data dependencies of your app.</p>
 <p><img src="../images/devtools.gif" alt="devtools"></p>
 <h2 id="usage"><a name="usage" class="plugin-anchor" href="#usage"><span class="fa fa-link"></span></a>Usage:</h2>
 <p>Install:</p>
 <p><code>npm install mobx-react-devtools</code></p>
-<p>To enable devtools, import and render the devtools somewhere in your code-base.</p>
+<p>To enable devtools, import and render the devtools somewhere in your codebase.</p>
 <pre><code class="lang-JS"><span class="hljs-keyword">import</span> DevTools <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;mobx-react-devtools&apos;</span>
 
 const App = () =&gt; (

diff --git a/best/pitfalls.html b/best/pitfalls.html
@@ -48,7 +48,7 @@
     <body>
 
 
-    <div class="book" data-level="8.2" data-basepath=".." data-revision="Thu Jun 07 2018 14:13:00 GMT+0200 (CEST)">
+    <div class="book" data-level="8.2" data-basepath=".." data-revision="Tue Aug 14 2018 15:53:18 GMT+0200 (CEST)">
 
 
 <div class="book-summary">
@@ -508,7 +508,7 @@
 
                             <b>6.6.</b>
 
-                        mobxUtis.fromResource
+                        mobxUtils.fromResource
                     </a>
 
 
@@ -1041,6 +1041,43 @@ <h4 id="rendering-listviews-in-react-native"><a name="rendering-listviews-in-rea
 <p>For more info see <a href="https://github.com/mobxjs/mobx/issues/476" target="_blank">#476</a></p>
 <h4 id="declaring-proptypes-might-cause-unnecessary-renders-in-dev-mode"><a name="declaring-proptypes-might-cause-unnecessary-renders-in-dev-mode" class="plugin-anchor" href="#declaring-proptypes-might-cause-unnecessary-renders-in-dev-mode"><span class="fa fa-link"></span></a>Declaring propTypes might cause unnecessary renders in dev mode</h4>
 <p>See: <a href="https://github.com/mobxjs/mobx-react/issues/56" target="_blank">https://github.com/mobxjs/mobx-react/issues/56</a></p>
+<h4 id="don-t-decorate-some-react-lifecycle-methods-as-action-bound-on-observer-react-components"><a name="don-t-decorate-some-react-lifecycle-methods-as-action-bound-on-observer-react-components" class="plugin-anchor" href="#don-t-decorate-some-react-lifecycle-methods-as-action-bound-on-observer-react-components"><span class="fa fa-link"></span></a>Don&apos;t decorate (some) React lifecycle methods as <code>action.bound</code> on <code>Observer</code> React components</h4>
+<p>As mentioned above, all React components which used observable data should be marked as <code>@observer</code> Additionally, if you are going to be modifying any observable data in a function in your React component, that function should be marked as <code>@action</code>. Additionally, if you want <code>this</code> to refer to the instance of your component class, you should use <code>@action.bound</code>. Consider the following class:</p>
+<pre><code class="lang-js"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">ExampleComponent</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span> </span>{
+  @observable disposer <span class="hljs-comment">// &lt;--- this value is disposed in addActed</span>
+
+  @action.bound
+  addActed() {
+    <span class="hljs-keyword">this</span>.dispose()
+  }
+
+  @action.bound
+  componentDidMount() {
+    <span class="hljs-keyword">this</span>.disposer = <span class="hljs-keyword">this</span>.observe(....) <span class="hljs-comment">//&lt;-- details don&apos;t matter</span>
+  }
+}
+</code></pre>
+<p>If you call <code>addActed()</code> on a mounted <code>ExampleComponent</code>, the disposer is called.</p>
+<p>On the other hand, consider the following:</p>
+<pre><code class="lang-js"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">ExampleComponent</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span> </span>{
+  @observable disposer <span class="hljs-comment">// &lt;--- this value is disposed in addActed</span>
+
+  @action.bound
+  componentWillUnmount() {
+    <span class="hljs-keyword">this</span>.dispose()
+  }
+
+  @action.bound
+  componentDidMount() {
+    <span class="hljs-keyword">this</span>.disposer = <span class="hljs-keyword">this</span>.observe(....) <span class="hljs-comment">//&lt;-- details don&apos;t matter</span>
+  }
+}
+</code></pre>
+<p>In this case, your <code>disposer</code> will never be called! The reason is that the mixin for making the <code>ExampleComponent</code> an <code>observer</code>, the modifies the <code>componentWillUnmount</code> function which changes <code>this</code> to an unexpected <code>React.Component</code> instance (don&apos;t know which one). To work around this, declare<code>componentWillUnmount()</code> as follows:</p>
+<pre><code class="lang-js">componentWillUnmount() {
+  runInAction(() =&gt; <span class="hljs-keyword">this</span>.dispose())
+}
+</code></pre>
 </body></html>
 
                     </section>

diff --git a/best/react-performance.html b/best/react-performance.html
@@ -48,7 +48,7 @@
     <body>
 
 
-    <div class="book" data-level="8.6" data-basepath=".." data-revision="Thu Jun 07 2018 14:13:00 GMT+0200 (CEST)">
+    <div class="book" data-level="8.6" data-basepath=".." data-revision="Tue Aug 14 2018 15:53:18 GMT+0200 (CEST)">
 
 
 <div class="book-summary">
@@ -508,7 +508,7 @@
 
                             <b>6.6.</b>
 
-                        mobxUtis.fromResource
+                        mobxUtils.fromResource
                     </a>
 
 

diff --git a/best/react.html b/best/react.html
@@ -48,7 +48,7 @@
     <body>
 
 
-    <div class="book" data-level="4.6" data-basepath=".." data-revision="Thu Jun 07 2018 14:13:00 GMT+0200 (CEST)">
+    <div class="book" data-level="4.6" data-basepath=".." data-revision="Tue Aug 14 2018 15:53:18 GMT+0200 (CEST)">
 
 
 <div class="book-summary">
@@ -508,7 +508,7 @@
 
                             <b>6.6.</b>
 
-                        mobxUtis.fromResource
+                        mobxUtils.fromResource
                     </a>
 
 

diff --git a/best/store.html b/best/store.html
@@ -48,7 +48,7 @@
     <body>
 
 
-    <div class="book" data-level="8.5" data-basepath=".." data-revision="Thu Jun 07 2018 14:13:00 GMT+0200 (CEST)">
+    <div class="book" data-level="8.5" data-basepath=".." data-revision="Tue Aug 14 2018 15:53:18 GMT+0200 (CEST)">
 
 
 <div class="book-summary">
@@ -508,7 +508,7 @@
 
                             <b>6.6.</b>
 
-                        mobxUtis.fromResource
+                        mobxUtils.fromResource
                     </a>
 
 

diff --git a/best/trace.html b/best/trace.html
@@ -48,7 +48,7 @@
     <body>
 
 
-    <div class="book" data-level="8.4" data-basepath=".." data-revision="Thu Jun 07 2018 14:13:00 GMT+0200 (CEST)">
+    <div class="book" data-level="8.4" data-basepath=".." data-revision="Tue Aug 14 2018 15:53:18 GMT+0200 (CEST)">
 
 
 <div class="book-summary">
@@ -508,7 +508,7 @@
 
                             <b>6.6.</b>
 
-                        mobxUtis.fromResource
+                        mobxUtils.fromResource
                     </a>
 
 
@@ -884,7 +884,7 @@ <h2 id="usage-examples"><a name="usage-examples" class="plugin-anchor" href="#us
 @observer
 class MyComponent extends React.Component {
     render() {
-        trace(true) // enter the debugger whenever an observable value causes this comonent to re-run
+        trace(true) // enter the debugger whenever an observable value causes this component to re-run
         return &lt;div&gt;{this.props.user.name}&lt;/name&gt;
     }
 }