Facebook/react
1
0
Fork 0
mirror of https://github.com/facebook/react.git synced 2025-11-01 09:12:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

4d90b9bdf3 and #3255

Browse Source
This commit is contained in:
Paul O’Shannessy
2015-02-24 12:48:57 -08:00
parent 331320b80b
commit 33f553da2c
3 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
blog/2015/02/24/streamlining-react-elements.html
+2 -2
View File
@@ -108,7 +108,7 @@
</code></pre></div>
<p>The problem is that we don’t have a convenient way to tell when you’re done mutating.</p>
<h3><a class="anchor" name="problem-mutating-props-you-dont-own"></a>Problem: Mutating Props You Don’t Own <a class="hash-link" href="#problem-mutating-props-you-dont-own">#</a></h3>
<p>If you mutate something, you destroy the original value. Therefore, there is nothing to diff against. Imaging something like this:</p>
<p>If you mutate something, you destroy the original value. Therefore, there is nothing to diff against. Imagine something like this:</p>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">element</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">child</span><span class="p">;</span>
<span class="nx">element</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">count</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">count</span><span class="p">;</span>
<span class="k">return</span> <span class="nx">element</span><span class="p">;</span>
@@ -199,7 +199,7 @@
<p>In 0.13 we introduced a new callback-refs API that doesn’t suffer from these problems but we’ll keep on a nice declarative alternative to the current semantics for refs. As always, we won’t deprecate something until we’re sure that you’ll have a nice upgrade path.</p>
<h2><a class="anchor" name="keyed-objects-as-maps"></a>Keyed Objects as Maps <a class="hash-link" href="#keyed-objects-as-maps">#</a></h2>
<p>In React 0.12, and earlier, you could use keyed objects to provide an external key to an element or a set. This pattern isn’t actually widely used. It shouldn’t be an issue for most of you.</p>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="o">&lt;</span><span class="nx">div</span><span class="o">&gt;&lt;</span><span class="err">/div&gt;</span>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="o">&lt;</span><span class="nx">div</span><span class="o">&gt;</span><span class="p">{</span> <span class="p">{</span><span class="nx">a</span><span class="o">:</span> <span class="o">&lt;</span><span class="nx">span</span> <span class="o">/&gt;</span><span class="p">,</span> <span class="nx">b</span><span class="o">:</span> <span class="o">&lt;</span><span class="nx">span</span> <span class="o">/&gt;</span><span class="p">}</span> <span class="p">}</span><span class="o">&lt;</span><span class="err">/div&gt;</span>
</code></pre></div><h3><a class="anchor" name="problem-relies-on-enumeration-order"></a>Problem: Relies on Enumeration Order <a class="hash-link" href="#problem-relies-on-enumeration-order">#</a></h3>
<p>The problem with this pattern is that it relies on enumeration order of objects. This is technically unspecified, even though implementations now agree to use insertion order. Except for the special case when numeric keys are used.</p>
<h3><a class="anchor" name="problem-using-objects-as-maps-is-bad"></a>Problem: Using Objects as Maps is Bad <a class="hash-link" href="#problem-using-objects-as-maps-is-bad">#</a></h3>
blog/index.html
+2 -2
View File
@@ -108,7 +108,7 @@
</code></pre></div>
<p>The problem is that we don’t have a convenient way to tell when you’re done mutating.</p>
<h3><a class="anchor" name="problem-mutating-props-you-dont-own"></a>Problem: Mutating Props You Don’t Own <a class="hash-link" href="#problem-mutating-props-you-dont-own">#</a></h3>
<p>If you mutate something, you destroy the original value. Therefore, there is nothing to diff against. Imaging something like this:</p>
<p>If you mutate something, you destroy the original value. Therefore, there is nothing to diff against. Imagine something like this:</p>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">element</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">child</span><span class="p">;</span>
<span class="nx">element</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">count</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">count</span><span class="p">;</span>
<span class="k">return</span> <span class="nx">element</span><span class="p">;</span>
@@ -199,7 +199,7 @@
<p>In 0.13 we introduced a new callback-refs API that doesn’t suffer from these problems but we’ll keep on a nice declarative alternative to the current semantics for refs. As always, we won’t deprecate something until we’re sure that you’ll have a nice upgrade path.</p>
<h2><a class="anchor" name="keyed-objects-as-maps"></a>Keyed Objects as Maps <a class="hash-link" href="#keyed-objects-as-maps">#</a></h2>
<p>In React 0.12, and earlier, you could use keyed objects to provide an external key to an element or a set. This pattern isn’t actually widely used. It shouldn’t be an issue for most of you.</p>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="o">&lt;</span><span class="nx">div</span><span class="o">&gt;&lt;</span><span class="err">/div&gt;</span>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="o">&lt;</span><span class="nx">div</span><span class="o">&gt;</span><span class="p">{</span> <span class="p">{</span><span class="nx">a</span><span class="o">:</span> <span class="o">&lt;</span><span class="nx">span</span> <span class="o">/&gt;</span><span class="p">,</span> <span class="nx">b</span><span class="o">:</span> <span class="o">&lt;</span><span class="nx">span</span> <span class="o">/&gt;</span><span class="p">}</span> <span class="p">}</span><span class="o">&lt;</span><span class="err">/div&gt;</span>
</code></pre></div><h3><a class="anchor" name="problem-relies-on-enumeration-order"></a>Problem: Relies on Enumeration Order <a class="hash-link" href="#problem-relies-on-enumeration-order">#</a></h3>
<p>The problem with this pattern is that it relies on enumeration order of objects. This is technically unspecified, even though implementations now agree to use insertion order. Except for the special case when numeric keys are used.</p>
<h3><a class="anchor" name="problem-using-objects-as-maps-is-bad"></a>Problem: Using Objects as Maps is Bad <a class="hash-link" href="#problem-using-objects-as-maps-is-bad">#</a></h3>
feed.xml
+2 -2
View File
@@ -21,7 +21,7 @@
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;The problem is that we don’t have a convenient way to tell when you’re done mutating.&lt;/p&gt;
&lt;h3&gt;&lt;a class=&quot;anchor&quot; name=&quot;problem-mutating-props-you-dont-own&quot;&gt;&lt;/a&gt;Problem: Mutating Props You Don’t Own &lt;a class=&quot;hash-link&quot; href=&quot;#problem-mutating-props-you-dont-own&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;If you mutate something, you destroy the original value. Therefore, there is nothing to diff against. Imaging something like this:&lt;/p&gt;
&lt;p&gt;If you mutate something, you destroy the original value. Therefore, there is nothing to diff against. Imagine something like this:&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;element&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;this&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;props&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;child&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;element&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;props&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;count&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;this&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;state&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;count&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;k&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;element&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
@@ -112,7 +112,7 @@
&lt;p&gt;In 0.13 we introduced a new callback-refs API that doesn’t suffer from these problems but we’ll keep on a nice declarative alternative to the current semantics for refs. As always, we won’t deprecate something until we’re sure that you’ll have a nice upgrade path.&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;keyed-objects-as-maps&quot;&gt;&lt;/a&gt;Keyed Objects as Maps &lt;a class=&quot;hash-link&quot; href=&quot;#keyed-objects-as-maps&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;In React 0.12, and earlier, you could use keyed objects to provide an external key to an element or a set. This pattern isn’t actually widely used. It shouldn’t be an issue for most of you.&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;div&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;/div&amp;gt;&lt;/span&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;div&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;a&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;span&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;/&amp;gt;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;b&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;span&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;/&amp;gt;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;/div&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h3&gt;&lt;a class=&quot;anchor&quot; name=&quot;problem-relies-on-enumeration-order&quot;&gt;&lt;/a&gt;Problem: Relies on Enumeration Order &lt;a class=&quot;hash-link&quot; href=&quot;#problem-relies-on-enumeration-order&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;The problem with this pattern is that it relies on enumeration order of objects. This is technically unspecified, even though implementations now agree to use insertion order. Except for the special case when numeric keys are used.&lt;/p&gt;
&lt;h3&gt;&lt;a class=&quot;anchor&quot; name=&quot;problem-using-objects-as-maps-is-bad&quot;&gt;&lt;/a&gt;Problem: Using Objects as Maps is Bad &lt;a class=&quot;hash-link&quot; href=&quot;#problem-using-objects-as-maps-is-bad&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;