React 0.14がリリース候補版に到達,パッケージ分割や'Refs'文法などを新たに追加

ベータテスト開始から2ヶ月を経たReact 0.14が,リリース候補のステータスに到達した。0.14ではレンダリングとコア部分の分離が実施され,ステートレスコンポーネントの宣言が簡単になり,新たなref構文が追加されている。

React 0.14はreactreact-domという,2つのパッケージに分割される予定である。 この決定はReactと,それがDOMにレンダリングされる方法の分離を目的としたものだ。この分割により,reactにはReact.createElement, React.createClass, React.Component, React.PropTypes, React.childrenといったコンポーネント生成のメソッドが,もう一方のreact-donには,ReactDOM.render, ReactDOM.unmountComponentAtNode, ReactDOM.findDOMNodeといったレンダリングメソッドが配置される。またreact-dom/serverが,コンポーネントのサーバ側レンダリングのサポートを提供する。

Facebookは今回の分割を通じて,2つの目標を達成しようとしている。

  • FacebookのDOMレンダリング実装を,誰でも自分のものに置き換えられるようにすること。
  • react-dom, react-native, react-art, react-canvas, react-threeといったコンポーネントを,複数のレンダリングエンジンで共用可能にすること。

React 0.14で導入されたもうひとつの大きな変更は,組込みDOMノードに対するrefの概念だ。React 0.13では,refからのノードのプロパティにアクセスするためには,次のような記述が必要だった。

const nameNode = this.refs.name.getDOMNode();

React 0.14では,組込みReactノードに対するrefはノードそのものであるため,記述が簡単になる。

const nameNode = this.refs.name;

ユーザ設計のノードには影響せず,組込みノードにのみ影響するというこの変更は,refはそもそもDOMノードへのアクセス以外に使い道がない,という考えによるものだ。同じ文脈では.getDOMNode()が廃止され,ReactDOM.findDOMNodeに置き換えられている。この移行の支援策としてFacebookは,codedというスクリプトをリリースしている。

さらにReact 0.14では,他のコンポーネントで構成されるステートレスコンポーネントを簡単に宣言できるような仕組みも試みられている。これはReact 0.13ローンチ時の,Facebookの技術者による発言に沿ったものだ。

残念ながらReactiのES6クラスでは,ミックスインのサポートのローンチは予定されていません。慣用的なJavaScriptのみを使用する,というコンセプトの目的は,それによって損なわれることになります。[…] 一般的なタスクをミキシングなしで容易にできるように,複合的なAPIの設計にも新たに着手する予定です。

React 0.14の新しい構文では,引数としてpropsを使用したり,レンダリングする要素を返したりすることが可能になる。

var Aquarium = (props) => {
  var fish = getFish(props.species);
  return <Tank>{fish}</Tank>;
};

一方で,前述したthis.getDOMNode()の他にもsetPropsreplacePropsなど,新たに非推奨になったものもある。さらにReact 0.13の非推奨警告は,そのすべてがエラーとなるように変更された。

React 0.14はnpmからインストール可能だ。

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

問題点の報告は,React GitHUBリポジトリのバグトラッカを通じて行う。