React: [Fiber] Periksa lemparan requestAnimationFrame ketika react-dom diperlukan di server

Dibuat pada 3 Mar 2017  ·  5Komentar  ·  Sumber: facebook/react

Apakah Anda ingin meminta fitur atau melaporkan bug ?
Bug-ish

Bagaimana perilaku saat ini?
Saat melakukan rendering sisi server dengan React, membutuhkan react-dom (yang secara transitif membutuhkan ReactDOMFrameScheduling.js ) akan memunculkan pengecualian karena rAF tidak ditentukan.

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)

Ini dapat terjadi jika Anda memiliki komponen universal yang memiliki impor pustaka sisi klien tingkat atas, seperti react-router-scroll , yang memerlukan react-dom alih-alih react-dom/server .

Apa perilaku yang diharapkan?
Saya tidak mengharapkan kesalahan ini kecuali requestAnimationFrame benar-benar dipanggil. Contoh: periksa rAF dengan malas dan tentukan rIC.

Versi React mana, dan browser / OS mana yang terpengaruh oleh masalah ini?
Bereaksi 16.0.0-alpha.3 pada Node 7.7.1. Ini mulai terjadi pada alfa 3, yang mengirimkan dan mengaktifkan Fiber.

Bug

Komentar yang paling membantu

Solusi yang mencapai perilaku yang saya harapkan adalah setiap konsumen React harus mendefinisikan sedikit polyfill dalam file yang diimpor sebelum yang lain tetapi saya berharap banyak orang mengalami masalah ini. Seperti inilah tampilannya:

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

Semua 5 komentar

Solusi yang mencapai perilaku yang saya harapkan adalah setiap konsumen React harus mendefinisikan sedikit polyfill dalam file yang diimpor sebelum yang lain tetapi saya berharap banyak orang mengalami masalah ini. Seperti inilah tampilannya:

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

Kita dapat memperbaiki ini dengan malas menginisialisasi rAF polyfill, tetapi sekarang setelah saya memikirkannya, tampaknya disayangkan bahwa hanya mengimpor findDOMNode (yang mungkin dilakukan oleh komponen) menjalankan seluruh kode init rekonsiliasi klien .

@gaearon Bukankah seharusnya sudah tertangkap di unit test

Juga, yang lebih penting, bukankah membutuhkan react-dom dan menjalankan findDOMNode di server merupakan anti-pola, dan komponen tersebut harus menghindarinya dalam kaitan yang berjalan di server?

Juga, yang lebih penting, bukankah memerlukan react-dom dan menjalankan findDOMNode di server merupakan anti-pola, dan komponen itu harus menghindarinya dalam kaitan yang berjalan di server?

Anda tidak boleh menjalankannya di server, tetapi mengimpornya baik-baik saja. Jika tidak, bagaimana Anda akan menulis komponen yang menggunakan findDOMNode pada klien tetapi masih berfungsi di server?

Bukankah seharusnya itu tertangkap dalam unit test

Tidak, pengujian tidak menangkap ini karena kami menyiapkan polyfill rAF global sebagai bagian dari lingkungan pengujian kami.

Edit: PR hanya untuk ilustrasi. Baru saja menjalankan tes unit. Belum ada linting dan run yang lebih cantik.

Membuka PR untuk meletakkan ide dalam kode.

Saya memindahkan cek sebesar rAF di dalam ReactFiberScheduler

Tapi sekarang, saya kehilangan kemampuan untuk melempar jika rAF tidak di-polyfill. Apakah ini tempat yang tepat untuk pemeriksaan malas yang Anda sebutkan?

Apakah halaman ini membantu?
0 / 5 - 0 peringkat