React v0.14 リリースノート【日本語翻訳】

2015年10月7日(水)に待望の「React 0.14」がリリースされました。ReactはFacebookが開発しているJavaScripのUI開発用のフレームワークです。当ブログでもいくつかReactに関する記事を投稿しています。今回新しいバージョンの理解を深めるために日本語に翻訳してみました。けっこう簡単に訳せるかなと思ったら、意外と骨が折れました。いつものことですが、Google翻訳よりはマシだと思いますので、おかしな訳の部分もあるかと思いますが参考にしていただければと思います。

react.js(リアクト)

当記事は以下のページを日本語に翻訳したものとなります。

React v0.14

October 7, 2015 by Ben Alpert

We’re happy to announce the release of React 0.14 today! This release has a few major changes, primarily designed to simplify the code you write every day and to better support environments like React Native.

本日React 0.14のリリースをアナウンスできて幸せです!このリリースは主にあなたが毎日書くコードをシンプルにするために、そしてReact Nativeのような環境をよりよくサポートするためにデザインされたいくつかの大きな変更があります。

If you tried the release candidate, thank you – your support is invaluable and we’ve fixed a few bugs that you reported

リリース候補を試していただいた方には感謝しています。 – あなた方のサポートはとても貴重であり、報告していただいたいくつかのバグを対処しました。

As with all of our releases, we consider this version to be stable enough to use in production and recommend that you upgrade in order to take advantage of our latest improvements.

これまでのリリースと同様に、このバージョンがプロダクションを利用するにあたり十分に安定するように熟慮しました。最新の改善によるアドバンテージを享受するためにアップグレードすることをお勧めします。

Upgrade Guide – アップグレードガイド

Like always, we have a few breaking changes in this release. We know changes can be painful (the Facebook codebase has over 15,000 React components), so we always try to make changes gradually in order to minimize the pain.

いつものように、今回のリリースには幾つかのbreaking changes(互換性のない変更)があります。我々は変更には痛みを伴うことを知っているので(Facebookのコードベースは15,000以上のReactコンポーネントが存在します)、最小限の痛みで済むように少しずつ変更していくことを心がけています。

If your code is free of warnings when running under React 0.13, upgrading should be easy. We have two new small breaking changes that didn’t give a warning in 0.13 (see below). Every new change in 0.14, including the major changes below, is introduced with a runtime warning and will work as before until 0.15, so you don’t have to worry about your app breaking with this upgrade. 

もしReact 0.13環境下で動いているコードに警告が出ていなければ、アップグレードは簡単でしょう。今回、0.13では警告の出なかった2つの新しい小さなbreaking changesがあります(以下参照)。以下のメジャーな変更点を含めて、0.14における新しい変更点は全てランタイムの警告で導入されており、これまでと同様に0.15まで動くでしょう。なので、このアップグレードと互換性のないアプリでも心配する必要はありません。

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:

Reactはnpm経由で使用し、コードを一つのバンドルの中にビルドするためにbrowserifyまたはwebpackのようなツールを使うことをお勧めします。

npm install --save react react-dom

Remember 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.

デフォルトでは、Reactは特別なチェックを実行し、ディペロップメントモードにおいて助けとなる警告を出しているということを忘れないでください。アプリをデプロイする際は、開発用の警告を含めず、著しくより高速に動くReactの製品版(プロダクション・ビルド)を使用するために、NODE_ENV環境変数をproductionにセットしてください。

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.

まだnpmをうまく使えない方のために、reactパッケージ内でも利用できるビルド済みのブラウザ版をbower上で便宜的に提供しています。

Changelog – 変更ログ

Major changes – 大きな変更

  • Two Packages: React and React DOM – 2つのパッケージ: ReactとReact DOM

    As we look at packages like react-native, react-art, react-canvas, and react-three, it has become clear that the beauty and essence of React has nothing to do with browsers or the DOM.

    react-nativereact-artreact-canvas、そしてreact-threeのようなパッケージを見ると、Reactの美しさと本質はブラウザやDOMとは無関係であるということが明白となっています。

    To make this more clear and to make it easier to build more environments that React can render to, we’re splitting the main react package into two: react and react-dom. This paves the way to writing components that can be shared between the web version of React and React Native. We don’t expect all the code in an app to be shared, but we want to be able to share the components that do behave the same across platforms.

    これをより明白にするために、そしてReactがレンダリングできる環境をより簡単にビルドできるようにするために、メインのreactパッケージをreactreact-domの2つに分割しています。これはReactのWebバージョンとReact Nativeの間で共有されうるコンポーネントを書くための道筋をつくります。アプリ内の全てのコードが共有されることを予期していませんが、複数のプラットフォームをまたがって同じように振る舞うコンポーネントを共有できるようにしていきたいです。

    The react package contains React.createElement, .createClass, .Component, .PropTypes, .Children, and the other helpers related to elements and component classes. We think of these as the isomorphic or universal helpers that you need to build components.

    reactパッケージはReact.createElement.createClass.Component.PropTypes.Children、そして要素とコンポーネントのclassに関係した他のヘルパーを内包しています。これらはコンポーネントをビルドするために必要な同一構造(isomorphic)または普遍的(universal)なヘルパーとして考えています。

    The react-dom package has ReactDOM.render, .unmountComponentAtNode, and .findDOMNode. In react-dom/server we have server-side rendering support with ReactDOMServer.renderToString and .renderToStaticMarkup.

    react-domパッケージは、ReactDOM.render.unmountComponentAtNode、そして.findDOMNodeを持ちます。react-dom/server内で、サーバーサイドレンダリングのサポート用にReactDOMServer.renderToString.renderToStaticMarkupを持ちます。

    var React = require('react');
    var ReactDOM = require('react-dom');
    
    var MyComponent = React.createClass({
      render: function() {
        return <div>Hello World</div>;
      }
    });
    
    ReactDOM.render(<MyComponent />, node);

    The old names will continue to work with a warning until 0.15 is released, and we’ve published the automated codemod script we used at Facebook to help you with this transition.

    古い名前は0.15がリリースされるまで警告は出ますが動き続けます。この変化に伴う助けとなるようにFacebookで使ったautomated codemod scriptを公開しました。

    The add-ons have moved to separate packages as well:

    アドオンも同様にパッケージを分離するために変化しました。

    • react-addons-clone-with-props
    • react-addons-create-fragment
    • react-addons-css-transition-group
    • react-addons-linked-state-mixin
    • react-addons-perf
    • react-addons-pure-render-mixin
    • react-addons-shallow-compare
    • react-addons-test-utils
    • react-addons-transition-group
    • react-addons-update
    • react-domにおけるReactDOM.unstable_batchedUpdates

    For now, please use matching versions of react and react-dom (and the add-ons, if you use them) in your apps to avoid versioning problems.

    さしあたっては、バージョンによる問題を避けるために、あなたのアプリにおいては同じパージョンのreactreact-dom(そして、もし使うならアドオン)を使うようにしてください。

  • DOM node refs – DOMノードのrefs

    The other big change we’re making in this release is exposing refs to DOM components as the DOM node itself. That means: we looked at what you can do with a ref to a React DOM component and realized that the only useful thing you can do with it is call this.refs.giraffe.getDOMNode() to get the underlying DOM node. Starting with this release, this.refs.giraffe is the actual DOM node. Note that refs to custom (user-defined) components work exactly as before; only the built-in DOM components are affected by this change.

    このリリースにおける他の大きな変更は、refsをDOMノードそれ自身としてDOMコンポーネントに公開したことです。これは次のようなことを意味しています。我々は、あなたがrefでReact DOMコンポーネントに対して実行できることを見て、refでできるたった一つの役に立つことは、根底にあるDOMノードを取得するためにthis.refs.giraffe.getDOMNode()を実行することであると実感しました。このリリースを皮切りに、this.refs.giraffeは実際のDOMノードとなります。カスタム(ユーザーが定義した)コンポーネントに対するrefsはこれまで通り正確に動きますが、ビルトインのDOMコンポーネントだけはこの変更によって影響を受けるということに注意してください。

    var Zoo = React.createClass({
      render: function() {
        return <div>Giraffe name: <input ref="giraffe" /></div>;
      },
      showName: function() {
        // Previously: var input = this.refs.giraffe.getDOMNode();
        var input = this.refs.giraffe;
        alert(input.value);
      }
    });
    

    This change also applies to the return result of ReactDOM.render when passing a DOM node as the top component. As with refs, this change does not affect custom components.

    この変更はまた、Topコンポーネントを通してDOMノードを渡す時にReactDOM.renderのreturnの結果に適用されます。refsと同様に、この変更はカスタムコンポーネントに影響を及ぼしません。

    With this change, we’re deprecating .getDOMNode() and replacing it with ReactDOM.findDOMNode (see below). If your components are currently using .getDOMNode(), they will continue to work with a warning until 0.15.

    この変更に伴い、.getDOMNode()は非推奨となっており、ReactDOM.findDOMNodeと置き換えられています(以下参照)。もしあなたのコンポーネントが現在も.getDOMNode()を使用していたとしても、0.15までは警告は出ますが動き続けます。

  • Stateless functional components – ステートレスな関数コンポーネント

    In idiomatic React code, most of the components you write will be stateless, simply composing other components. We’re introducing a new, simpler syntax for these components where you can take props as an argument and return the element you want to render:

    慣用語法の多いReactのコードにおいて、あなたの書くコンポーネントのほとんどはステートレスで、シンプルに他のコンポーネントを構成しています。我々はあなたが引数としてpropsを取得し、レンダリングしたい要素を返すことができるこれらのコンポーネントのために新しい、シンプルなシンタックスを導入しています。

    // A functional component using an ES2015 (ES6) arrow function:
    var Aquarium = (props) => {
      var fish = getFish(props.species);
      return <Tank>{fish}</Tank>;
    };
    
    // Or with destructuring and an implicit return, simply:
    var Aquarium = ({species}) => (
      <Tank>
        {getFish(species)}
      </Tank>
    );
    
    // Then use: <Aquarium species="rainbowfish" />
    

    These components behave just like a React class with only a render method defined. Since no component instance is created for a functional component, any ref added to one will evaluate to null. Functional components do not have lifecycle methods, but you can set .propTypes and .defaultProps as properties on the function.

    これらのコンポーネントは、定義されたメソッドはrenderメソッドのみとなりますが、まさにReactのclassのように振る舞います。コンポーネントのインスタンスは関数コンポーネントのために作られていないので、インスタンスに追加されたrefはどれもnullとして評価されます。関数コンポーネントはライフサイクルメソッドを持っていませんが、関数のプロパティとして.propTypes.defaultPropsをセットすることができます。

    This pattern is designed to encourage the creation of these simple components that should comprise large portions of your apps. In the future, we’ll also be able to make performance optimizations specific to these components by avoiding unnecessary checks and memory allocations.

    このパターンは、アプリの大きな部分を構成するためのシンプルなコンポーネントの作成を奨励するためにデザインされています。将来的には、不必要なチェックやメモリの割り当てを避けることによって、これらのコンポーネントに特化したパフォーマンスの最適化を行うことができるようになります。

  • Deprecation of react-tools – react-toolsの非推奨

    The react-tools package and JSXTransformer.js browser file have been deprecated. You can continue using version 0.13.3 of both, but we no longer support them and recommend migrating to Babel, which has built-in support for React and JSX.

    react-toolsパッケージとJSXTransformer.jsのブラウザファイルは非推奨となりました。どちらもバージョン0.13.3を使い続けることができますが、もはやそれらをサポートしません。ReactとJSXの組み込みに対応したBabelに移行することをお勧めします。

  • Compiler optimizations – コンパイラ最適化

    React now supports two compiler optimizations that can be enabled in Babel 5.8.23 and newer. Both of these transforms should be enabled only in production (e.g., just before minifying your code) because although they improve runtime performance, they make warning messages more cryptic and skip important checks that happen in development mode, including propTypes.

    Reactは今後Babel 5.8.23とそれ以降のバージョンにおいて可能となるコンパイラ最適化をサポートします。これらの変換は(例えば、まさにコードを圧縮する前など)プロダクションにおいてのみ可能となるべきです。なぜなら、それらはランタイムのパフォーマンスを改善しますが、それらは警告のメッセージをより隠蔽し、propTypesを含めて、ディベロップメントモードにおいて発生する重要なチェックをスキップしてしまうからです。

    Inlining React elements: The optimisation.react.inlineElements transform converts JSX elements to object literals like {type: ‘div’, props: …} instead of calls to React.createElement.

    React要素のインライン化: optimisation.react.inlineElementsは、React.createElementを呼ぶ代わりにJSXの要素を{type: ‘div’, props: …}のようなオブジェクトリテラルに変換します。

    Constant hoisting for React elements: The optimisation.react.constantElements transform hoists element creation to the top level for subtrees that are fully static, which reduces calls to React.createElement and the resulting allocations. More importantly, it tells React that the subtree hasn’t changed so React can completely skip it when reconciling.

    Reactの要素のための定数巻き上げ: React.createElementの実行と結果として生じる割り当てを減らすoptimisation.react.constantElementsは、十分に静的なサブツリーのために巻き上げ要素生成物(hoists element creation)をトップレベルに変換します。より大事なことですが、サブツリーが変更されなかった場合、Reactは調整の際にそれを完全にスキップします。

Breaking changes – 互換性のない変更

In almost all cases, we change our APIs gradually and warn for at least one release to give you time to clean up your code. These two breaking changes did not have a warning in 0.13 but should be easy to find and clean up:

ほとんどすべてのケースにおいて、我々は徐々にAPIを変更し、少なくとも一つのリリースの間、あなたのコードを修正する時間を提供するために前もって通知します。この2つの互換性のない変更は0.13では警告が出ませんが、簡単に探し出せ修正できるでしょう。

  • React.initializeTouchEvents is no longer necessary and has been removed completely. Touch events now work automatically.

    React.initializeTouchEventsはもはや必要ではなく、完全に削除されました。touchイベントはこれからは自動で動きます。

  • Add-Ons: Due to the DOM node refs change mentioned above, TestUtils.findAllInRenderedTree and related helpers are no longer able to take a DOM component, only a custom component.

    アドオン: DOMノードのrefsは上で述べた通り変更されたため、TestUtils.findAllInRenderedTreeと関連したヘルパーはもはやDOMコンポーネントを取得できません。カスタムコンポーネントのみです。

These three breaking changes had a warning in 0.13, so you shouldn’t have to do anything if your code is already free of warnings:

この3つの互換性のない変更は0.13において警告が出るようになっており、もしあなたのコードですでに警告が出ないのであれば、何もすべきではありません。

  • The props object is now frozen, so mutating props after creating a component element is no longer supported. In most cases, React.cloneElement should be used instead. This change makes your components easier to reason about and enables the compiler optimizations mentioned above.

    propsオブジェクトはすでに凍結しています。なので、コンポーネントの要素の作成後にpropsを変化させることはもはやサポートされません。ほとんどのケースにおいて、React.cloneElementが代わりに使われるべきです。この変更により、あなたのコンポーネントは論理的に考えることがより容易になり、上で述べたコンパイラ最適化が可能となります。

  • Plain objects are no longer supported as React children; arrays should be used instead. You can use the createFragment helper to migrate, which now returns an array.

    プレーンなオブジェクトはもはやReact childrenとしてサポートされません。その代わりに配列が使われるべきです。移行するために、配列を返すようになったcreateFragmentヘルパーを使うことができます。

  • Add-Ons: classSet has been removed. Use classnames instead.

    アドオン: classSetは削除されました。その代わりにclassnamesを使ってください。

New deprecations, introduced with a warning – 警告を含めた新しい非推奨

Each of these changes will continue to work as before with a new warning until the release of 0.15 so you can upgrade your code gradually.

これらの各変更によって、0.15のリリースまで新たに警告が出るようになりますが、これまでと同様に動き続けます。なので、あなたは徐々にコードをアップグレードしていけます。

  • Due to the DOM node refs change mentioned above, this.getDOMNode() is now deprecated and ReactDOM.findDOMNode(this) can be used instead. Note that in most cases, calling findDOMNode is now unnecessary – see the example above in the “DOM node refs” section.

    上で述べたDOMノードのrefsの変更のため、this.getDOMNode()はこれからは非推奨となり、ReactDOM.findDOMNode(this)がその代わりに使われます。ほとんどのケースにおいて、findDOMNodeを実行することは今後は必要ありません。 – “DOM node refs – DOMノードのrefs”のセクションにおける上の例をみてください。

  • With each returned DOM node, we’ve added a getDOMNode method for backwards compatibility that will work with a warning until 0.15. If you have a large codebase, you can use our automated codemod script to change your code automatically.

    それぞれのreturnされたDOMノードと一緒に、我々はgetDOMNodeメソッドを、0.15までは警告を出しながらも動くように後方互換のために追加しました。もし大きなコードベースを持っているなら、自動でコードを変更するためのautomated codemod scriptを使うことができます。

  • setProps and replaceProps are now deprecated. Instead, call ReactDOM.render again at the top level with the new props.

    setPropsreplacePropsは、これからは非推奨となります。その代わりに、新しいpropsと一緒にtopレベルにて再びReactDOM.renderを実行してください。

  • ES6 component classes must now extend React.Component in order to enable stateless function components. The ES3 module pattern will continue to work.

    ES6コンポーネントのclassは、これからはステートレスな関数コンポーネントを可能にするためにReact.Componentを拡張しなければなりません。ES3モジュールパターンは動き続けます。

  • Reusing and mutating a style object between renders has been deprecated. This mirrors our change to freeze the props object.

    render間のstyleオブジェクトを再利用することと変化させることは非推奨となりました。これはpropsオブジェクトを凍結するための変更を反映しています。

  • Add-Ons: cloneWithProps is now deprecated. Use React.cloneElement instead (unlike cloneWithProps, cloneElement does not merge className or style automatically; you can merge them manually if needed).

    アドオン: cloneWithPropsはこれからは非推奨となります。その代わりにReact.cloneElementを使ってください。(cloneWithPropsと異なり、cloneElementは自動的にclassNamestyleをマージしません。もし必要なら、手動でそれらをマージできます。)

  • Add-Ons: To improve reliability, CSSTransitionGroup will no longer listen to transition events. Instead, you should specify transition durations manually using props such as transitionEnterTimeout={500}.

    アドオン: 信頼性を改善するために、CSSTransitionGroupはもはやtransitionイベントをリッスンしないでしょう。その代わりに、transitionEnterTimeout={500}のようなpropsを使うことによって手動で、transitionの持続を指定すべきです。

Notable enhancements – 重要な拡張

  • Added React.Children.toArray which takes a nested children object and returns a flat array with keys assigned to each child. This helper makes it easier to manipulate collections of children in your render methods, especially if you want to reorder or slice this.props.children before passing it down. In addition, React.Children.map now returns plain arrays too.

    ネストされた子オブジェクトを取得し、それぞれの子に割り当てられたkeyを持つflatな配列を返すReact.Children.toArrayを追加しました。特にあなたがそれを子に渡す前にthis.props.childrenを再度整列したいか、分割したいならば、このヘルパーは 子の集まりをrenderメソッドにおいて操作するのを容易にします。さらにReact.Children.mapもまた今後はプレーンな配列を返します。

  • React uses console.error instead of console.warn for warnings so that browsers show a full stack trace in the console. (Our warnings appear when you use patterns that will break in future releases and for code that is likely to behave unexpectedly, so we do consider our warnings to be “must-fix” errors.)

    Reactは警告を出すために、console.warnではなくconsole.errorを使うので、ブラウザはコンソールにおいてフルスタックトレースを表示します。(将来のリリースで壊れることになる予期せぬ振る舞いをしそうなコードのパターンを使う時に警告が出ます。なので、我々は警告を”must-fix”エラーであるとみなします。)

  • Previously, including untrusted objects as React children could result in an XSS security vulnerability. This problem should be avoided by properly validating input at the application layer and by never passing untrusted objects around your application code. As an additional layer of protection, React now tags elements with a specific ES2015 (ES6) Symbol in browsers that support it, in order to ensure that React never considers untrusted JSON to be a valid element. If this extra security protection is important to you, you should add a Symbol polyfill for older browsers, such as the one included by Babel’s polyfill.

    前もって信頼されないオブジェクトをReactの子として追加することは、XSSセキュリティの脆弱性という結果となりうるでしょう。この問題は、アプリケーションレイヤーにおいてinputを適切に検証することによって、そしてアプリケーションコードの周りで信頼されないオブジェクトを絶対に渡さないことで、防がれるべきです。追加されたプロテクションレイヤーとして、Reactは決して信頼されないJSONを正当な要素であるとみなさないということを保証するために、これからはブラウザの中で特定のES2015 (ES6) Symbol要素に付加します。もしこの特別なセキュリティ保護があなたにとって重要であれば、Babelのpolyfillによって含まれたものと同じように、古いブラウザのためにSymbolのpolyfillを追加すべきです。

  • When possible, React DOM now generates XHTML-compatible markup.

    React DOMは今後XHTML-compatibleマークアップをできる限り生成します。

  • React DOM now supports these standard HTML attributes: capture, challenge, inputMode, is, keyParams, keyType, minLength, summary, wrap. It also now supports these non-standard attributes: autoSave, results, security.

    React DOMは今後これらのスタンダードなHTMLの要素(capture, challenge, inputMode, is, keyParams, keyType, minLength, summary, wrap)をサポートします。また今後これらのスタンダードでない要素(autoSave, results, security)もサポートします。

  • React DOM now supports these SVG attributes, which render into namespaced attributes: xlinkActuate, xlinkArcrole, xlinkHref, xlinkRole, xlinkShow, xlinkTitle, xlinkType, xmlBase, xmlLang, xmlSpace.

    React DOMは今後ネームスペースされた要素の中にレンダリングするこれらのSVGの要素(xlinkActuate, xlinkArcrole, xlinkHref, xlinkRole, xlinkShow, xlinkTitle, xlinkType, xmlBase, xmlLang, xmlSpace)をサポートします。

  • The image SVG tag is now supported by React DOM.

    image SVGタグは今後React DOMによってサポートされます。

  • In React DOM, arbitrary attributes are supported on custom elements (those with a hyphen in the tag name or an is=”…” attribute).

    React DOMの中で任意の属性はカスタム要素上でサポートされます(これらのタグの名前の中のハイフン、またはis=”…”属性と一緒に)。

  • React DOM now supports these media events on audio and video tags: onAbort, onCanPlay, onCanPlayThrough, onDurationChange, onEmptied, onEncrypted, onEnded, onError, onLoadedData, onLoadedMetadata, onLoadStart, onPause, onPlay, onPlaying, onProgress, onRateChange, onSeeked, onSeeking, onStalled, onSuspend, onTimeUpdate, onVolumeChange, onWaiting.

    React DOMは今後これらのaudioとvideoタグ上のmediaイベント(onAbort, onCanPlay, onCanPlayThrough, onDurationChange, onEmptied, onEncrypted, onEnded, onError, onLoadedData, onLoadedMetadata, onLoadStart, onPause, onPlay, onPlaying, onProgress, onRateChange, onSeeked, onSeeking, onStalled, onSuspend, onTimeUpdate, onVolumeChange, onWaiting)をサポートします。

  • Many small performance improvements have been made.

    多くの小さなパフォーマンス改善がなされました。

  • Many warnings show more context than before.

    多くの警告は以前より多くの状況を示します。

  • Add-Ons: A shallowCompare add-on has been added as a migration path for PureRenderMixin in ES6 classes.

    アドオン: shallowCompareアドオンはES6のclassの中のPureRenderMixinのためにマイグレーションパスとして追加されました。

  • Add-Ons: CSSTransitionGroup can now use custom class names instead of appending -enter-active or similar to the transition name.

    アドオン: CSSTransitionGroupは、-enter-activeまたはトランジションネームに似たものを追加する代わりに、今後はカスタムクラスネームを使うことができます。

New helpful warnings – 新たな役立つ警告

  • React DOM now warns you when nesting HTML elements invalidly, which helps you avoid surprising errors during updates.

    HTMLの要素を無効にネストした際、React DOMは今後、アップデート中の予期せぬエラーを避けるのを助けてくれる警告を出します。

  • Passing document.body directly as the container to ReactDOM.render now gives a warning as doing so can cause problems with browser extensions that modify the DOM.

    コンテナとしてdocument.bodyReactDOM.renderに直接渡すことは、今後はDOMを修正するブラウザのエクステンションと一緒に問題の原因となりうるとして警告が出ます。

  • Using multiple instances of React together is not supported, so we now warn when we detect this case to help you avoid running into the resulting problems.

    多数のReactのインスタンスを一緒に使うことはサポートされません。なので今後は、このケースを検出した時に結果として生じる問題に至らないように警告が出ます。

Notable bug fixes – 重要なバグフィックス

  • Click events are handled by React DOM more reliably in mobile browsers, particularly in Mobile Safari.

    モバイルブラウザ(特にモバイルSafari)においてclickイベントはReact DOMによってより信頼できる方法で扱われます。

  • SVG elements are created with the correct namespace in more cases.

    SVG要素は多くのケースで正しい名前空間と一緒に作成されます。

  • React DOM now renders <option> elements with multiple text children properly and renders <select> elements on the server with the correct option selected.

    React DOMは今後<option>要素を複数の子テキストと一緒に正確にレンダリングし、サーバー上で正しい選択されたオプションと一緒に<select>要素をレンダリングします。

  • When two separate copies of React add nodes to the same document (including when a browser extension uses React), React DOM tries harder not to throw exceptions during event handling.

    Reactの2つの離れたコピーが同じドキュメントにメモを追加した時(ブラウザの機能拡張がReactを使う時を含めて)、React DOMはイベントがハンドリングされている間は例外を投げないように厳しくトライします。

  • Using non-lowercase HTML tag names in React DOM (e.g., React.createElement(‘DIV’)) no longer causes problems, though we continue to recommend lowercase for consistency with the JSX tag name convention (lowercase names refer to built-in components, capitalized names refer to custom components).

    React DOMにおける小文字でないHTMLのタグ名(例えば、React.createElement(‘DIV’))を使うことはもはや問題の原因とはなりません。ただし、JSXのタグ名の慣習(小文字の名前はビルトインコンポーネントを参照し、大文字の名前はカスタムコンポーネントを参照します。)と矛盾しないように小文字を使うことを推奨し続けます。

  • React DOM understands that these CSS properties are unitless and does not append “px” to their values: animationIterationCount, boxOrdinalGroup, flexOrder, tabSize, stopOpacity.

    React DOMはこれらのCSSプロパティ(animationIterationCount, boxOrdinalGroup, flexOrder, tabSize, stopOpacit)はユニットレスであることを理解し、それらの値に”px”を付与しません。

  • Add-Ons: When using the test utils, Simulate.mouseEnter and Simulate.mouseLeave now work.

    アドオン: テストユーティリティを使う時、今後Simulate.mouseEnterSimulate.mouseLeaveが動きます。

  • Add-Ons: ReactTransitionGroup now correctly handles multiple nodes being removed simultaneously.

    アドオン: ReactTransitionGroupは今後同時に削除されている複数のメモを正しく扱います。

まとめ

以上、React v0.14のリリースノートの和訳となります。表現のおかしな部分や誤訳などありましたら、ご指摘いただけると幸いです。

自分は翻訳したもののまだ完全に内容を把握していませんが、v0.14のポイントとしては、やはり一番大きいところは、パッケージが”react”と”react-dom”の2つに分割されたことでしょう。それからrefの仕様変更なども注意すべき点かと思います。

v0.14の要点については、以下のブログ記事で詳しくまとめられています。

以前に当ブログで、Reactのチュートリアルの翻訳などもしましたが、こちらも本家ではすでにv0.14の内容に切り替わっているので、ぼちぼちチュートリアルの方も0.14の翻訳記事を書きたいと思います。

追記(2015年10月21日):ということで、React v0.14のチュートリアルの翻訳記事も公開したので紹介しておきます。併せてご確認いただければと思います。

入門 React ―コンポーネントベースのWebフロントエンド開発
  • 『入門 React ―コンポーネントベースのWebフロントエンド開発』
  • 著者: Frankie Bagnardi, Jonathan Beebe, Richard Feldman, Tom Hallett, Simon HØjberg, Karl Mikkelsen, 宮崎 空(翻訳)
  • 出版社: オライリージャパン
  • 発売日: 2015年4月3日
  • ISBN: 978-4873117195

コメント一覧

  • 必須

コメント