15 React Temuduga Soalan dengan Penyelesaian

Populariti React tidak menunjukkan tanda -tanda penurunan, dengan permintaan pemaju masih melampaui bekalan di banyak bandar di seluruh dunia. Bagi pemaju yang kurang berpengalaman (atau mereka yang telah keluar dari pasaran pekerjaan untuk seketika), menunjukkan pengetahuan anda di peringkat wawancara boleh menakutkan.

Dalam artikel ini, kita akan melihat lima belas soalan yang meliputi pelbagai pengetahuan yang penting untuk memahami dan bekerja dengan berkesan dengan React. Untuk setiap soalan, saya akan meringkaskan jawapannya dan memberi pautan ke sumber tambahan di mana anda boleh mengetahui lebih lanjut.

Takeaways Key

Artikel ini menyediakan senarai komprehensif 15 soalan wawancara reaksi biasa dengan penyelesaian mereka, yang meliputi pelbagai pengetahuan yang penting untuk pemahaman dan bekerja dengan berkesan dengan React, seperti komponen maya, jsx, kelas dan fungsional, negeri dan prop, React cangkuk, dan banyak lagi.
Artikel ini menekankan pentingnya memahami perbezaan antara kelas dan komponen fungsional, peranan kunci dalam membuat koleksi, dan perbezaan antara negeri dan prop.
Artikel ini juga meliputi topik yang lebih maju seperti penggerudian prop, konteks reaksi, redux, pendekatan yang berbeza untuk menggayakan aplikasi React, dan konsep komponen terkawal dan tidak terkawal.
• Artikel ini menyimpulkan dengan menonjolkan kelebihan cangkuk React, menghapuskan keperluan untuk komponen berasaskan kelas, menjadikannya lebih mudah untuk menggunakan semula logik, dan membawa kepada kod yang lebih mudah dibaca dan boleh diuji.
• 1. Apakah dom maya?

Jawab

DOM maya adalah perwakilan dalam memori unsur-unsur HTML sebenar yang membentuk UI aplikasi anda. Apabila komponen diberikan semula, DOM maya membandingkan perubahan kepada model DOM untuk membuat senarai kemas kini yang akan digunakan. Kelebihan utama adalah bahawa ia sangat cekap, hanya membuat perubahan minimum yang diperlukan kepada DOM sebenar, dan bukannya perlu membuat semula ketulan besar.

bacaan selanjutnya

memahami dom maya

Dom maya dijelaskan
• 2. Apa itu JSX?

Jawab

JSX adalah lanjutan kepada sintaks JavaScript yang membolehkan kod menulis yang kelihatan seperti HTML. Ia dikumpulkan ke panggilan fungsi JavaScript biasa, menyediakan cara yang lebih baik untuk membuat markup untuk komponen anda.

Ambil jsx ini:

ia diterjemahkan ke JavaScript berikut:

<span><span><span><div</span> className<span>="sidebar"</span> /></span>
</span>

bacaan selanjutnya

• Pengenalan kepada JSX
• jsx secara mendalam

3. Apakah perbezaan antara komponen kelas dan yang berfungsi?

Jawab

Sebelum React 16.8 (pengenalan cangkuk), komponen berasaskan kelas digunakan untuk membuat komponen yang diperlukan untuk mengekalkan keadaan dalaman, atau menggunakan kaedah kitaran hayat (iaitu ComponentDidMount dan harus dikomponenkan). Komponen berasaskan kelas adalah kelas ES6 yang memanjangkan kelas komponen React dan, sekurang-kurangnya, melaksanakan kaedah render ().

Komponen Kelas:

<span>React.createElement(
</span>  <span>'div',
</span>  <span>{className: 'sidebar'}
</span><span>)
</span>

Komponen fungsional tidak beraksi (sekali lagi,

Komponen Fungsi:

<span>class Welcome extends React<span>.Component</span> {
</span>  <span>render() {
</span>    <span>return <h1>Hello, {this.props.name}</h1>;
</span>  <span>}
</span><span>}
</span>

Nota: Pengenalan cangkuk dalam React 16.8 bermaksud bahawa perbezaan ini tidak lagi berlaku (lihat soalan 14 dan 15).

bacaan selanjutnya

• komponen fungsional vs komponen kelas dalam reaksi
• Fungsional vs komponen kelas dalam React

4. Apa kunci yang digunakan?

Jawab

Apabila memberikan koleksi dalam React, menambah kunci kepada setiap elemen berulang adalah penting untuk membantu React Track persatuan antara elemen dan data. Kunci harus menjadi ID yang unik, idealnya UUID atau rentetan unik lain dari item koleksi:

<span>function <span>Welcome</span>(props) {
</span>  <span>return <h1>Hello, {props.name}</h1>;
</span><span>}
</span>

tidak menggunakan kunci, atau menggunakan indeks sebagai kunci, boleh mengakibatkan tingkah laku aneh apabila menambahkan dan mengeluarkan item dari koleksi.

bacaan selanjutnya

• Senarai dan Kekunci
• Memahami Prop Kunci React

5. Apakah perbezaan antara negeri dan prop?

Jawab

Props adalah data yang diserahkan kepada komponen dari ibu bapa. Mereka tidak boleh bermutasi, tetapi hanya dipaparkan atau digunakan untuk mengira nilai -nilai lain. Negeri adalah data dalaman komponen yang boleh diubah suai sepanjang hayat komponen, dan dikekalkan antara render semula.

bacaan selanjutnya

• props vs state

6. Mengapa memanggil setState dan bukannya secara langsung bermutasi?

Jawab

Jika anda cuba untuk bermutasi keadaan komponen secara langsung, React tidak mempunyai cara untuk mengetahui bahawa ia perlu membuat semula komponen. Dengan menggunakan kaedah setState (), React boleh mengemas kini UI komponen.

Bonus

Sebagai bonus, anda juga boleh bercakap tentang bagaimana kemas kini keadaan tidak dijamin menjadi segerak. Sekiranya anda perlu mengemas kini keadaan komponen berdasarkan sekeping negeri (atau prop) yang lain, lulus fungsi ke setState () yang mengambil negeri dan prop sebagai dua argumennya:

<span><span><span><div</span> className<span>="sidebar"</span> /></span>
</span>

bacaan selanjutnya

• menggunakan keadaan dengan betul

7. Bagaimana anda menyekat jenis nilai yang diluluskan sebagai prop, atau membuatnya diperlukan?

Jawab

Untuk menaip-memeriksa alat peraga komponen, anda boleh menggunakan pakej jenis prop (sebelum ini dimasukkan sebagai sebahagian daripada React, sebelum 15.5) untuk mengisytiharkan jenis nilai yang diharapkan dan sama ada prop diperlukan atau tidak:

<span>React.createElement(
</span>  <span>'div',
</span>  <span>{className: 'sidebar'}
</span><span>)
</span>

bacaan selanjutnya

• typechecking dengan proptypes

8. Apakah penggerudian prop, dan bagaimana anda boleh mengelakkannya?

Jawab

Penggerudian prop adalah apa yang berlaku apabila anda perlu lulus data dari komponen induk ke komponen yang lebih rendah dalam hierarki, "penggerudian" melalui komponen lain yang tidak memerlukan alat peraga sendiri selain menyampaikannya.

Kadang -kadang penggerudian prop boleh dielakkan dengan refactoring komponen anda, mengelakkan komponen memecahkan komponen ke dalam yang lebih kecil, dan menjaga keadaan biasa dalam ibu bapa yang paling dekat. Di mana anda perlu berkongsi keadaan antara komponen yang mendalam/jauh di dalam pokok komponen anda, anda boleh menggunakan API konteks React, atau perpustakaan pengurusan negeri yang berdedikasi seperti Redux.

bacaan selanjutnya

• Prop Drilling

9. Apa itu React Context?

Jawab

Konteks API disediakan oleh React untuk menyelesaikan masalah perkongsian keadaan antara pelbagai komponen dalam aplikasi. Sebelum konteks diperkenalkan, satu -satunya pilihan adalah untuk membawa perpustakaan pengurusan negeri yang berasingan, seperti Redux. Walau bagaimanapun, ramai pemaju merasakan bahawa Redux memperkenalkan banyak kerumitan yang tidak perlu, terutamanya untuk aplikasi yang lebih kecil.

bacaan selanjutnya

• Konteks (React Docs)
• bagaimana untuk menggantikan redux dengan cangkuk reaksi dan konteks api

10. Apa itu Redux?

Jawab

Redux adalah perpustakaan pengurusan negeri pihak ketiga untuk React, yang dibuat sebelum API konteks wujud. Ia berdasarkan konsep bekas negara, yang dipanggil kedai, komponen itu dapat menerima data dari sebagai alat peraga. Satu -satunya cara untuk mengemas kini kedai adalah untuk menghantar tindakan ke kedai, yang diserahkan kepada pengurangan. Reducer menerima tindakan dan keadaan semasa, dan mengembalikan keadaan baru, mencetuskan komponen melanggan untuk membuat semula.

bacaan selanjutnya

Bermula dengan Redux
menyelam mendalam ke redux

11. Apakah pendekatan yang paling biasa untuk menggayakan aplikasi React?

Jawab

Terdapat pelbagai pendekatan untuk menggayakan komponen reaksi, masing -masing dengan kebaikan dan keburukan. Yang utama disebutkan ialah:

• Gaya inline: Hebat untuk prototaip, tetapi mempunyai batasan (mis. Tiada gaya kelas pseudo)
• Gaya CSS Berasaskan Kelas: Lebih banyak prestasi daripada gaya sebaris, dan biasa kepada pemaju yang baru untuk bertindak balas
• CSS-in-JS Styling: Terdapat pelbagai perpustakaan yang membolehkan gaya diisytiharkan sebagai JavaScript dalam komponen, memperlakukan mereka lebih seperti kod.

bacaan selanjutnya

Cara Gaya React Components

12. Apakah perbezaan antara komponen terkawal dan tidak terkawal?

Jawab

Dalam dokumen HTML, banyak elemen bentuk (mis.

, , <putput>) mengekalkan keadaan mereka sendiri. Komponen yang tidak terkawal merawat DOM sebagai sumber kebenaran untuk keadaan input ini. Dalam komponen terkawal, keadaan dalaman digunakan untuk menjejaki nilai elemen. Apabila nilai input berubah, reaksi reaksi input. <p> </p> Komponen yang tidak terkawal boleh berguna apabila mengintegrasikan dengan kod tidak bertindak balas (mis. Jika anda perlu menyokong beberapa jenis plugin bentuk jQuery). <p> </p> bacaan selanjutnya <h3> </h3> <ul> terkawal vs input tidak terkawal <li> </li> Komponen terkawal (React Docs) <li> </li> Komponen yang tidak terkawal (React Docs) <li> </li> </ul> 13. Apakah kaedah kitaran hayat? <h2> </h2> Jawab <h3> </h3> Komponen berasaskan kelas boleh mengisytiharkan kaedah khas yang dipanggil pada titik-titik tertentu dalam kitaran hayatnya, seperti ketika ia dipasang (diberikan ke dalam DOM) dan ketika ia tidak dapat dikelilingi. Ini berguna untuk menubuhkan dan meruntuhkan perkara yang mungkin diperlukan oleh komponen, menubuhkan pemasa atau mengikat peristiwa pelayar, sebagai contoh. <p> </p> Kaedah kitaran hayat berikut tersedia untuk dilaksanakan dalam komponen anda: <p> </p> <ul> ComponentWillMount: Dipanggil selepas komponen dibuat, tetapi sebelum ia diberikan ke dalam Dom <li> </li> ComponentDidMount: Dipanggil selepas render pertama; Elemen DOM komponen kini tersedia <li> </li> ComponentWillReceiveProps: Dipanggil apabila kemas kini prop <li> </li> harus komponenupdate: Apabila alat peraga baru diterima, kaedah ini dapat menghalang pengoptimuman untuk mengoptimumkan prestasi <li> </li> ComponentWillUpdate: Dipanggil apabila prop baru diterima <li> dan <em> harus dikomponponenupdate pulangan benar </em> </li> ComponentDidUpdate: Dipanggil selepas komponen telah dikemas kini <li> </li> ComponentWillUnmount: Dipanggil sebelum komponen dikeluarkan dari DOM, membolehkan anda membersihkan perkara seperti pendengar acara. <li> </li> </ul> Apabila berurusan dengan komponen berfungsi, cangkuk useeffect boleh digunakan untuk meniru tingkah laku kitaran hayat. <p> </p> bacaan selanjutnya <h3> </h3> <ul> React Rajah Kaedah Kitaran Hidup <li> </li> API kitaran hayat komponen <li> </li> </ul> 14. Apakah cangkuk reaksi? <h2> </h2> Jawab <h3> </h3> cangkuk adalah percubaan React untuk membawa kelebihan komponen berasaskan kelas (iaitu kaedah negeri dan kitaran hayat) kepada komponen berfungsi. <p></p><h3> bacaan selanjutnya </h3> <ul> <li> belajar cangkuk reaksi dalam 5 minit </li> <li> React Hooks: Cara Memulakan & Membina Sendiri </li> </ul> <h2> 15. Apakah kelebihan cangkuk reaksi? </h2> <h3> Jawab </h3> <p> Terdapat beberapa manfaat yang dinyatakan untuk memperkenalkan cangkuk untuk bertindak balas: </p> <ul> <li> Mengeluarkan keperluan untuk komponen berasaskan kelas, cangkuk kitaran hayat, dan kata kunci ini shenanigans </li> <li> menjadikannya lebih mudah untuk menggunakan semula logik, dengan abstrak fungsi umum ke dalam cangkuk tersuai </li> <li> kod yang lebih mudah dibaca, boleh diuji dengan dapat memisahkan logik dari komponen itu sendiri </li> </ul> <h3> bacaan selanjutnya </h3> <ul> <li> faedah cangkuk reaksi </li> <li> cangkuk reaksi - kelebihan dan perbandingan dengan pendekatan logik yang boleh diguna semula yang lebih lama dalam jangka pendek </li> </ul> <h2> membungkus </h2> <p> Walaupun tidak semestinya senarai komprehensif (React sentiasa berkembang), soalan -soalan ini meliputi banyak tanah. Memahami topik -topik ini akan memberi anda pengetahuan yang baik tentang perpustakaan, bersama dengan beberapa perubahan yang paling terkini. Berikutan dengan bacaan selanjutnya yang dicadangkan akan membantu anda mengukuhkan pemahaman anda, jadi anda dapat menunjukkan pengetahuan yang mendalam. </p> <p> kami akan mengikuti dengan panduan untuk bertindak balas dengan latihan kod wawancara, jadi perhatikannya dalam masa terdekat. </p> <p> nasib baik! </p> <h2> Soalan Lazim Mengenai Bersedia Untuk Temuduga React </h2> <h3> </h3> Bagaimana saya harus mempersiapkan wawancara kerja pemaju React? <p> untuk mempersiapkan wawancara kerja pemaju React, konsep teras React React, latihan pengekodan amalan yang berkaitan dengan React, mengkaji semula portfolio projek React anda, dan bersedia untuk membincangkan pengalaman anda dengan pengurusan negeri, kitaran hayat komponen, dan teknologi yang berkaitan seperti redux atau React Router. </p> Menyelidiki syarikat dengan melawat laman webnya, memeriksa aplikasi atau projek webnya, dan memahami bagaimana React digunakan dalam timbunan teknologi mereka. Menyesuaikan pengetahuan anda kepada keperluan khusus mereka dan menunjukkan semangat anda untuk menyumbang kepada projek-projek berasaskan reaksi mereka. <h3> menyesuaikan resume anda dengan menonjolkan pengalaman anda dengan React, termasuk projek, teknologi, dan pencapaian tertentu yang berkaitan dengan pembangunan React. Tekankan pengetahuan anda tentang komponen React, pengurusan negeri, dan mana-mana perpustakaan yang berkaitan. </h3> Soalan Temuduga React Biasa termasuk "Jelaskan kitaran hayat komponen React," "Bagaimana anda menguruskan Negeri dalam React?," Dan "Apakah faedah menggunakan cangkuk React?" <p></p><h3> </h3> Bagaimanakah saya dapat mempersiapkan soalan teknikal yang berkaitan dengan pembangunan reaksi? <p> Latihan pengekodan amalan yang berkaitan dengan React, seperti komponen bangunan, menguruskan negara, dan bekerja dengan prop dan konteks. Biasakan diri anda dengan konsep reaksi seperti dom maya dan kebolehgunaan semula komponen. </p> <h3> </h3> Bagaimana saya boleh menunjukkan kecekapan saya dengan React semasa wawancara? <p> Menunjukkan kemahiran React anda dengan membincangkan pengalaman anda dengan projek-projek dunia nyata, menjelaskan bagaimana anda telah mengoptimumkan prestasi, dan berkongsi contoh komponen kompleks yang telah anda bina. Bersedia untuk menerangkan pendekatan anda kepada pengurusan negara dan seni bina komponen. </p> Memahami kitaran hayat komponen React adalah penting untuk menguruskan tingkah laku komponen dan keadaan secara cekap. Bersedia untuk menerangkan kaedah kitaran hayat dan apabila anda menggunakannya dalam senario dunia sebenar. <h3> Kesalahan umum termasuk gagal untuk menjelaskan projek anda dengan secukupnya, tidak bertanya soalan mengenai syarikat atau peranan, dan menunjukkan kekurangan pengetahuan mengenai asas -asas yang bertindak balas. Elakkan perangkap ini dengan penyediaan menyeluruh dan komunikasi yang bijak. </h3></putput>

Atas ialah kandungan terperinci 15 React Temuduga Soalan dengan Penyelesaian. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!