{"componentChunkName":"component---src-templates-blog-js","path":"/blog/2015/03/03/react-v0.13-rc2.html","result":{"data":{"markdownRemark":{"html":"<div class=\"scary\">\n<blockquote>\n<p>このブログはアーカイブされています。最新の記事は <a href=\"https://ja.react.dev/blog\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">ja.react.dev/blog</a> でご覧ください。</p>\n</blockquote>\n</div>\n<p>Thanks to everybody who has already been testing the release candidate. We’ve received some good feedback and as a result we’re going to do a second release candidate. The changes are minimal. We haven’t changed the behavior of any APIs we exposed in the previous release candidate. Here’s a summary of the changes:</p>\n<ul>\n<li>Introduced a new API (<code class=\"gatsby-code-text\">React.cloneElement</code>, see below for details).</li>\n<li>Fixed a bug related to validating <code class=\"gatsby-code-text\">propTypes</code> when using the new <code class=\"gatsby-code-text\">React.addons.createFragment</code> API.</li>\n<li>Improved a couple warning messages.</li>\n<li>Upgraded jstransform and esprima.</li>\n</ul>\n<p>The release candidate is available for download:</p>\n<ul>\n<li><strong>React</strong><br>\nDev build with warnings: <a href=\"https://fb.me/react-0.13.0-rc2.js\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">https://fb.me/react-0.13.0-rc2.js</a><br>\nMinified build for production: <a href=\"https://fb.me/react-0.13.0-rc2.min.js\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">https://fb.me/react-0.13.0-rc2.min.js</a>  </li>\n<li><strong>React with Add-Ons</strong><br>\nDev build with warnings: <a href=\"https://fb.me/react-with-addons-0.13.0-rc2.js\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">https://fb.me/react-with-addons-0.13.0-rc2.js</a><br>\nMinified build for production: <a href=\"https://fb.me/react-with-addons-0.13.0-rc2.min.js\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">https://fb.me/react-with-addons-0.13.0-rc2.min.js</a>  </li>\n<li><strong>In-Browser JSX transformer</strong><br>\n<a href=\"https://fb.me/JSXTransformer-0.13.0-rc2.js\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">https://fb.me/JSXTransformer-0.13.0-rc2.js</a></li>\n</ul>\n<p>We’ve also published version <code class=\"gatsby-code-text\">0.13.0-rc2</code> of the <code class=\"gatsby-code-text\">react</code> and <code class=\"gatsby-code-text\">react-tools</code> packages on npm and the <code class=\"gatsby-code-text\">react</code> package on bower.</p>\n<hr>\n<h2 id=\"reactcloneelement\"><a href=\"#reactcloneelement\" aria-hidden class=\"anchor\"><svg aria-hidden=\"true\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>React.cloneElement </h2>\n<p>In React v0.13 RC2 we will introduce a new API, similar to <code class=\"gatsby-code-text\">React.addons.cloneWithProps</code>, with this signature:</p>\n<div class=\"gatsby-highlight\" data-language=\"jsx\"><pre class=\"gatsby-code-jsx\"><code class=\"gatsby-code-jsx\">React<span class=\"token punctuation\">.</span><span class=\"token function\">cloneElement</span><span class=\"token punctuation\">(</span>element<span class=\"token punctuation\">,</span> props<span class=\"token punctuation\">,</span> <span class=\"token operator\">...</span>children<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span></code></pre></div>\n<p>Unlike <code class=\"gatsby-code-text\">cloneWithProps</code>, this new function does not have any magic built-in behavior for merging <code class=\"gatsby-code-text\">style</code> and <code class=\"gatsby-code-text\">className</code> for the same reason we don’t have that feature from <code class=\"gatsby-code-text\">transferPropsTo</code>. Nobody is sure what exactly the complete list of magic things are, which makes it difficult to reason about the code and difficult to reuse when <code class=\"gatsby-code-text\">style</code> has a different signature (e.g. in the upcoming React Native).</p>\n<p><code class=\"gatsby-code-text\">React.cloneElement</code> is <em>almost</em> equivalent to:</p>\n<div class=\"gatsby-highlight\" data-language=\"jsx\"><pre class=\"gatsby-code-jsx\"><code class=\"gatsby-code-jsx\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>element.type</span> <span class=\"token spread\"><span class=\"token punctuation\">{</span><span class=\"token operator\">...</span>element<span class=\"token punctuation\">.</span>props<span class=\"token punctuation\">}</span></span> <span class=\"token spread\"><span class=\"token punctuation\">{</span><span class=\"token operator\">...</span>props<span class=\"token punctuation\">}</span></span><span class=\"token punctuation\">></span></span><span class=\"token punctuation\">{</span>children<span class=\"token punctuation\">}</span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>element.type</span><span class=\"token punctuation\">></span></span></code></pre></div>\n<p>However, unlike JSX and <code class=\"gatsby-code-text\">cloneWithProps</code>, it also preserves <code class=\"gatsby-code-text\">ref</code>s. This means that if you get a child with a <code class=\"gatsby-code-text\">ref</code> on it, you won’t accidentally steal it from your ancestor. You will get the same <code class=\"gatsby-code-text\">ref</code> attached to your new element.</p>\n<p>One common pattern is to map over your children and add a new prop. There were many issues reported about <code class=\"gatsby-code-text\">cloneWithProps</code> losing the ref, making it harder to reason about your code. Now following the same pattern with <code class=\"gatsby-code-text\">cloneElement</code> will work as expected. For example:</p>\n<div class=\"gatsby-highlight\" data-language=\"jsx\"><pre class=\"gatsby-code-jsx\"><code class=\"gatsby-code-jsx\"><span class=\"token keyword\">var</span> newChildren <span class=\"token operator\">=</span> React<span class=\"token punctuation\">.</span>Children<span class=\"token punctuation\">.</span><span class=\"token function\">map</span><span class=\"token punctuation\">(</span><span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>props<span class=\"token punctuation\">.</span>children<span class=\"token punctuation\">,</span> <span class=\"token keyword\">function</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">child</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">return</span> React<span class=\"token punctuation\">.</span><span class=\"token function\">cloneElement</span><span class=\"token punctuation\">(</span>child<span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span> <span class=\"token literal-property property\">foo</span><span class=\"token operator\">:</span> <span class=\"token boolean\">true</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span></code></pre></div>\n<blockquote>\n<p>Note: <code class=\"gatsby-code-text\">React.cloneElement(child, { ref: 'newRef' })</code> <em>DOES</em> override the <code class=\"gatsby-code-text\">ref</code> so it is still not possible for two parents to have a ref to the same child, unless you use callback-refs.</p>\n</blockquote>\n<p>This was a critical feature to get into React 0.13 since props are now immutable. The upgrade path is often to clone the element, but by doing so you might lose the <code class=\"gatsby-code-text\">ref</code>. Therefore, we needed a nicer upgrade path here. As we were upgrading callsites at Facebook we realized that we needed this method. We got the same feedback from the community. Therefore we decided to make another RC before the final release to make sure we get this in.</p>\n<p>We plan to eventually deprecate <code class=\"gatsby-code-text\">React.addons.cloneWithProps</code>. We’re not doing it yet, but this is a good opportunity to start thinking about your own uses and consider using <code class=\"gatsby-code-text\">React.cloneElement</code> instead. We’ll be sure to ship a release with deprecation notices before we actually remove it so no immediate action is necessary.</p>","excerpt":"このブログはアーカイブされています。最新の記事は ja.react.dev/blog でご覧ください。 Thanks to everybody who has already been testing the release candidate. We’ve received some good feedback and as a result we’re going to do a second release candidate. The changes are minimal. We haven’t changed the behavior of any APIs we exposed in the previous release candidate. Here’s a summary of the changes: Introduced a new API (, see below for details). Fixed a bug related to validating  when using the new  API. Improved a couple…","frontmatter":{"title":"React v0.13 RC2","next":null,"prev":null,"author":[{"frontmatter":{"name":"Sebastian Markbåge","url":"https://twitter.com/sebmarkbage"}}]},"fields":{"date":"March 03, 2015","path":"content/blog/2015-03-03-react-v0.13-rc2.md","slug":"/blog/2015/03/03/react-v0.13-rc2.html"}},"allMarkdownRemark":{"edges":[{"node":{"frontmatter":{"title":"React Labs: 私達のこれまでの取り組み - 2022年6月版"},"fields":{"slug":"/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.html"}}},{"node":{"frontmatter":{"title":"React v18.0"},"fields":{"slug":"/blog/2022/03/29/react-v18.html"}}},{"node":{"frontmatter":{"title":"React 18 アップグレードガイド"},"fields":{"slug":"/blog/2022/03/08/react-18-upgrade-guide.html"}}},{"node":{"frontmatter":{"title":"React Conf 2021 振り返り"},"fields":{"slug":"/blog/2021/12/17/react-conf-2021-recap.html"}}},{"node":{"frontmatter":{"title":"React 18に向けてのプラン"},"fields":{"slug":"/blog/2021/06/08/the-plan-for-react-18.html"}}},{"node":{"frontmatter":{"title":"バンドルサイズゼロの React Server Components の紹介"},"fields":{"slug":"/blog/2020/12/21/data-fetching-with-react-server-components.html"}}},{"node":{"frontmatter":{"title":"React v17.0"},"fields":{"slug":"/blog/2020/10/20/react-v17.html"}}},{"node":{"frontmatter":{"title":"新しい JSX トランスフォーム"},"fields":{"slug":"/blog/2020/09/22/introducing-the-new-jsx-transform.html"}}},{"node":{"frontmatter":{"title":"React v17.0 Release Candidate: 新機能「なし」"},"fields":{"slug":"/blog/2020/08/10/react-v17-rc.html"}}},{"node":{"frontmatter":{"title":"React v16.13.0"},"fields":{"slug":"/blog/2020/02/26/react-v16.13.0.html"}}}]}},"pageContext":{"slug":"/blog/2015/03/03/react-v0.13-rc2.html"}},"staticQueryHashes":[]}