Posted at

[javascript]React Fireについて調べて翻訳してみた

つい最近、知り合いのエンジニアから「React Fire読んでみなよ」と言われたのをきっかけにして、ちょっと記事を読んでみました。なので、今回は自分が理解できるように翻訳して載せていこうかなと思います。

なお、なんとなく翻訳しているため、日本語がおかしいところが多々あります。そこはごめんなさい:pensive:


React Fireとは

“React Fire”は、”React DOM”をより合理化させようと試みたものの一つである。

目標は、DOMの機能をより整理し、これまでのReactの問題点をもう一度見直し、Reactをよりコンパクトに速く実装することである。

残念ながらいくつかの機能は廃止される予定なので、将来的にReactのメジャーアップデートにおいてこの変更点をリリースしたいと思っている。

やはり、これらには価値があると思っている。そして私たちにはFacebookに5万以上のcomponentを保持しており、移行戦略においては常に誠実に保っている。

少数かつ特定の修正や”Codemod”を除き、私たちにはコードを再び生成する余裕がないのである。


React Fireにおける主な変更点


1. value属性に”input value”を反映させないようにする

元々はReact 15.2.0において追加されたものである。

DOMの概念モデルとして、「DOMインスペクタにおいての”value”がJSXのvalue属性と一致すること」であったので、とても要望があった。

しかし、それはDOMがどう機能するかではない。fieldにタイプした時、ブラウザにはvalue属性がアップデートされないのだ。

Reactもまたそのような動作をするべきではない。なので、この変更はバグを引き起こしかねない、と結論づけられた。


2. DocumentではなくReactのルートにeventを添付する

埋め込み式Reactアプリがより大きいシステムになった時に、documentにevent handlerを添付することは問題を引き起こす。

ATOMエディターはこの問題に最初に突き当たったケースの一つである。

大規模なwebサイトはいずれもまた、 React出ないコードまたはReactのルートと交流するstopPropagationに関連したいくつかの複雑なケースが開発されている。

私たちはアップデート間のランタイムチェックをより少なくするために、それぞれのルートにイベントを添付することを切実に行いたいとも思っている。


3. “onChange”から”onInput”に移行し、制御されていないコンポーネントを”polyfill(標準となったメソッドが存在しない場合に、自分で供給すること)”しない

DOMの中にinputイベントを置く際に、Reactが異なるイベントネームを使用していることで、混乱を生じさせてきた。

私たちが大した利得なしにこのような大規模な変更を行うことを避けるために、ここではいくつかの複雑さを取り除くために挙動を変更したいと思っている。突然変異したinputコントロールのようなケースの場合にのみ必要とする。

なので、この2つを共に変更することは意味をなさず、DOMイベントが制御していないコンポーネントをどうするか、onInputとonChangeを正確に稼働させる機会として使用される。


4. イベントシステムを劇的に単純化する。

現在のイベントシステムは、2013年の初期の実装からかろうじて変更されている。

これらはReact DOMとReact Nativeをとして再利用されいているので、無駄に抽象的である。

提供されている”polyfill”の多くが最新のブラウザに不必要なものである。そしてそれらのいくつかは、解決するより多くの問題を生み出している。

それはまた、React DOMのバンドルサイズの重要な部分を占めている。

まだ具体的な計画は現在持っていない。だが、おそらく完全にイベントシステムをフォークして、もし私たちがDOMに対して固執した場合に、どうやって最小限にできるかを見ている。

イベント構文を全て廃止することはもっともらしいと考えている。

私たちは、DOMの中で生成されず、生成するのに適した理由がないmediaのeventのように、イベントが次々に生成されるのをやめるべきだ。

私たちはポータルを通して生成されるような、Reactの特定の機能を保持していきたい。

しかし、私たちはこれをよりシンプルな手段を用いて試みていきたい。


5. classNameからclassへ

この機能は幾度となく提案されてきた。

私たちはReact 16においてすでにDOMノードにclassを通すようにしている。

これを作成する際の混乱点は、構文制御に注視しておらずに、それを保護しようとしているところだ。

私たちはこれ自身の変更は行わないが、それ以上のものは全て理にかなっている。コンポーネントシステムにとって処理が非常に困難なため、警告なしで双方を許可することはできない。

それぞれのコンポーネントでは正確には両方の処理の仕方を学ぶ必要があるが、そこにはコンフリクトの懸念がある。

多くのコンポーネントがclassNameを処理しているので、エラーを起こしやすい。


まとめ

将来的に5つの機能がメジャーアップデートによって変更されるのではないか、となっているみたいです。個人的には5. が一番やってほしいことかなあ、と思ってます!

あと、専門用語を含んだ日本語訳はとっても難しいことがわかった!!

随時アップデートしていきたいと思います。。。:cry:


参考

React Fire