Dan Abramovによる記事「Reactについて誰も教えてくれないもの」に関する詳細なコメント

みなさんこんにちは！ Reduxの作成者であるダン・アブラモフは最近、Medium Thingsに関する記事にかなり大規模なコメントを残しました。React.jsについては誰もあなたに話さないでしょう。

実際、現在の記事は、彼の解説の私の翻訳です。後者には、React / React Routerの現在および将来の状況に関する貴重なコメントが含まれているからです。

これが誰かに役立つことを願っています。

---

こんにちは、フィードバックをありがとう！ :)

Reactでの不快な経験を共有していただきありがとうございます。

あなたの投稿にはReactコミュニティで広まっている誤解が含まれているので、少し時間をとって同じ問題を抱えている人に説明したいと思いました。

これは、Reactが誰にとっても同じようにうまく機能することや、提起した問題が無関係であることを意味するものではありません。 しかし、私の意見では、これらの問題を正しく理解するために特定することが重要ないくつかのポイントがあります。

Facebookは次のメジャーリリースに向けてフレームワークを完全に書き直す計画を発表したばかりであり、これはおそらくコードが破棄されることを意味しているため、React 15.5.0でアプリケーションの作成を開始しました。現在のソースコードはサポートされなくなったためです。

「完全に書き換えられた」には下位互換性があるため、このステートメントは正しくありません。 次のリリースについて話すときはいつでもこれを強調しますが、それでも、もう一度繰り返す価値があります。

React 16（まだ処理中） は 「リライト」されていますが、同じパブリックAPIを持っています。 Facebookの30,000（！）以上のコンポーネントのうち、変更する必要があるのは約12個だけであり、これらのいくつかのコンポーネントはサポートされていない文書化されていない動作に依存していました。

これに基づいて、互換性は文字通り99.9％です。 これにより、React 16があなたのコードで動作するという自信が得られます。

停滞のない安定性へのコミットメントについては、こちらをご覧ください。

フレームワークを使用してプロジェクト全体を設定する方法の専門家ではありません（この作業をcreate-react-appなどのcli-toolに委ねることに懐疑的です ）

Reactアプリの作成は、WebpackとBabelの上にある薄いレイヤーです。 プロジェクトコードは生成されませんが、推奨される方法でこれらのツールを構成します。

次の文の定型文と開始コードに関する苦情は、特にこの問題の解決策があることを考えると、あまり公平ではないようですが、あなたは意図的にそれを使用しないことに決めました。

この分野にはまだ多くの作業がありますが、過去1年間で状況は改善されたと思います。Reactを将来再び使用することに決めた場合は、彼にチャンスを与えてください。

2、3時間のリファクタリングの後、Reduxに大量のボイラープレートコード（ActionTypes、Actions、Reducers、connect ...）が必要なため、コードが成長し続け、以前の3倍になったことに気付きました

特に不要な場合はReduxを使用しないでください。明らかに多くの定型文が含まれているためです。

Reactには状態システムが組み込まれています。コンポーネント間で状態を分散する必要がある場合は、これから始めて状態をより高いレベルに上げることをお勧めします。

必要に応じていつでもReduxを追加できますが、MobXまたはReduxで開発を開始することは、多くの場合猿です。

React-routerはFacebookによって公式にサポートされておらず、その開発者はわずか5か月で3つのメジャーバージョンをリリースするという素晴らしいアイデアを持っていました。

私はReact Routerと提携していませんが、この記述は間違っていると思います。 React Routerリリースをフォローしている場合は、次のことに注意する必要があります。

• 1.0は2015年にリリースされました。
• 2.0は2016年2月にリリースされ、主にバージョン1.0との下位互換性があります（ただし、バージョン3.0で予定されているAPIの変更に関する警告が追加されています）
• 3.0は2016年10月にリリースされ、基本的にはバージョン2.0と同じですが、APIに最終的な変更が加えられています。

したがって、（自分が何をしているかわからないかもしれないとして）安定したバージョンにアップグレードするだけであれば、バージョン1.0から2.0への移行はほとんど問題なく行われているはずです。 たくさんの警告が表示されるはずであり、次のメジャーリリース（3.0）でこれらの警告が削除されるまでに8か月間修正する必要がありました。

3.0の直後にバージョン4.0が登場したことは間違いありません。 4.0は完全に書き直されたバージョンであり、その哲学はわずかに異なります（これは、Issues React Routerで長年にわたって報告されてきた多くのエラーと問題を修正するために行われます）。 バージョン4.0が3.0の直後にリリースされたことは正しいです。 しかし、ここにそのようなものがあります-あなたは絶対にそれに切り替える必要はありません。 3.0を使用しているアプリケーションはまだ多くあり、そのブランチは引き続き積極的にサポートされています。 したがって、バージョン3.0を使用している場合は何も起こりません。開発チームは、これに関心のある方がバージョン4.0に簡単に移行できるように移行パッチに取り組んでいます。

結果として、リリースの安定バージョンのみを使用した場合、React Routerは新しいAPIに切り替える一年を与えました。 彼らは長年の問題を修正するために4.xバージョンをリリースしましたが、必要に応じて3.xブランチを維持することにコミットしています。 私の意見ではそれほど悪くないようです！

問題が何であるかを理解すると、ウサギの穴に引きずり込まれ、アプリケーションが正常に機能できるようにするために、空のdivをどこにでも強制的に追加しました

JS関数を使用して単純に機能コンポーネントをレンダリングできますが、仮想DOMが正しく作成されるように、すべてのマークアップを何らかのタグでラップする必要があります

あなたがそれに注意を払ってくれてうれしい！ React 16はrender()



関数から配列を返すことをサポートするため、これらすべてのdivおよびラッピングタグを削除できます。 私たちはあなたの人生をより良くするために努力しています。

Reactは、サーバー側（PHPなど）のファイルの使用を置き換えるために生まれた高度なレンダリングフレームワークであり、このツイートを確認するHTMLと混合されているようです。

それがあなたの言うことを正確に理解していませんでした。 しかし、Reactが私たち（およびAirbnb、Twitter、Pinterest、その他の会社の製品を使用している人たち）に理にかなっている理由に興味がある場合、Reactは、明示的なデータストリームとDOMツリーの手動制御の欠如のおかげで、通常言っていますバグの少ないアプリケーションを作成します。 そして、これらの問題を解決するために他の戦略を見つけることができれば素晴らしいことです。

この記事では、一部の開発者がReactが役立つと考える理由の詳細を明らかにしているので、それを見てみることをお勧めします！ また、Reactが問題を解決しない場合や、問題を解決するためにEmberやAngularなどの代替フレームワークを単に好む場合にも役立ちます。

明らかな単純さは、たった1行のコードを書き始める前に構成する必要のある一連のツールの背後に隠れています。

必要に応じてES6およびJSXなしで React を使用できるため、このステートメントは正しくありません。 アプリケーションに1つのスクリプトタグを記述するのと同じくらい簡単です。

しかし、ビルドツールは有用であると考えています（リンターの使用について言及している場合、おそらく同じ意見があります）。 構成は簡単ではありませんが、Create React Appなどのソリューションにより、よりアクセスしやすくなり、基本的なプロジェクト（Webpackなど）が時間とともに使いやすくなることを期待しています（Webpack 2は、この分野で順調に進歩しています）構成チェック）。 したがって、私はこれらのプロジェクトについて楽観的ですが、人々がそれらなしでReactを使用したい理由を理解しています。

React react-dom



をインポートし、スクリプトにreact



react-dom



必要があります。後者を使用することはありません。Reactチーム自体にしかわからない何らかの理由で

理由は、JSXコードを変換するにはReactスコープが必要なためです。これは、JSXがグローバルブラウザー変数を処理する方法だからです。 これは以前の苦情に関連しているだけです。ビルダーを使用しなくてもJSXが機能するようにしたいのです。

DOMのCSSクラスを定義するには、 class



代わりにclassName



を使用する必要があります

あなたは完全に正しいです、それは迷惑です。 これは、DOM APIに基づいた最も早い設計決定の1つであり、混乱を招きます。 これは将来変更できます！

そして、Github Issuesで1000以上のヒットがあるフレームワークに何を期待しましたか

React NativeのAPIははるかに広く、非常に人気があるため、問題で多くの呼び出しを受け取ることは当然です。 それらの多くはサポートのリクエストですが、バグを修正し、人々が問題を解決するのを支援するのに役立つことを感謝しています。

ネイティブアプリケーションを開発するために、デフォルトのアルファ依存関係（React@16.0.0-alpha.6）を設定できるのは何ですか？！？

Reactパッケージバージョンは、コード（ Component



およびcreateElement



）がほとんど含まれていないため、一般にReact Nativeユーザーには適していません。 reconciler



コードは、React Nativeと個別に同期します。 したがって、これはRNとReactのさまざまなリリースサイクルのアーティファクトですが、RNアプリケーションが不安定なバージョンのReactを使用することを意味するものではありません。 これは、Facebookで制作に使用しているものとまったく同じバージョンです。 私は同意しますが、これは混乱を招くものであり、近い将来にReactとReact Native間のリリースプロセスを修正したいと考えています。

要約すると、あなたの記事でこれらの問題を提起したことに感謝します。 彼らは非常に頻繁に現れ、種をもみ殻から分離することが重要だと考えました。 しかし、私たちとReactエコシステムがReactユーザーにより便利なものを提供するために、間違いなくもっと多くの仕事があります。これらの一般的な問題を定式化して、よりよく解決できることを嬉しく思います。

編集：このコメントの最初のバージョンの受動的な攻撃性を指摘したすべての人に感謝したいと思います。 私はこれについて非常に謝罪します！ 私はより専門的な口調でそれを編集しました。それは出版前にやらなければなりませんでした。 絵文字もすべて削除しましたが、Twitterでそれらを見つけることができます。