React Release Candidate v0.14レビュー

最初のリリース候補バージョンReact 0.14をご紹介します！ 7月に予定されている変更のアナウンスを公​​開しましたが 、リリースをさらに安定させました。最終バージョンをリリースする前に試してみてください。



GitHubリポジトリでタスクを作成して、問題がある場合はお知らせください

設置

npmでReactを使用し、browserifyやwebpackなどのユーティリティを使用してコードを1つのパッケージにコンパイルすることをお勧めします。

npm install --save react@0.14.0-rc1 npm install --save react-dom@0.14.0-rc1
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

デフォルトでは、開発モードでは、Reactは追加のチェックを起動し、有用な警告を提供することに注意してください。 したがって、アプリケーションをデプロイするとき、実稼働モードを使用するように実 稼働環境でNODE_ENV環境変数を設定します。このモードでは、Reactはサービス警告を含まず、はるかに高速に動作します。



npmを使用できない場合は、便利なようにブラウザ用にコンパイルされたビルドも提供します。

• 反応する
  
  警告付きの開発ビルド： https : //fb.me/react-0.14.0-rc1.js
  
  縮小された製品アセンブリ： https : //fb.me/react-0.14.0-rc1.min.js
• アドオンと反応する
  
  警告付きの開発ビルド： https : //fb.me/react-with-addons-0.14.0-rc1.js
  
  警告付きの開発ビルド： https : //fb.me/react-with-addons-0.14.0-rc1.min.js
• React DOM （ React DOMの前にReactを接続します）
  
  警告付きの開発ビルド： https : //fb.me/react-dom-0.14.0-rc1.js
  
  警告付きの開発ビルド： https : //fb.me/react-dom-0.14.0-rc1.min.js

これらのアセンブリは、バウアーパッケージとしても利用できます： reactおよびreact-dom

大きな変更

2つのパッケージ：ReactおよびReact DOM

react-native 、 react-art 、 react-canvas、 react-threeなどのモジュールを見ると、Reactの美しさと本質はブラウザーやDOMとは何の関係もないことが明らかになります。



これをReactがレンダリングできるより多くの環境でより透明で使いやすくするために、メインのreactパッケージを2つに分割します： reactとreact-dom 。

これは、WebバージョンのReactおよびReact Nativeで共有できるコンポーネントを作成する方法を提供します。 アプリケーション内のすべてのコードを共有する必要はありませんが、異なるプラットフォームで同じように動作するコンポーネントを共有できるようにしたいと考えています。



reactパッケージには、 React.createElement 、 .createClass 、 .Component 、 .PropTypes 、 .Children 、および要素とコンポーネントクラスに焦点を当てたその他のヘルパーが含まれています。 コンポーネントを構築するために必要な同型または汎用ヘルパーと考えています。



react-domパッケージには、 ReactDOM.render 、 .unmountComponentAtNode、および.findDOMNodeが含まれています。 react-dom / serverでは、 ReactDOMServer.renderToStringおよび.renderToStaticMarkupを使用してサーバーでのレンダリングをサポートしています。

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

この移行のためにFacebookで使用する自動化されたcodemodスクリプトを公​​開しました



アドオンは別のパッケージに移動されました： 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 、ならびにReactDOM。 react-domの unstable_batchedUpdates



今のところ、バージョン管理の問題を防ぐために、アプリケーションでreactおよびreact-domの特定のバージョンを使用してください。

DOMノードへのリンク

このリリースで行った別の重要な変更は、DOMコンポーネントへの参照がDOMノード自体を参照するようになったことです。

これが何を意味するのか：React DOMコンポーネントへの（ref）リンクで何をしているのかを見て、それでできる唯一の便利なことはthis.refs.giraffe.getDOMNode（）を呼び出してDOMを取得することだとわかりましたノード。 このリリースでは、 this.refs.giraffe が現在のDOMノードです。

カスタム（ユーザー定義）コンポーネントへのリンクは以前と同じように機能することに注意してください。 ネイティブ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); } });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

この変更は、DOMノードをルートコンポーネントとして渡すときのReactDOM.renderの戻り結果にも適用されます。 refと同様に、これらの変更はカスタムコンポーネントには適用されません。 これらの変更により、サポートされていない.getDOMNode（）メソッドを宣言し、 ReactDOM.findDOMNodeメソッドに置き換えます（以下を参照）。

愚かなコンポーネント

React固有のコードでは、記述するコンポーネントのほとんどに独自の状態を持たせないでください。 ステートレス。 そのようなコンポーネントの新しい単純な構文を提示します。この構文では、小道具を引数として渡し、レンダリングする要素を返すことができます。

 //  ES2015 (ES6)  : var Aquarium = (props) => { var fish = getFish(props.species); return <Tank>{fish}</Tank>; }; //      : var Aquarium = ({species}) => ( <Tank> {getFish(species)} </Tank> ); //  : <Aquarium species="rainbowfish" />
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このパターンは、ほとんどのアプリケーションを構成するこれらの単純なコンポーネントの作成を促進するように設計されています。 将来的には、これらのコンポーネント専用にパフォーマンスを最適化し、不要なチェックやメモリ割り当てを回避することもできます。

React-toolsはサポートされなくなりました

react-toolsパッケージとJSXTransformer.jsのブラウザーバージョンは望ましくありませ ん 。 バージョン0.13.3でも引き続き使用できますが、サポートしなくなったため、ReactとJSXの組み込みサポートがあるBabelの使用に切り替えることをお勧めします。

コンパイラーの最適化

Reactは、Babel 5.8.23以降に含めることができる2つのコンパイラー最適化をサポートするようになりました。 これらの変換は 、実行パフォーマンスを改善しますが、サービス警告をより隠し、propTypesを含む開発モードで発生する重要なチェックをスキップするため、これらの変換は両方とも本番環境（たとえば縮小前）にのみ含める必要があります。



React要素の埋め込み： optimisation.react.inlineElementsは、 React.createElementを呼び出す代わりに、JSX要素を{type： 'div'、props：...}などのオブジェクトに変換します。



React要素の絶え間ない「浮動」： optimisation.react.constantElementsは、要素の作成をサブツリーの上位レベルに「上げ」ます。これは完全に静的であり、 React.createElementの呼び出しと移動を減らします。 さらに重要なことは、サブツリーが変更されていないことをReactに通知するため、Reactは調整時にサブツリーを完全にスキップできます。

重大な変更

いつものように、このリリースではいくつかの重要な変更があります。 大きな変更を加えるたびに、少なくとも1つのリリースを含めて警告します。 コードを更新する時間があります。 Facebookのコードベースは15,000を超えるReactコンポーネントであるため、Reactチームでは、重要な変更の影響を最小限に抑えるよう常に努めています。



これらの3つの重要な変更により、バージョン0.13で警告が生成されたため、コードに警告がなければ何もする必要はありません。

• propsオブジェクトが修正されたため、コンポーネント作成後のpropsの変更はサポートされなくなりました。 ほとんどの場合、 代わりにReact.cloneElementを使用する必要があります。 これらの変更により、コンポーネントが理解しやすくなり、上記のコンパイルの最適化が含まれます。
• 単純なオブジェクトはReactの子孫としてサポートされなくなりました。代わりに配列を使用する必要があります。 マイグレーションにはcreateFragmentヘルパーを使用できます。これにより、配列が返されます。
• アドオン： classSetは削除されました。 代わりにクラス名を使用してください

これらの2つの変更は0.13では診断されませんでしたが、簡単に見つけて修正できます。

• React.initializeTouchEventsは不要になり、完全に削除できます。 タッチイベントが自動的に機能するようになりました。
• アドオン：上記のように、DOMノードへのリンクが変更されたという事実により、 TestUtils.findAllInRenderedTreeとその関連ヘルパーは、DOMコンポーネントの受信には使用できなくなりましたが、カスタムコンポーネントのみに使用できます。

新しい警告の例外

• 前述のように、DOMノードへの参照が変更されたという事実により、 this.getDOMNode（）は除外され、代わりにReactDOM.findDOMNode（this）を使用できます。 ほとんどの場合、 findDOMNodeの呼び出しは不要になっていることに注意してください-上記の「DOMノードへのリンク」セクションの例を参照してください。
  
  
  
  大きなコードベースがある場合は、 自動化されたcodemodスクリプトを使用して、コードを自動的に修正できます。
• setPropsとreplacePropsは現在禁止されています。 代わりに、新しいプロップを使用して、トップレベルでReactDOM.renderを再度呼び出します。
• ES6コンポーネントクラスは、 React.Componentを適切に拡張して、愚かなコンポーネントをサポートする必要があります。 ES3モジュールテンプレートは引き続き機能します。
• レンダリング間でオブジェクトのスタイルを再利用および変更することは禁止されています。 これは私たちの変化の本質を反映し、オブジェクトの小道具を凍結します。
• アドオン： cloneWithPropsは現在禁止されています。 代わりにReact.cloneElementを使用します （ cloneWithPropsとは異なり、 cloneElementはclassNameまたはstyleを自動的に結合しません。必要に応じてそれらを手動で結合できます）。
• アドオン：信頼性を高めるため、 CSSTransitionGroupは遷移イベントをリッスンしなくなりました。 代わりに、 transitionEnterTimeout = {500}などのプロパティを使用して、遷移の期間を手動で設定する必要があります。

大幅な改善

• ネストされた子孫のオブジェクトを受け取り、 各子にキーが割り当てられたフラット配列を返すReact.Children.toArrayが追加されました。 このヘルパーは、特に、 渡す前にthis.props.childrenを再配布または取得する場合、 レンダーメソッドでの子のコレクションの管理を簡素化します。 さらに、 React.Children.mapは単純な配列も返すようになりました。
• 警告のために、Reactはconsole.warnの代わりにconsole.errorを使用するようになりました。 ブラウザでは、コンソールにスタック全体が表示されます。 （将来のバージョンで変更されるテンプレートを使用する場合や、予想外に動作する可能性が高いコードの場合、警告が表示されるため、警告は「修正が必要な」エラーであると考えられます。）
• 以前は、信頼されていないオブジェクトをReactの子孫として使用すると、XSSの脆弱性が発生する可能性がありました 。 この問題は、アプリケーションレベルのログインを検証し、アプリケーションコード全体で信頼できないオブジェクトを使用しないことで、適切に除外する必要があります。 保護の追加レイヤーとして、 Reactは 、 Reactが信頼できないJSONを有効な要素と見なさないように、それをサポートするブラウザーで特定のシンボルタイプES2015（ES6）で要素をマークするようになりました。 この追加のセキュリティ保護が重要な場合は、 Babelのpolyfillなどの古いブラウザにSymbol polyphileを追加する必要があります。
• 可能な限り、React DOMはXHTML準拠のマークアップを生成するようになりました。
• React DOMは、次の標準HTML属性をサポートするようになりました： capture 、 challenge 、 inputMode 、 is 、 keyParams 、 keyType 、 minLength 、 summary 、 wrap 。 また、これらの非標準属性autoSave 、 results 、 securityもサポートするようになりました。
• React DOMは、名前空間属性にレンダリングできる次のSVG属性をサポートするようになりました： xlinkActuate 、 xlinkArcrole 、 xlinkHref 、 xlinkRole 、 xlinkShow 、 xlinkTitle 、 xlinkType 、 xmlBase 、 xmlLang 、 xmlSpace 。
• SVG 画像タグがReact DOMでサポートされるようになりました。
• React DOMでは、カスタム要素でカスタム属性がサポートされています（タグ名にハイフンが付いているもの、または属性が= "..." ）。
• React DOMは、 オーディオタグとビデオタグで次のメディアイベントをサポートするようになりました： onAbort 、 onCanPlay 、 onCanPlayThrough 、 onDurationChange 、 onEmptied 、 onEncrypted 、 onEnded 、 onError 、 onLoadedData 、 onLoadedMetadata 、 onLoadStart 、 onPause 、 onPlay 、 onPlay 、 onPlay 、 onPlay 、 onPlay 、 onLay onStalled 、 onSuspend 、 onTimeUpdate 、 onVolumeChange 、 onWaiting 。
• 多くの小さなパフォーマンスの改善が行われました。
• 多くの警告は、以前よりも多くの情報を表示します。
• アドオン：ES6クラスのPureRenderMixinの移行パスとしてshallowCompareアドオンが追加されました。
• アドオン： CSSTransitionGroupは、 -enter-activeまたは名前遷移に似たものを追加する代わりに、 任意のクラス名を使用できるようになりました。

新しい役立つ警告

• React DOMは、埋め込まれたHTML要素が無効な場合に警告するようになりました。これにより、アップグレード中の驚くべきエラーを回避できます。
• document.bodyをReactDOM.renderのコンテナとして直接接続すると、警告が発行されるようになりました。 これにより、DOMを変更するブラウザー拡張機能で問題が発生する可能性があります。
• 複数のReactインスタンスの共有はサポートされていないため、このケースを発見したときに警告を表示して、問題を回避できるようにしました。

重要な修正

• モバイルブラウザ、特にMobile Safariでは、クリックイベントがReact DOMにより確実に処理されます。
• ほとんどの場合、SVG要素は正しい名前空間で作成されます。
• React DOMは、複数のテキストの子を持つ<option>要素を正しくレンダリングし、オプションが正しく選択された状態でサーバー上の<select>要素をレンダリングするようになりました。
• 2つの別個のReactインスタンスが同じドキュメントにノードを追加すると（ブラウザー拡張機能がReactを使用する場合を含む）、React DOMは頑固にイベント処理中に例外をスローしないように試みます。
• React DOMで小文字以外のHTMLタグ（たとえば、 React.createElement（ 'DIV'） ）を使用しても問題は発生しませんが、JSXタグの命名規則（埋め込みコンポーネントの小文字、大文字カスタムコンポーネント用）。
• React DOMは、これらのCSSプロパティが無次元であり、値に「px」を追加しないことを理解しています： animationIterationCount 、 boxOrdinalGroup 、 flexOrder 、 tabSize 、 stopOpacity 。
• アドオン：テストユーティリティを使用する場合、 Simulate.mouseEnterおよびSimulate.mouseLeaveが機能するようになりました
• アドオン：ReactTransitionGroupは複数のノードを正しく処理し、同時に削除するようになりました。

投稿者： ベン・アルパート