2016年4月7日（木）に待望のメジャーバージョンとなる「React v15.0」がリリースされました。昨年10月にリリースされたv0.14からの大幅なバージョンアップとなります。前回のv0.14の時もリリースノートを翻訳してみましたが、今回もかなりボリュームがあり苦戦することが予想されましたが、懲りずに日本語に訳してみました。いつものことですが、Google翻訳よりはマシだと思いますので、おかしな訳の部分もあるかと思いますが参考にしていただければと思います。
当記事は以下のページを日本語に翻訳したものとなります。
ちなみに、v0.14からv15.0に大きくバージョン数を上げた経緯については以下をご参照ください。
React v15.0
April 7, 2016 by Dan Abramov
We would like to thank the React community for reporting issues and regressions in the release candidates on our issue tracker. Over the last few weeks we fixed those issues, and now, after two release candidates, we are excited to finally release the stable version of React 15.
issueとissue tracker上のRC版におけるregressionを報告してくれたReactコミュニティーに感謝します。この数週間でわれわれはこれらの問題をフィックスし、そして今、2つのRC版の後、ついにReact 15の安定版をリリースできたことに興奮しています。
As a reminder, we’re switching to major versions to indicate that we have been using React in production for a long time. This 15.0 release follows our previous 0.14 version and we’ll continue to follow semver like we’ve been doing since 2013. It’s also worth noting that we no longer actively support Internet Explorer 8. We believe React will work in its current form there but we will not be prioritizing any efforts to fix new issues that only affect IE8.
まず覚えておいて欲しいこととして、Reactが長い間プロダクションで使われてきたということを示すためにメジャーバージョンに切り替えています。この15.0のリリースは前バージョンのv0.14を追従しており、2013年以降行ってきたようなsemver（セマンティック バージョニング）を追従していくことを継続していきます。ついでに言うと、もはや積極的にIE8をサポートすることはありません。Reactは現行のformでしっかり動くはずです。ただIE8にのみ影響を及ぼす新しいissueをfixするために優先的に労力を費やすということはなくなります。
React 15では、どのようにDOMを扱うかにおいて大きな改良が行われています。 コンポーネントをマウントする際にinnerHTMLを使う代わりにdocument.createElementを使うようになっています。これによって、すべてのNode上のdata-reactid属性が取り除かれ、DOMがより軽くなります。またdocument.createElementを使うことで、モダンブラウザ上でより高速となり、SVG属性に関連するいくつかの特別な問題や同一ページにおけるReatの連続した複数コピーにも対応します。 これまでSVGのサポートは完全ではなく、多くのタグや属性が対応していませんでした。そうした声を聞き、React 15では、最新のブラウザで認識されるSVGのすべての属性のサポートを追加しました。もしそれでも使いたい属性が追加されていなかった場合は、お知らせください。document.createElementを使うことで、もはやSVG要素のリストをメンテナンスする必要はありません。そうです、以前のバージョンではサポートされていなかったSVGタグはReact 15でしっかり動くようになっています。 このリリースにおいてコミュニティからいくつかの驚くべき貢献をいただきました。特にMichael Wiencek氏によるこのpull requestを紹介しておきたいです。このMichael氏の仕事のおかげで、React 15はもはやテキストを囲むための余計な<span>要素を吐かなくなり、出力されるDOMはとてもキレイになりました。これはReactユーザーにとって長年の厄介ごとでした。このように外部からの貢献を受け入れたことにとても興奮しています。 このリリースには直接関係ありませんが、Michael氏のように他の多くのコミュニティの貢献を受けるために、よりオープンにわれわれの目的と優先順位についてコミュニケーションし、より決定的にプルリクエストを受ける必要があります。これに対する最初のステップとして、再びReact core team weekly meeting notesの公開をスタートしました。またReactの将来の開発において外部の貢献者がより見識と影響力を持てるように、Ember RFCsによって起こされたRFCプロセスを紹介することを目指します。ブログ上で最新の情報をお届けしていきます。 この投稿において新しいchangelogを試しています。各変更ごとに対応したプリリクエストとその著者のメンションへのリンクを設けています。便利になったかどうかお知らせください。 メジャーリリースにはよくあることですが、React 15はReact 0.14における９ヶ月前に非推奨とされたいくつかのパターンのサポートを取り除いています。変更には痛みを伴うことを知っているので（Facebookのコードには20,000を超えるReactのコンポーネントがあります。React Nativeに関しては数えてもいません）、われわれは常に痛みが最小で済むように少しずつ変更を加えていくように努めています。 React 0.14で書いたコードにおいて警告が出ないのであれば、アップグレードは簡単です。このリリースにおける変更は、ReactがDOMを扱う方法に関することなどほとんどが裏側のものとなっています。他の大きな変更としては、SVG要素や属性の全範囲をサポートしたということです。その他に、たくさんの改善点や開発者の援助用に追加した警告があります。また将来のリリースにおいて新しい性能をもたらせるように、コアな部分における基礎研究を進めています。 より詳細については、以下のchengelogを見てください。 npm経由でReactを利用し、browserifyやwebpackのようなツールを使ってコードを一つのバンドルにビルドすることを推奨します。2つのパッケージをインストールします。 デフォルトでは、Reactは特別なチェックを実行し、ディペロップメントモードにおいて助けとなる警告を出しているということを忘れないでください。アプリをデプロイする際は、開発用の警告を含めず、著しくより高速に動くReactの製品版（プロダクション・ビルド）を使用するために、NODE_ENV環境変数をproductionにセットしてください。 まだnpmをうまく使えない方のために、reactパッケージ内でも利用できるビルド済みのブラウザ版をbower上で便宜的に提供しています。 DOMの扱いにおいていくつかの大きな変更があります。もっとも注目すべき変更点の一つは、各DOMノードにdata-reactid属性を付与しなくなったことです。この変更によりウェブサイトがReactを使っているかどうかを知ることがより難しくなりますが、DOMがかなり軽量になるという利点があります。この変更は、初期renderにおいてdocument.createElementの使用を可能にしてくれました。以前のバージョンではHTMLの大きな文字列を生成し、node.innerHTMLを使って流し込んでいました。その時はサポートされたブラウザや多くのケースのことを踏まえてdocument.createElementを使うことよりも速くなることが重視されました。ブラウザは改善され続けています。なのでこれはもはや圧倒的に真実ではなくなっています。createElementを使うことによって、Reactの他の部分を速くすることができます。idはイベントが対応したReactコンポーネントを探すために使われました。これはデータを大量にキャッシュしていたにもかかわらず、各イベントごとに大量の処理を行わなければならなかったということを意味しています。われわれが経験してきたこととして、キャッシュすることと特にキャッシュを無効にすることは、エラーが出やすいということで、結果として数年間issueを再現することの難しさを多く見てきました。今回のバージョンではすでにnode上にハンドルを持つようになったため、レンダリング時に直接マッピング情報を持たせることができます。 注意: data-reactidはサーバー上でレンダリングされたコンテンツには未だに表示されます。しかしながら、それは以前よりかなり少なくなっており、単に自動で増加するカウンターとなります。 もう一つの大きなDOMの扱いに関する変更は、どのようにテキストのブロックをレンダリングするかということです。以前のバージョンにおいて、Reactは大量の余計な<span>をレンダリングしていました。例えば、最もベーシックな<div>Hello {this.props.name}</div>をレンダリングするホームーページの事例において、結果として生じるマークアップには2つの<span>が含まれていました。今回のバージョンでは、区分のために使われるコメントノードと一緒に点在するプレーンなテキストノードをレンダリングします。これにより、余計なネストされたノードを生成することなく、個々のテキストの断片をアップデートできるようになります。ここで生成された実際のマークアップに依存していた人は極少数なので、おそらく影響されることはないでしょう。しかし、あなたがこれらの<span>をCSSのターゲットにしていた場合、適宜調整する必要があります。あなたは常にコンポーネントにおいて、それらを明白にレンダリングできます。
それから戻り値がnullの時にレンダリングするものを変更し、コメントノードを使用するようにしました。nullとしてレンダリングすることはReact 0.11で追加された仕様で、<noscript>要素をrenderすることによって実行されました。今回のバージョンになりコメントノードをレンダリングすることによって、特に:nth-childセレクターを使っていた場合となりますが、いくつかのCSSが間違ったものをターゲットにしている可能性が出てきます。Reactで<noscript>タグを使用することは、常にどのようにReactがDOMをターゲットしているかということから実装の詳細が決定されてきました。依存されるべきでない詳細であるから、微妙な違いについて詳細を説明する警告を出すようにリリースしていませんが、これらは安全な変更であると信じています。加えて、多くの代表的なアプリケーションのためにこれらの変更がReactのパフォーマンスを改善してきたことを確認しています。 React 0.14で関数としてstateless componentsを定義できるようになりました。しかし、React 0.14では未だにReact.Componentを拡張することやReact.createClass()を使うことなくclassコンポーネントを定義することを許していました。なので、コンポーネントが関数なのか、classなのか確実に判別することができなく、stateless componentsからnullを返すことができませんでした。このissueはReact 15で解決され、classであろうと関数であろうと、どんなコンポーネントからでもnullを返せるようになりました。 すべてのSVGのタグは今回のバージョンで完全にサポートされました。（一般的でないSVGのタグはReacr.DOM要素のhelperにはないですが、JSXやReact.createElementはすべてのタグ名で動きます。）ブラウザによって実行されるすべてのSVGの属性もまたサポートされるべきです。もし見逃している属性がありましたら、このissueでお知らせください。
何度も大声で言いたいことは、なんといってもDOM構造の変更です。特に<span>からの変更です。Facebookのコードを更新している中で、Reactが生成したマークアープに依存しているコードを、とても少ない量ですが見つけました。これらのケースのいくつかは、ターゲットノードに対してとても特殊なxpathクエリが実行されていたWebDriverのような統合テストでした。他はReactDOM.renderToStaticMarkupを使い、マークアップを比較しているシンプルなテストでした。また、行わなければならなかったいくつかの小さな変更がありましたが、誰かを端に追いやることはしたくありません。アップグレードした際はテストスイートを動かし、可能であれば代わりとなるアプローチを検討することを推奨します。いくつかのケースで動かすひとつのアプローチはrenderメソッドにおいて明示的に<span>を使うことです。 React.cloneElement()にあったいくつかのコンポーネントは依存されるかもしれないというバグをfixしました。cloneElement()によって受け取ったpropsのいくつかがundefinedだった場合、それらのpropsのためにundefinedな値で要素を返すようになっていました。React 15では、createElement()と矛盾しないようにcloneElement()を変更しました。cloneElement()に渡されたundefinedなpropsは一致するコンポーネントのdefaultPropsで解決されます。Facebookの20,000あるReactコンポーネントの一つは、このバグによって悪影響を受けました。なので、他のリリースサイクルのために古い振る舞いをキープさせずにこの変更をリリースすることは気持ちがいいです。 この変更はアプリケーションに影響を与えませんが、いくつかのサードパーティのツールに影響を与えるかもしれません。われわれはReactPerfの実装を改善しており、15.xのサイクルの中でリリースすることを計画しています。内部のパフォーマンスの測定フォーマットはそのように変更される可能性があります。さしあたって、われわれはReactPerf.getLastMeasurements()の戻り値のvalueを、依存されるべきでない不明瞭なデータ構造から決定します。 これらの非推奨項目は9か月前のv0.14にてお知らせしたように警告が出るようになり、この度削除されます。 非推奨だったAPI（findDOMNode, render, renderToString, renderToStaticMarkup, unmountComponentAtNode）はReactのtop-levelのexportから削除されました。ただし、これらはReactDOMとReactDOMServerで現在も使用可能です。 非推奨だったaddon（batchedUpdates, cloneWithProps）は削除されました。 非推奨のコンポーネントのインスタンスメソッド（setProps, replaceProps, getDOMNode）は削除されました。 非推奨のCommonJSにおけるreact/addonsというエントリーポイントは削除されました。その代わりに別のreact-addons-*パッケージを使うようにしてください。もしCommonJSのビルドを使用している場合、これのみが適用されます。 <input>のようなvoid要素（空要素）にchildrenを渡すことは非推奨となり、errorが投げられるようになりました。
DOMのrefsにおけるReact特有のプロパティ（例えば、this.refs.div.props）は非推奨となっていましたが、削除されました。 これらの各変更は新たに警告が出るようになりますが、今後もReact v16のリリースまで動き続けます。従いまして、徐々にコードをアップグレードしていってください。 LinkedStateMixinとvalueLinkはほとんど使われていないため非推奨となりました。これらが必要な場合、同じような振る舞いを実装しているラッパーコンポーネント（react-linked-input）を使用してください。 将来のバージョンのReactは、inputをクリアするためのリクエストとして<input value={null}>を用いる予定です。しかし、React v0.14はvalue={null}を無視するようになっています。React v15では、inputのvalueがnullだった場合は警告を出し、あなたの意図を明確にするように言ってきます。警告をfixするために、コントロールされたinputをクリアするために空の文字列をちゃんと渡すか、inputをコントロールされないようにundefinedを渡す必要があります。 ReactPerf.printDOM()はReactPerf.printOperations()にリネームされ、ReactPerf.getMeasurementsSummaryMap()はReactPerf.getWasted()にリネームされました。 あなたがdevelopmentビルドをミニファイしたコピーを使用していた場合、React DOMは親切なことに代わりに高速なproductionビルドを使用するように言ってくれるようになりました。 React DOMにおいて、文字列として単位のないCSSのvalueを指定する時、将来のバージョンでは自動でpxをつけなくなります。今回のバージョンではこのケースの場合（例えば、style={{width: ‘300’}}と書いた時）、警告が出るようになりました。width: 300のような単位のない数字のvalueについては、変更はありません。 イベントがpoolにリターンされた後のアクセスにおける警告はもちろんですが、Synthetic Eventsに（適切にクリアされない）プロパティをセットしたり、アクセスしたりした際に警告が出るようになりました。 propsからElementのrefやkeyを読もうとすると警告が出るようになりました。 constructorのsuper()に異なったpropsのオブジェクトを渡すと、Reactが警告を出すようになりました。 getChildContext()の中でsetState()を呼び出すと、Reactが警告を出すようになりました。 onClickとすべきところをonclickと書くなど、DOM要素のおけるイベントハンドラーのミスタイプに対してReactDOMが警告を出すようになりました。 styleにおけるNaNなvalueに対してReactDOMが警告を出すようになりました。
inputにvalueとdefaultValueの両方を指定するとReactDOMが警告を出すようになりました。
inputがコントロールされた状態とされていない状態から切り替わると、ReactDOMが警告を出すようになりました。
Reactで必要のないonFocusInやonFocusOutなどのハンドラーを指定すると、ReactDOMが警告を出すようになりました
ReactDOM.render()、this.setState()、this.forceUpdate()の最後の引数としてinvalidなcallbackを渡すと、Reactが説明的なエラーを出すようになりました。
Add-onsにおいて、shallow renderingでTestUtils.Simulate()を使おうとすると、助けとなるメッセージを出すようになりました。
PropTypesにおいて、arrayOf()やobjectOf()はinvalidな引数に対してよりよいエラーメッセージを出すようになりました。
多数の小さなメモリリークを修正しました。
IE10やIE11においてより確実にinputイベントがハンドルされるようになりました。placeholderを使った時に偽のイベントはもはや発火しません。
componentWillReceiveProps()ライフサイクルメソッドはcontextに変更があった際に一貫して呼び出されるようになりました。
React.cloneElement()は内部でReact.Children.map()が使われる時に既存のkeyにスラッシュをつけなくなりました。
React DOMはHTML属性のciteとprofileをサポートしました。
React DOMはCSSプロパティのcssFloat、gridRow、gridRowをサポートしました。
React DOMは単位のないCSSプロパティとしてborderImageOutset, borderImageWidth, borderImageSlice, floodOpacity, strokeDasharray, strokeMiterlimitを正しくハンドリングするようになりました。
React DOMは、onAnimationStart, onAnimationEnd, onAnimationIteration, onTransitionEnd, onInvalidのイベントをサポートしました。onLoadのサポートはobject要素に追加されています。
React DOMにおいてプロパティの代わりにDOM属性をデフォルトで使うようになりました、それによりいくつかのエッジケースなバグが修正されました。さらにvalue（例えば、href={null}）のnull化は、効果的な除去という結果をもたらし、valueがない状態においてブラウザによって使用されるデフォルトのvalueをセットしないようになりました。
React DOMが誤ってchildrenをWeb Componentsのためにstringsとして扱わないようにしました。
React DOMが正しくSVGの<use>イベントを標準化するようになりました。
<select>がonChangeハンドラーの実行時にunmountされなかったとしても、React DOMがthrowしないようにしました。
React DOMがWindwos 8のアプリケーションでthrowしないようにしました。
React DOMが非同期的にrefと一緒にchildをunmountしても、throwしないようにしました。
React DOMがscroll position trackingのために強制的に同期レイアウトをしないようにしました。
Object.isはvalueを比較するためにいくつかの場所で使われるようになりました。これにより特にNaNなどにおける、false positivesが少なくなります。とりわけこれはshallowCompareアドオンへの影響が大きいです。
Add-Onsにおいて、ReactPerfはもはやイベントリスナーを追加したり、削除したりしなくなりました。なぜなら、それらは実際はイベントのdelegationのためにDOMに触れていないからです。
Reactはenvifyの代わりにloose-envifyを使うようになりました。従いまして、推移従属性の少ない状態でインストールできるようになりました。
Shallow rendererにgetMountedInstance()が追加されました。
Shallow rendererがrender()の戻り値としてレンダリングされたoutputをreturnするようになりました。
Reactは古い環境におけるObject.createやObject.freezeのためにES5 shamsに依存しなくなりました。しかし、それらの環境においてES5 shimsを今でも必要とします。
React DOMにおいて、数字で始まる名前を持ったdata-属性が許可されるようになりました。
React DOMに意図的にReactのcontentEditableなchildrenを管理するDraft.jsのようなコンポーネントのために新しいsuppressContentEditableWarning propが追加されました。
複雑な仕様におけるReactのcreateClass()のパフォーマンスを改善しました。 React v15.0のリリース当日にバグが見つかったみたいで、早くも翌日にv15.0.1がリリースされました。ついでにこちらの変更点も載せておきます。
このドキュメントされていないAPIを使っているいくつかのツールでコンパイルされたコードを壊さないようにReact.__spread APIを修復しました。公式に非推奨となります。 コントロールされたinputにおいてカーソルのpositionがなくなってしまう問題を修正しました。 以上、React v15.0のリリースノートの和訳となります。表現のおかしな部分や誤訳などありましたら、ご指摘いただけると幸いです。 今回は、前回のv0.14から大きくバージョン数を上げてメジャーバージョンとなるv15.0となりましたが、前回のバージョンからそれほど大きな変更はなくホッとしているところです。今回のバージョンアップは内部的な変更がメインとなっていますね。大きなところでは、Reactの吐き出すコードにidが付与されなくなったことだったり、Reactの吐き出すテキストのブロックにspan要素が含まれなくなったことだったり、パフォーマンス面に大きくフィーチャーしたバージョンアップでした。 それから、これまでspanやnoscriptとして吐き出されていた部分がが、コメントノードに置き換わるので、それらの要素をCSSのターゲットにしていた場合は注意が必要です。それから、v0.14まで非推奨となっていたAPIやアドオンなどは、今回のバージョンで削除されたので、これらのAPIやアドオンなどを使っていた場合は注意も必要です。 今回のリリースノートからそれぞれのプルリクエストのリンクが付いたりして、内容をしっかり把握するのにとても便利です。 とは言え、なんだかんだでkoba04さんの記事が事例付きでとてもわかりやすかったりします。こちらも併せてご確認ください。React 15 brings significant improvements to how we interact with the DOM:
We are now using document.createElement instead of setting innerHTML when mounting components. This allows us to get rid of the data-reactid attribute on every node and make the DOM lighter. Using document.createElement is also faster in modern browsers and fixes a number of edge cases related to SVG elements and running multiple copies of React on the same page.
Historically our support for SVG has been incomplete, and many tags and attributes were missing. We heard you, and in React 15 we added support for all the SVG attributes that are recognized by today’s browsers. If we missed any of the attributes you’d like to use, please let us know. As a bonus, thanks to using document.createElement, we no longer need to maintain a list of SVG tags, so any SVG tags that were previously unsupported should work just fine in React 15.
We received some amazing contributions from the community in this release, and we would like to highlight this pull request by Michael Wiencek in particular. Thanks to Michael’s work, React 15 no longer emits extra <span> nodes around the text, making the DOM output much cleaner. This was a longstanding annoyance for React users so it’s exciting to accept this as an outside contribution.
While this isn’t directly related to the release, we understand that in order to receive more community contributions like Michael’s, we need to communicate our goals and priorities more openly, and review pull requests more decisively. As a first step towards this, we started publishing React core team weekly meeting notes again. We also intend to introduce an RFC process inspired by Ember RFCs so external contributors can have more insight and influence in the future development of React. We will keep you updated about this on our blog.
We are also experimenting with a new changelog format in this post. Every change now links to the corresponding pull request and mentions the author. Let us know whether you find this useful!
Upgrade Guide – アップグレードガイド
As usual with major releases, React 15 will remove support for some of the patterns deprecated nine months ago in React 0.14. We know changes can be painful (the Facebook codebase has over 20,000 React components, and that’s not even counting React Native), so we always try to make changes gradually in order to minimize the pain.
If your code is free of warnings when running under React 0.14, upgrading should be easy. The bulk of changes in this release are actually behind the scenes, impacting the way that React interacts with the DOM. The other substantial change is that React now supports the full range of SVG elements and attributes. Beyond that we have a large number of incremental improvements and additional warnings aimed to aid developers. We’ve also laid some groundwork in the core to bring you some new capabilities in future releases.
See the changelog below for more details.
Installation – インストール
We recommend using React from npm and using a tool like browserify or webpack to build your code into a single bundle. To install the two packages:
npm install --save react react-domRemember that by default, React runs extra checks and provides helpful warnings in development mode. When deploying your app, set the NODE_ENV environment variable to production to use the production build of React which does not include the development warnings and runs significantly faster.
If you can’t use npm yet, we provide pre-built browser builds for your convenience, which are also available in the react package on bower.
React
Dev build with warnings: https://fb.me/react-15.0.0.js
Minified build for production: https://fb.me/react-15.0.0.min.js
React with Add-Ons
Dev build with warnings: https://fb.me/react-with-addons-15.0.0.js
Minified build for production: https://fb.me/react-with-addons-15.0.0.min.js
React DOM (include React in the page before React DOM – React DOMの前にReactをページに読み込んでください)
Dev build with warnings: https://fb.me/react-dom-15.0.0.js
Minified build for production: https://fb.me/react-dom-15.0.0.min.js
Changelog – 変更ログ
Major changes – 主要な変更
document.createElement is in and data-reactid is out – document.createElementに対応し、data-reactidがなくなりました
There were a number of large changes to our interactions with the DOM. One of the most noticeable changes is that we no longer set the data-reactid attribute for each DOM node. While this will make it more difficult to know if a website is using React, the advantage is that the DOM is much more lightweight. This change was made possible by us switching to use document.createElement on initial render. Previously we would generate a large string of HTML and then set node.innerHTML. At the time, this was decided to be faster than using document.createElement for the majority of cases and browsers that we supported. Browsers have continued to improve and so overwhelmingly this is no longer true. By using createElement we can make other parts of React faster. The ids were used to map back from events to the original React component, meaning we had to do a bunch of work on every event, even though we cached this data heavily. As we’ve all experienced, caching and in particularly invalidating caches, can be error prone and we saw many hard to reproduce issues over the years as a result. Now we can build up a direct mapping at render time since we already have a handle on the node.
Note: data-reactid is still present for server-rendered content, however it is much smaller than before and is simply an auto-incrementing counter.
No more extra <span>s – 余計な<span>はなくなりました
Another big change with our DOM interaction is how we render text blocks. Previously you may have noticed that React rendered a lot of extra <span>s. For example, in our most basic example on the home page we render <div>Hello {this.props.name}</div>, resulting in markup that contained 2 <span>s. Now we’ll render plain text nodes interspersed with comment nodes that are used for demarcation. This gives us the same ability to update individual pieces of text, without creating extra nested nodes. Very few people have depended on the actual markup generated here so it’s likely you are not impacted. However if you were targeting these <span>s in your CSS, you will need to adjust accordingly. You can always render them explicitly in your components.
Rendering null now uses comment nodes – nullのレンダリングは、コメントノードとなりました
We’ve also made use of these comment nodes to change what null renders to. Rendering to null was a feature we added in React 0.11 and was implemented by rendering <noscript> elements. By rendering to comment nodes now, there’s a chance some of your CSS will be targeting the wrong thing, specifically if you are making use of :nth-child selectors. React’s use of the <noscript> tag has always been considered an implementation detail of how React targets the DOM. We believe they are safe changes to make without going through a release with warnings detailing the subtle differences as they are details that should not be depended upon. Additionally, we have seen that these changes have improved React performance for many typical applications.
Functional components can now return null too – 関数コンポーネントもnullを返すようになりました
We added support for defining stateless components as functions in React 0.14. However, React 0.14 still allowed you to define a class component without extending React.Component or using React.createClass(), so we couldn’t reliably tell if your component is a function or a class, and did not allow returning null from it. This issue is solved in React 15, and you can now return null from any component, whether it is a class or a function.
Improved SVG support – SVGのサポートを改善しました
All SVG tags are now fully supported. (Uncommon SVG tags are not present on the React.DOM element helper, but JSX and React.createElement work on all tag names.) All SVG attributes that are implemented by the browsers should be supported too. If you find any attributes that we have missed, please let us know in this issue.
Breaking changes – 破壊的変更
No more extra <span>s – 余計な<span>はなくなりました
It’s worth calling out the DOM structure changes above again, in particular the change from <span>s. In the course of updating the Facebook codebase, we found a very small amount of code that was depending on the markup that React generated. Some of these cases were integration tests like WebDriver which were doing very specific XPath queries to target nodes. Others were simply tests using ReactDOM.renderToStaticMarkup and comparing markup. Again, there were a very small number of changes that had to be made, but we don’t want anybody to be blindsided. We encourage everybody to run their test suites when upgrading and consider alternative approaches when possible. One approach that will work for some cases is to explicitly use <span>s in your render method.
React.cloneElement() now resolves defaultProps – React.cloneElement()はdefaultPropsで解決されるようになりました
We fixed a bug in React.cloneElement() that some components may rely on. If some of the props received by cloneElement() are undefined, it used to return an element with undefined values for those props. In React 15, we’re changing it to be consistent with createElement(). Now any undefined props passed to cloneElement() are resolved to the corresponding component’s defaultProps. Only one of our 20,000 React components was negatively affected by this so we feel comfortable releasing this change without keeping the old behavior for another release cycle.
ReactPerf.getLastMeasurements()は不明瞭です
This change won’t affect applications but may break some third-party tools. We are revamping ReactPerf implementation and plan to release it during the 15.x cycle. The internal performance measurement format is subject to change so, for the time being, we consider the return value of ReactPerf.getLastMeasurements() an opaque data structure that should not be relied upon.
Removed deprecations – 非推奨項目を削除しました
These deprecations were introduced nine months ago in v0.14 with a warning and are removed:
Deprecated APIs are removed from the React top-level export: findDOMNode, render, renderToString, renderToStaticMarkup, and unmountComponentAtNode. As a reminder, they are now available on ReactDOM and ReactDOMServer.
Deprecated addons are removed: batchedUpdates and cloneWithProps.
Deprecated component instance methods are removed: setProps, replaceProps, and getDOMNode.
Deprecated CommonJS react/addons entry point is removed. As a reminder, you should use separate react-addons-* packages instead. This only applies if you use the CommonJS builds.
Passing children to void elements like <input> was deprecated, and now throws an error.
React-specific properties on DOM refs (e.g. this.refs.div.props) were deprecated, and are removed now.
New deprecations, introduced with a warning – 新たな非推奨事項（警告が出ます）
Each of these changes will continue to work as before with a new warning until the release of React 16 so you can upgrade your code gradually.
LinkedStateMixin and valueLink are now deprecated due to very low popularity. If you need this, you can use a wrapper component that implements the same behavior: react-linked-input.
Future versions of React will treat <input value={null}> as a request to clear the input. However, React 0.14 has been ignoring value={null}. React 15 warns you on a null input value and offers you to clarify your intention. To fix the warning, you may explicitly pass an empty string to clear a controlled input, or pass undefined to make the input uncontrolled.
ReactPerf.printDOM() was renamed to ReactPerf.printOperations(), and ReactPerf.getMeasurementsSummaryMap() was renamed to ReactPerf.getWasted().
New helpful warnings – 新しい助けとなる警告
If you use a minified copy of the development build, React DOM kindly encourages you to use the faster production build instead.
React DOM: When specifying a unit-less CSS value as a string, a future version will not add px automatically. This version now warns in this case (ex: writing style={{width: ‘300’}}. Unitless number values like width: 300 are unchanged.
Synthetic Events will now warn when setting and accessing properties (which will not get cleared appropriately), as well as warn on access after an event has been returned to the pool.
Elements will now warn when attempting to read ref and key from the props.
React will now warn if you pass a different props object to super() in the constructor.
React will now warn if you call setState() inside getChildContext().
React DOM now attempts to warn for mistyped event handlers on DOM elements, such as onclick which should be onClick.
React DOM now warns about NaN values in style.
React DOM now warns if you specify both value and defaultValue for an input.
React DOM now warns if an input switches between being controlled and uncontrolled.
React DOM now warns if you specify onFocusIn or onFocusOut handlers as they are unnecessary in React.
React now prints a descriptive error message when you pass an invalid callback as the last argument to ReactDOM.render(), this.setState(), or this.forceUpdate().
Add-Ons: TestUtils.Simulate() now prints a helpful message if you attempt to use it with shallow rendering.
PropTypes: arrayOf() and objectOf() provide better error messages for invalid arguments.
Notable bug fixes – 重要なバグ修正
Fixed multiple small memory leaks.
Input events are handled more reliably in IE 10 and IE 11; spurious events no longer fire when using a placeholder.
The componentWillReceiveProps() lifecycle method is now consistently called when context changes.
React.cloneElement() doesn’t append slash to an existing key when used inside React.Children.map().
React DOM now supports the cite and profile HTML attributes.
React DOM now supports cssFloat, gridRow and gridRow CSS properties.
React DOM now correctly handles borderImageOutset, borderImageWidth, borderImageSlice, floodOpacity, strokeDasharray, and strokeMiterlimit as unitless CSS properties.
React DOM now supports the onAnimationStart, onAnimationEnd, onAnimationIteration, onTransitionEnd, and onInvalid events. Support for onLoad has been added to object elements.
React DOM now defaults to using DOM attributes instead of properties, which fixes a few edge case bugs. Additionally the nullification of values (ex: href={null}) now results in the forceful removal, no longer trying to set to the default value used by browsers in the absence of a value.
React DOM does not mistakingly coerce children to strings for Web Components.
React DOM now correctly normalizes SVG <use> events.
React DOM does not throw if a <select> is unmounted while its onChange handler is executing.
React DOM does not throw in Windows 8 apps.
React DOM does not throw when asynchronously unmounting a child with a ref.
React DOM no longer forces synchronous layout because of scroll position tracking.
Object.is is used in a number of places to compare values, which leads to fewer false positives, especially involving NaN. In particular, this affects the shallowCompare add-on.
Add-Ons: ReactPerf no longer instruments adding or removing an event listener because they don’t really touch the DOM due to event delegation.
Other improvements – その他改善点
React now uses loose-envify instead of envify so it installs less transitive dependencies.
Shallow renderer now exposes getMountedInstance().
Shallow renderer now returns the rendered output from render().
React no longer depends on ES5 shams for Object.create and Object.freeze in older environments. It still, however, requires ES5 shims in those environments.
React DOM now allows data- attributes with names that start with numbers.
React DOM adds a new suppressContentEditableWarning prop for components like Draft.js that intentionally manage contentEditable children with React.
React improves the performance for createClass() on complex specs.
v15.0.1
Changelog – 変更ログ
React
Restore React.__spread API to unbreak code compiled with some tools making use of this undocumented API. It is now officially deprecated.
ReactDOM
Fixed issue resulting in loss of cursor position in controlled inputs.
まとめ
コメント