React: [ファイバー]サーバーでreact-domが必要な場合にrequestAnimationFrameがスローされるかどうかを確認します

作成日 2017年03月03日  ·  5コメント  ·  ソース: facebook/react

機能をリクエストしバグを報告しますか?
バグっぽい

現在の動作は何ですか?
Reactでサーバー側のレンダリングを行う場合、rAFが定義されていないため、 react-dom (推移的にReactDOMFrameScheduling.jsが必要)を要求すると例外がスローされます。

Invariant Violation: React depends on requestAnimationFrame. Make sure that you load a polyfill in older browsers.
    at invariant (app/node_modules/fbjs/lib/invariant.js:44:15)
    at Object.<anonymous> (app/node_modules/react-dom/lib/ReactDOMFrameScheduling.js:30:3)

これは、 react-dom/serverではなくreact-domを必要とする、 react-router-scrollなどのクライアント側ライブラリのトップレベルのインポートを持つユニバーサルコンポーネントがある場合に発生する可能性があります。

期待される動作は何ですか?
requestAnimationFrameが実際に呼び出されない限り、このエラーは発生しないと思います。 例:rAFを遅延チェックし、rICを定義します。

この問題の影響を受けるReactのバージョンとブラウザ/ OSはどれですか?
ノード7.7.1で16.0.0-alpha.3を反応させます。 これは、Fiberを出荷して有効にしたalpha3で発生し始めました。

Bug

最も参考になるコメント

私の期待する動作を実現する回避策は、Reactの各コンシューマーが、他のコンシューマーよりも先にインポートされるファイルに小さなポリフィルを定義することですが、多くの人がこの問題に遭遇することを期待しています。 これはどのように見えるかです:

global.window = global;
window.addEventListener = () => {};
window.requestAnimationFrame = () => {
  throw new Error('requestAnimationFrame is not supported in Node');
};

全てのコメント5件

私の期待する動作を実現する回避策は、Reactの各コンシューマーが、他のコンシューマーよりも先にインポートされるファイルに小さなポリフィルを定義することですが、多くの人がこの問題に遭遇することを期待しています。 これはどのように見えるかです:

global.window = global;
window.addEventListener = () => {};
window.requestAnimationFrame = () => {
  throw new Error('requestAnimationFrame is not supported in Node');
};

rAFポリフィルを遅延初期化することでこれを修正できますが、今考えてみると、 findDOMNode (コンポーネントが行う可能性が高い)をインポートするだけでクライアントリコンシラーの初期化コード全体が実行されるのは残念なことのようです。 。

@gaearonユニットテストで捕まえられるべきではなかった

また、さらに重要なことは、サーバー上でreact-domを要求してfindDOMNodeを実行することはアンチパターンではなく、そのコンポーネントはサーバー上で実行されるフックでそれらを回避する必要がありますか?

また、さらに重要なことは、react-domを必要とせず、サーバーでfindDOMNodeを実行することはアンチパターンではなく、コンポーネントはサーバーで実行されるフックでそれらを回避する必要がありますか?

サーバー上で実行するべきではありませんが、インポートすることは問題ありません。 それ以外の場合、クライアントでfindDOMNodeを使用し、サーバーで引き続き機能するコンポーネントをどのように作成しますか?

ユニットテストで捕まえられるべきではなかった

いいえ、テスト環境の一部としてグローバルrAFポリフィルを設定したため、テストではこれを検出できません。

編集:PRは説明のためだけのものです。 ユニットテストを実行しただけです。 糸くずやきれいな実行はまだありません。

アイデアをコードにまとめるためにPRを開きました。

ReactFiberScheduler内でrAFの小切手を移動しました

しかし今、 rAFがポリフィルされていない場合、私は投げる能力を失いました。 これはあなたが言及した怠惰なチェックに適した場所ですか?

このページは役に立ちましたか?
0 / 5 - 0 評価