React Hooks: Cara Memulakan & Membina Sendiri

cangkuk telah mengambil dunia React oleh ribut. Dalam tutorial ini, kami akan melihat apa cangkuk dan bagaimana anda menggunakannya. Saya akan memperkenalkan anda kepada beberapa cangkuk biasa yang kapal dengan React, serta menunjukkan kepada anda cara menulis sendiri. Pada masa yang telah anda selesai, anda akan dapat menggunakan cangkuk dalam projek React anda sendiri.

Takeaways Key

React Hooks Memudahkan Logik Komponen: Cangkuk membolehkan anda menggunakan ciri -ciri React State dan lain -lain tanpa kelas, menjadikan kod anda lebih bersih dan lebih mudah difahami.
useState dan useeffect adalah asas: `useState` membolehkan anda menambah keadaan kepada komponen berfungsi, manakala` useeffect` mengendalikan kesan sampingan yang diuruskan sebelum ini dalam kaedah kitaran hayat seperti `ComponentDidMount` dan` ComponentDidUpdate`.
• cangkuk tersuai Meningkatkan kebolehgunaan semula: Anda boleh membuat cangkuk anda sendiri untuk mengekstrak logik komponen ke dalam fungsi yang boleh diguna semula, menjadikan codebase anda lebih kering (jangan ulangi diri anda).
Cangkuk menyokong pelbagai negeri dan kesan: Anda boleh menggunakan pelbagai `useState` dan` useeffect` dalam satu komponen untuk menguruskan kepingan keadaan dan pelbagai kesan yang berlainan.
• cangkuk pihak ketiga melanjutkan fungsi: Menggunakan cangkuk dari perpustakaan pihak ketiga dapat memperkenalkan keupayaan tambahan dengan cekap, seperti mengambil data dengan `Axios-Hooks`.
• Peralihan dari kelas ke komponen berfungsi: Pengenalan cangkuk memberikan insentif yang kuat untuk refactor komponen berasaskan kelas yang sedia ada ke dalam berfungsi, memanfaatkan kebolehbacaan dan pemeliharaan yang lebih baik.
• apa itu cangkuk reaksi?
• React cangkuk adalah fungsi khas yang membolehkan anda untuk "cangkuk ke" reaksi ciri dalam komponen fungsi. Sebagai contoh, cangkuk UseState membolehkan anda menambah keadaan, sedangkan useeffect membolehkan anda melakukan kesan sampingan. Sebelum ini, kesan sampingan telah dilaksanakan menggunakan kaedah kitaran hayat. Dengan cangkuk, ini tidak lagi diperlukan.

Ini bermakna anda tidak lagi perlu menentukan kelas apabila membina komponen React. Ternyata seni bina kelas yang digunakan dalam React adalah punca banyak cabaran yang bertindak balas dengan pemaju setiap hari. Kami sering mendapati diri kita menulis komponen yang besar dan kompleks yang sukar untuk dipecah. Kod yang berkaitan disebarkan melalui beberapa kaedah kitaran hayat, yang menjadi rumit untuk dibaca, diselenggarakan dan diuji. Di samping itu, kita perlu berurusan dengan kata kunci ini apabila mengakses keadaan, prop dan kaedah. Kami juga perlu mengikat kaedah ini untuk memastikan mereka boleh diakses dalam komponen. Kemudian kita mempunyai masalah penggerudian prop yang berlebihan-juga dikenali sebagai neraka pembungkus-ketika berurusan dengan komponen pesanan tinggi.

Singkatnya, cangkuk adalah ciri revolusioner yang akan memudahkan kod anda, menjadikannya mudah dibaca, diselenggarakan, menguji secara berasingan dan menggunakan semula dalam projek anda. Ia hanya akan membawa anda satu jam untuk mengenali mereka, tetapi ini akan membuat anda berfikir secara berbeza mengenai cara anda menulis kod reaksi.

Cangkuk reaksi pertama kali diumumkan pada persidangan React yang diadakan pada Oktober 2018, dan mereka secara rasmi disediakan di React 16.8. Ciri ini masih dalam pembangunan; Masih terdapat beberapa ciri kelas React yang dipindahkan ke dalam cangkuk. Berita baiknya ialah anda boleh mula menggunakannya sekarang. Anda masih boleh menggunakan komponen kelas React jika anda mahu, tetapi saya ragu -ragu anda akan mahu selepas membaca panduan pengenalan ini.

Jika saya telah mengasyikkan rasa ingin tahu anda, mari kita menyelam dan lihat beberapa contoh praktikal.

Prasyarat

tutorial ini bertujuan untuk orang yang mempunyai pemahaman asas tentang apa yang bertindak balas dan bagaimana ia berfungsi. Jika anda seorang pemula yang bertindak balas, sila lihat kami bermula dengan Tutorial React sebelum meneruskan di sini.

Jika anda ingin mengikuti bersama -sama dengan contoh -contoh, anda harus mempunyai aplikasi React yang telah disediakan. Cara paling mudah untuk melakukan ini adalah dengan Alat App React React. Untuk menggunakan ini, anda akan mempunyai nod dan NPM yang dipasang. Sekiranya anda tidak mempunyai halaman muat turun Node.js dan ambil versi terkini untuk sistem anda (NPM dibundel dengan nod). Sebagai alternatif, anda boleh berunding dengan tutorial kami mengenai memasang nod menggunakan pengurus versi.

dengan nod dipasang, anda boleh membuat aplikasi React baru seperti SO:

npx create-react-app myapp

Ini akan mewujudkan folder myApp. Tukar ke folder ini dan mulakan pelayan pembangunan seperti:

<span>cd myapp
</span><span>npm start
</span>

Penyemak imbas lalai anda akan dibuka dan anda akan melihat aplikasi React baru anda. Untuk tujuan tutorial ini, anda boleh bekerja di komponen aplikasi, yang terletak di src/app.js.

Anda juga boleh mencari kod untuk tutorial ini di GitHub, serta demo kod siap pada akhir tutorial ini.

cangkuk usestate

Sekarang mari kita lihat beberapa kod. Cangkuk UseState mungkin cangkuk yang paling biasa yang dihantar dengan React. Seperti namanya, ia membolehkan anda menggunakan keadaan dalam komponen fungsi.

Pertimbangkan komponen kelas React berikut:

<span>import <span>React</span> from "react";
</span>
<span>export default class ClassDemo extends React<span>.Component</span> {
</span>  <span>constructor(props) {
</span>    <span>super(props);
</span>    <span>this.state = {
</span>      <span>name: "Agata"
</span>    <span>};
</span>    <span>this.handleNameChange = this.handleNameChange.bind(this);
</span>  <span>}
</span>
  <span>handleNameChange(e) {
</span>    <span>this.setState({
</span>      <span>name: e.target.value
</span>    <span>});
</span>  <span>}
</span>
  <span>render() {
</span>    <span>return (
</span>      <span><section>
</span>        <span><form autoComplete="off">
</span>          <span><section>
</span>            <span><label htmlFor="name">Name</label>
</span>            <span><input
</span>              type<span>="text"
</span>              name<span>="name"
</span>              id<span>="name"
</span>              value<span>={this.state.name}
</span>              onChange<span>={this.handleNameChange}
</span>            <span>/>
</span>          <span></section>
</span>        <span></form>
</span>        <span><p>Hello {this.state.name}</p>
</span>      <span></section>
</span>    <span>);
</span>  <span>}
</span><span>}
</span>

Jika anda mengikuti bersama dengan Create React App, hanya gantikan kandungan app.js dengan di atas.

ini adalah bagaimana ia kelihatan:

Beri diri anda seminit untuk memahami kodnya. Dalam pembina, kami mengisytiharkan harta nama di objek negara kita, serta mengikat fungsi handlenamechange kepada contoh komponen. Kami kemudian mempunyai borang dengan input, yang nilainya ditetapkan ke this.state.name. Nilai yang dipegang dalam ini.State.Name juga output ke halaman dalam bentuk ucapan.

Apabila pengguna menaip apa -apa ke dalam medan input, fungsi handlenamechange dipanggil, yang mengemas kini keadaan dan akibatnya ucapan.

Sekarang, kami akan menulis versi baru kod ini menggunakan cangkuk UseState. Sintaksnya kelihatan seperti ini:

npx create-react-app myapp

Apabila anda memanggil fungsi UseState, ia mengembalikan dua item:

• Negeri: Nama Negeri Anda - seperti this.state.name atau this.state.location.
• SetState: Fungsi untuk menetapkan nilai baru untuk keadaan anda. Sama dengan ini.setState ({name: newValue}).

InisialState adalah nilai lalai yang anda berikan kepada keadaan yang baru diisytiharkan semasa fasa pengisytiharan negeri. Sekarang bahawa anda mempunyai idea tentang apa yang digunakan, mari kita beraksi:

<span>cd myapp
</span><span>npm start
</span>

Perhatikan perbezaan antara versi fungsi ini dan versi kelas. Ia sudah lebih padat dan lebih mudah difahami daripada versi kelas, namun mereka berdua melakukan perkara yang sama. Mari kita pergi ke perbezaan:

• Pembina seluruh kelas telah digantikan oleh cangkuk useState, yang hanya terdiri daripada satu baris.
• Kerana cangkuk UseState mengeluarkan pembolehubah tempatan, anda tidak lagi perlu menggunakan kata kunci ini untuk merujuk fungsi atau pembolehubah keadaan anda. Secara jujur, ini adalah kesakitan utama bagi kebanyakan pemaju JavaScript, kerana ia tidak selalu jelas apabila anda harus menggunakannya.
• Kod JSX kini bersih kerana anda boleh merujuk nilai negeri tempatan tanpa menggunakan ini.State.

Saya harap anda kagum sekarang! Anda mungkin tertanya -tanya apa yang perlu dilakukan apabila anda perlu mengisytiharkan pelbagai nilai negeri. Jawapannya agak mudah: hanya panggil satu lagi cangkuk UseState. Anda boleh mengisytiharkan seberapa banyak yang anda mahukan, dengan syarat anda tidak mengatasi komponen anda.

NOTA: Apabila menggunakan cangkuk bertindak balas, pastikan untuk mengisytiharkannya di bahagian atas komponen anda dan tidak pernah bersyarat.

Multiple UseState Hooks

Tetapi bagaimana jika kita mahu mengisytiharkan lebih daripada satu harta di negeri? Tiada masalah. Hanya gunakan pelbagai panggilan untuk digunakan.

Berikut adalah contoh komponen dengan pelbagai cangkuk useState:

<span>import <span>React</span> from "react";
</span>
<span>export default class ClassDemo extends React<span>.Component</span> {
</span>  <span>constructor(props) {
</span>    <span>super(props);
</span>    <span>this.state = {
</span>      <span>name: "Agata"
</span>    <span>};
</span>    <span>this.handleNameChange = this.handleNameChange.bind(this);
</span>  <span>}
</span>
  <span>handleNameChange(e) {
</span>    <span>this.setState({
</span>      <span>name: e.target.value
</span>    <span>});
</span>  <span>}
</span>
  <span>render() {
</span>    <span>return (
</span>      <span><section>
</span>        <span><form autoComplete="off">
</span>          <span><section>
</span>            <span><label htmlFor="name">Name</label>
</span>            <span><input
</span>              type<span>="text"
</span>              name<span>="name"
</span>              id<span>="name"
</span>              value<span>={this.state.name}
</span>              onChange<span>={this.handleNameChange}
</span>            <span>/>
</span>          <span></section>
</span>        <span></form>
</span>        <span><p>Hello {this.state.name}</p>
</span>      <span></section>
</span>    <span>);
</span>  <span>}
</span><span>}
</span>

agak mudah, bukan? Melakukan perkara yang sama dalam versi kelas memerlukan anda menggunakan kata kunci ini lebih banyak lagi.

Sekarang, mari kita beralih ke cangkuk React Basic seterusnya.

useeffect Hook

Kebanyakan komponen React diperlukan untuk melakukan operasi tertentu seperti mengambil data, melanggan aliran data, atau mengubah DOM secara manual. Operasi semacam ini dikenali sebagai kesan sampingan.

Dalam komponen berasaskan kelas, kami biasanya akan meletakkan kod kesan sampingan kami ke dalam ComponentDidMount dan ComponentDidUpdate. Ini adalah kaedah kitaran hayat yang membolehkan kita mencetuskan kaedah render pada masa yang tepat.

Berikut adalah contoh mudah:

npx create-react-app myapp

Sekeping kod ini akan menetapkan tajuk dokumen, berdasarkan apa yang dipegang dalam keadaan. Walau bagaimanapun, apabila anda cuba membuat perubahan pada nilai negeri melalui borang, tiada apa yang berlaku. Untuk membetulkannya, anda perlu menambah kaedah kitaran hayat lain:

<span>cd myapp
</span><span>npm start
</span>

Mengemas kini borang sekarang harus mengemas kini tajuk dokumen juga.

mari kita lihat bagaimana kita boleh melaksanakan logik yang sama menggunakan cangkuk useeffect. Kemas kini komponen fungsi di atas seperti berikut:

<span>import <span>React</span> from "react";
</span>
<span>export default class ClassDemo extends React<span>.Component</span> {
</span>  <span>constructor(props) {
</span>    <span>super(props);
</span>    <span>this.state = {
</span>      <span>name: "Agata"
</span>    <span>};
</span>    <span>this.handleNameChange = this.handleNameChange.bind(this);
</span>  <span>}
</span>
  <span>handleNameChange(e) {
</span>    <span>this.setState({
</span>      <span>name: e.target.value
</span>    <span>});
</span>  <span>}
</span>
  <span>render() {
</span>    <span>return (
</span>      <span><section>
</span>        <span><form autoComplete="off">
</span>          <span><section>
</span>            <span><label htmlFor="name">Name</label>
</span>            <span><input
</span>              type<span>="text"
</span>              name<span>="name"
</span>              id<span>="name"
</span>              value<span>={this.state.name}
</span>              onChange<span>={this.handleNameChange}
</span>            <span>/>
</span>          <span></section>
</span>        <span></form>
</span>        <span><p>Hello {this.state.name}</p>
</span>      <span></section>
</span>    <span>);
</span>  <span>}
</span><span>}
</span>

Dengan hanya beberapa baris kod, kami telah melaksanakan kerja dua kaedah kitaran hayat dalam satu fungsi mudah. ​​

Menambah kod pembersihan

Ini adalah contoh mudah. Walau bagaimanapun, terdapat kes-kes di mana anda perlu menulis kod pembersihan, seperti berhenti melanggan dari aliran data atau tidak mendaftar dari pendengar acara. Mari kita lihat contoh bagaimana ini biasanya dilaksanakan dalam komponen kelas React:

<span>const [state, setState] = useState(initialState);
</span>

Kod di atas akan memaparkan resolusi semasa tetingkap penyemak imbas anda. Saiz semula tetingkap dan anda harus melihat kemas kini nombor secara automatik. Jika anda menekan dalam Chrome, ia harus memaparkan resolusi penuh monitor anda. Kami juga menggunakan kaedah kitaran hayat ComponentWillUnmount untuk tidak mendaftar acara saiz semula. mari kita meniru kod berasaskan kelas di atas dalam versi Hook kami. Kami perlu menentukan cangkuk UseState ketiga dan cangkuk useeffect kedua untuk mengendalikan ciri baru ini:

<span>import <span>React, { useState }</span> from "react";
</span>
<span>export default function <span>HookDemo</span>(props) {
</span>  <span>const [name, setName] = useState("Agata");
</span>
  <span>function handleNameChange(e) {
</span>    <span>setName(e.target.value);
</span>  <span>}
</span>
  <span>return (
</span>    <span><section>
</span>      <span><form autoComplete="off">
</span>        <span><section>
</span>          <span><label htmlFor="name">Name</label>
</span>          <span><input
</span>            type<span>="text"
</span>            name<span>="name"
</span>            id<span>="name"
</span>            value<span>={name}
</span>            onChange<span>={handleNameChange}
</span>          <span>/>
</span>        <span></section>
</span>      <span></form>
</span>      <span><p>Hello {name}</p>
</span>    <span></section>
</span>  <span>);
</span><span>}
</span>

Hebatnya, versi cangkuk kod ini melakukan perkara yang sama. Ia lebih bersih dan lebih padat. Kelebihan meletakkan kod ke dalam pengisytiharannya sendiri adalah bahawa kita boleh mengujinya dengan mudah, kerana kod itu terpencil.

Adakah anda perasan bahawa kami mengembalikan fungsi dalam cangkuk ini? Ini kerana sebarang fungsi yang anda kembali ke dalam fungsi useeffect akan dianggap sebagai kod untuk pembersihan. Jika anda tidak mengembalikan fungsi, tiada pembersihan akan dijalankan. Dalam kes ini, pembersihan diperlukan, kerana anda akan menemui mesej ralat yang dilog masuk ke konsol penyemak imbas anda yang mengatakan "Tidak dapat melakukan kemas kini keadaan React pada komponen yang tidak dipungut".

Custom React Hooks

Sekarang bahawa anda telah belajar tentang cangkuk UseState dan Useeffect, biarkan saya menunjukkan cara yang sangat keren untuk membuat kod anda lebih padat, bersih dan boleh diguna semula daripada yang telah kami capai setakat ini. Kami akan membuat

Custom Hook

untuk memudahkan kod kami lebih jauh lagi.

kami akan melakukan ini dengan mengekstrak fungsi mengubah saiz dan meletakkannya di luar komponen kami.

Buat fungsi baru seperti berikut:

Seterusnya, dalam komponen, anda perlu menggantikan kod ini:

<span>import <span>React, { useState }</span> from "react";
</span>
<span>export default function <span>HookDemo</span>(props) {
</span>  <span>const [name, setName] = useState("Agata");
</span>  <span>const [location, setLocation] = useState("Nairobi");
</span>
  <span>function handleNameChange(e) {
</span>    <span>setName(e.target.value);
</span>  <span>}
</span>
  <span>function handleLocationChange(e) {
</span>    <span>setLocation(e.target.value);
</span>  <span>}
</span>
  <span>return (
</span>    <span><section>
</span>      <span><form autoComplete="off">
</span>        <span><section>
</span>          <span><label htmlFor="name">Name</label>
</span>          <span><input
</span>            type<span>="text"
</span>            name<span>="name"
</span>            id<span>="name"
</span>            value<span>={name}
</span>            onChange<span>={handleNameChange}
</span>          <span>/>
</span>        <span></section>
</span>        <span><section>
</span>          <span><label htmlFor="location">Location</label>
</span>          <span><input
</span>            type<span>="text"
</span>            name<span>="location"
</span>            id<span>="location"
</span>            value<span>={location}
</span>            onChange<span>={handleLocationChange}
</span>          <span>/>
</span>        <span></section>
</span>      <span></form>
</span>      <span><p>
</span>        <span>Hello {name} from {location}
</span>      <span></p>
</span>    <span></section>
</span>  <span>);
</span><span>}
</span>

... dengan ini:

<span>componentDidMount() {
</span>  <span>document.title = this.state.name + " from " + this.state.location;
</span><span>}
</span>

Padam kod useeffect kedua. Simpan fail anda dan uji. Segala -galanya harus berfungsi sama seperti sebelumnya.

Sekarang bahawa kami telah mencipta cangkuk adat pertama kami, mari lakukan perkara yang sama untuk tajuk dokumen. Pertama, padamkan panggilan yang tersisa untuk menggunakan komponen di dalam komponen. Kemudian, di luar komponen, tambahkan kod berikut:

npx create-react-app myapp

Akhirnya, panggilnya dari dalam komponen:

<span>cd myapp
</span><span>npm start
</span>

kembali ke penyemak imbas anda dan masukkan sesuatu ke dalam medan input. Tajuk dokumen harus berubah seperti sebelumnya.

Akhirnya, mari kita refactor medan borang. Kami mahu membuat cangkuk untuk mengekalkan nilai mereka selaras dengan nilai yang sama dalam keadaan.

mari kita mulakan dengan cangkuk tersuai. Tambahkan yang berikut di luar komponen:

<span>import <span>React</span> from "react";
</span>
<span>export default class ClassDemo extends React<span>.Component</span> {
</span>  <span>constructor(props) {
</span>    <span>super(props);
</span>    <span>this.state = {
</span>      <span>name: "Agata"
</span>    <span>};
</span>    <span>this.handleNameChange = this.handleNameChange.bind(this);
</span>  <span>}
</span>
  <span>handleNameChange(e) {
</span>    <span>this.setState({
</span>      <span>name: e.target.value
</span>    <span>});
</span>  <span>}
</span>
  <span>render() {
</span>    <span>return (
</span>      <span><section>
</span>        <span><form autoComplete="off">
</span>          <span><section>
</span>            <span><label htmlFor="name">Name</label>
</span>            <span><input
</span>              type<span>="text"
</span>              name<span>="name"
</span>              id<span>="name"
</span>              value<span>={this.state.name}
</span>              onChange<span>={this.handleNameChange}
</span>            <span>/>
</span>          <span></section>
</span>        <span></form>
</span>        <span><p>Hello {this.state.name}</p>
</span>      <span></section>
</span>    <span>);
</span>  <span>}
</span><span>}
</span>

kemudian kemas kini komponen untuk menggunakannya:

<span>const [state, setState] = useState(initialState);
</span>

Melalui kod perlahan -lahan dan kenal pasti semua perubahan yang telah kami buat. Cukup kemas, bukan? Komponen kami jauh lebih padat.

Untuk tujuan tutorial ini, kami telah mengisytiharkan cangkuk kami sebagai fungsi dalam fail yang sama dengan komponen yang menggunakannya. Walau bagaimanapun, dalam projek reaksi biasa, anda akan mempunyai folder cangkuk dengan setiap cangkuk ini dalam fail yang berasingan, yang kemudiannya boleh diimport di mana sahaja ia diperlukan.

kita juga boleh pergi untuk membungkus cangkuk UsFormInput, UseCumentTitle dan UseWindowResolution ke dalam modul NPM luaran, kerana mereka benar -benar bebas daripada logik utama kod kami. Kita boleh menggunakan semula cangkuk tersuai ini di bahagian lain projek, atau bahkan projek lain pada masa akan datang.

untuk rujukan, inilah versi komponen cangkuk lengkap:

<span>import <span>React, { useState }</span> from "react";
</span>
<span>export default function <span>HookDemo</span>(props) {
</span>  <span>const [name, setName] = useState("Agata");
</span>
  <span>function handleNameChange(e) {
</span>    <span>setName(e.target.value);
</span>  <span>}
</span>
  <span>return (
</span>    <span><section>
</span>      <span><form autoComplete="off">
</span>        <span><section>
</span>          <span><label htmlFor="name">Name</label>
</span>          <span><input
</span>            type<span>="text"
</span>            name<span>="name"
</span>            id<span>="name"
</span>            value<span>={name}
</span>            onChange<span>={handleNameChange}
</span>          <span>/>
</span>        <span></section>
</span>      <span></form>
</span>      <span><p>Hello {name}</p>
</span>    <span></section>
</span>  <span>);
</span><span>}
</span>

komponen cangkuk harus diberikan dan berkelakuan sama seperti versi komponen kelas:

Jika anda membandingkan versi Hook dengan versi komponen kelas, anda akan menyedari bahawa ciri Hook mengurangkan kod komponen anda sekurang -kurangnya 30%. Anda juga boleh mengurangkan kod anda dengan mengeksport fungsi yang boleh diguna semula ke perpustakaan NPM.

Seterusnya mari kita lihat bagaimana kita boleh menggunakan cangkuk orang lain dalam kod kami.

mengambil data menggunakan cangkuk pihak ketiga

Mari kita lihat contoh bagaimana anda boleh mengambil data dari API JSON REST menggunakan AXIOS dan React Hooks. Jika anda mengikuti di rumah, anda perlu memasang Perpustakaan Axios:

<span>import <span>React, { useState }</span> from "react";
</span>
<span>export default function <span>HookDemo</span>(props) {
</span>  <span>const [name, setName] = useState("Agata");
</span>  <span>const [location, setLocation] = useState("Nairobi");
</span>
  <span>function handleNameChange(e) {
</span>    <span>setName(e.target.value);
</span>  <span>}
</span>
  <span>function handleLocationChange(e) {
</span>    <span>setLocation(e.target.value);
</span>  <span>}
</span>
  <span>return (
</span>    <span><section>
</span>      <span><form autoComplete="off">
</span>        <span><section>
</span>          <span><label htmlFor="name">Name</label>
</span>          <span><input
</span>            type<span>="text"
</span>            name<span>="name"
</span>            id<span>="name"
</span>            value<span>={name}
</span>            onChange<span>={handleNameChange}
</span>          <span>/>
</span>        <span></section>
</span>        <span><section>
</span>          <span><label htmlFor="location">Location</label>
</span>          <span><input
</span>            type<span>="text"
</span>            name<span>="location"
</span>            id<span>="location"
</span>            value<span>={location}
</span>            onChange<span>={handleLocationChange}
</span>          <span>/>
</span>        <span></section>
</span>      <span></form>
</span>      <span><p>
</span>        <span>Hello {name} from {location}
</span>      <span></p>
</span>    <span></section>
</span>  <span>);
</span><span>}
</span>

Tukar komponen anda untuk kelihatan seperti ini:

<span>componentDidMount() {
</span>  <span>document.title = this.state.name + " from " + this.state.location;
</span><span>}
</span>

kita harus mengharapkan output berikut:

Adalah mungkin untuk refactor kod di atas dengan membina cangkuk tersuai anda sendiri seperti cara kita tidak lagi perlu menggunakan cangkuk useState dan useeffect. Nasib baik untuk kami, banyak pemaju telah memenuhi usaha ini dan menerbitkan karya mereka sebagai pakej yang boleh kami pasang dalam projek kami. Kami akan menggunakan Axios-Hooks oleh Simone Busoli, yang menjadi yang paling popular.

anda boleh memasang pakej menggunakan arahan:

npx create-react-app myapp

Di bawah, saya telah refactor kod di atas menggunakan Axios-Hooks:

<span>cd myapp
</span><span>npm start
</span>

Bukan sahaja kita telah menghilangkan cangkuk UseState dan useeffect dari kod kami, tetapi kami juga mendapat tiga kebolehan baru tanpa kuasa otak tambahan di pihak kami:

• untuk memaparkan status pemuatan
• untuk memaparkan mesej ralat
• untuk refetch data dari satu klik butang

Pelajaran di sini adalah untuk mengelakkan mencipta semula roda. Google adalah rakan anda. Di dunia JavaScript, ada peluang yang tinggi bahawa seseorang telah menyelesaikan masalah yang anda cuba untuk menangani.

Demo

di bawah adalah demo langsung dari apa yang telah kami capai setakat ini:

Cangkuk React Official

Ini adalah cangkuk reaksi asas yang akan anda jumpai dalam projek reaksi sehari-hari anda:

• useState: untuk menguruskan keadaan tempatan
• useeffect: menggantikan fungsi kitaran hayat
• useContext: membolehkan anda dengan mudah bekerja dengan API Konteks React (menyelesaikan masalah penggerudian prop)

kami juga mempunyai cangkuk reaksi rasmi tambahan yang mungkin perlu anda gunakan, bergantung pada keperluan projek anda:

• UserEducer: Versi Lanjutan UseState untuk Menguruskan Logik Negeri Kompleks. Ia agak serupa dengan Redux.
• useCallback: Mengembalikan fungsi yang mengembalikan nilai yang boleh dicatatkan. Berguna untuk Pengoptimuman Prestasi Jika anda ingin mengelakkan pengendali semula yang tidak perlu apabila input tidak berubah.
• usememo: Mengembalikan nilai dari fungsi memoized. Sama seperti dikira jika anda biasa dengan Vue.
• useref: Mengembalikan objek ref yang boleh berubah yang berterusan untuk seumur hidup komponen.
• useImperativeHandle: Menyesuaikan nilai contoh yang terdedah kepada komponen induk apabila menggunakan Ref.
• uselayouteffect: serupa dengan useeffect, tetapi kebakaran serentak selepas semua mutasi DOM.
• UsedebugValue: Memaparkan label untuk cangkuk tersuai dalam Alat Pemaju React.

anda boleh membaca semua tentang cangkuk ini dalam dokumentasi React rasmi.

Ringkasan

Komuniti React telah memberi respons positif kepada ciri Cangkuk React baru. Sudah ada repositori sumber terbuka yang dipanggil-cakera Awesome-reacts, dan beratus-ratus cangkuk React Custom telah diserahkan kepada repositori ini. Berikut adalah contoh cepat salah satu cangkuk untuk menyimpan nilai dalam storan tempatan:

npx create-react-app myapp

anda perlu memasang cangkuk penyimpanan tempatan dengan npm atau benang seperti ini untuk menggunakannya:

<span>cd myapp
</span><span>npm start
</span>

cantik kemas, betul?

Pengenalan cangkuk React telah membuat percikan besar. Gelombangnya telah bergerak melampaui komuniti React ke dunia JavaScript. Ini kerana cangkuk adalah konsep baru yang boleh memberi manfaat kepada keseluruhan ekosistem JavaScript. Malah, pasukan Vue.js baru -baru ini mengeluarkan sesuatu yang serupa yang disebut API Komposisi.

Terdapat juga perbincangan mengenai cangkuk Reacts dan konteks API menggulingkan Redux dari takhta pengurusan negeri. Jelas, cangkuk telah membuat pengekodan lebih mudah dan telah mengubah cara kami menulis kod baru. Jika anda seperti saya, anda mungkin mempunyai keinginan yang kuat untuk menulis semula semua kelas komponen React anda dan menggantikannya dengan cangkuk komponen berfungsi.

Perhatikan bahawa ini tidak benar -benar diperlukan: Pasukan React tidak merancang untuk menghapuskan komponen kelas React. Anda juga harus sedar bahawa tidak semua kaedah kitaran hayat kelas React mungkin dengan cangkuk lagi. Anda mungkin perlu berpegang dengan kelas komponen React sedikit lebih lama.

Jika anda merasa cukup yakin dengan pengetahuan baru anda tentang cangkuk reaksi asas, saya ingin meninggalkan anda dengan cabaran. Refactor Kelas pemasa undur ini menggunakan cangkuk bertindak balas untuk menjadikannya bersih dan padat mungkin.

pengekodan gembira, dan beritahu saya bagaimana anda dapat!

Soalan Lazim pada Cangkuk React

Apakah cangkuk reaksi?

Cangkuk reaksi adalah fungsi yang membolehkan anda "mengaitkan" reaksi ciri -ciri keadaan dan kitaran hayat dalam komponen berfungsi. Mereka diperkenalkan dalam React 16.8 untuk membolehkan ciri -ciri React State dan lain -lain tanpa menulis komponen kelas.

cangkuk reaksi diperkenalkan untuk memudahkan penggunaan semula logik negara dalam komponen berfungsi, menjadikannya lebih mudah untuk menguruskan keadaan komponen dan kesan sampingan. Cangkuk?

Anda boleh menggunakan cangkuk UseState untuk menambah keadaan kepada komponen berfungsi. Ia mengembalikan array dengan nilai keadaan semasa dan fungsi untuk mengemas kini.

cangkuk useeffect membolehkan anda melakukan kesan sampingan dalam komponen fungsional anda, seperti pengambilan data, manipulasi DOM, dan banyak lagi, dan memastikan kesan-kesan ini ditangani dengan betul. cangkuk useState dan useeffect dalam satu komponen?

Ya, anda boleh menggunakan pelbagai contoh cangkuk dan useeffect dalam komponen fungsional tunggal untuk menguruskan keadaan dan kesan yang berbeza.

Cangkuk USEContext digunakan untuk mengakses konteks dalam komponen berfungsi. Ia membolehkan anda mengambil nilai konteks tanpa memberikan komponen pengguna konteks.

Apakah cangkuk usereducer yang digunakan, dan kapan saya harus menggunakannya?

Hook UserEducer adalah alternatif untuk digunakan untuk pengurusan negeri yang lebih kompleks. Ia berguna apabila anda perlu menguruskan peralihan negeri dengan cara yang boleh diramal.

anda boleh membuat cangkuk tersuai dengan menentukan fungsi yang menggunakan cangkuk terbina dalam atau cangkuk tersuai lain. Cangkuk tersuai ini boleh merangkumi dan berkongsi logik yang berkesempatan merentasi komponen.

Peraturan utama untuk menggunakan cangkuk termasuk hanya menggunakannya dalam komponen fungsional, menggunakan cangkuk di peringkat atas (bukan di dalam gelung atau syarat), dan memastikan pesanan mereka dalam komponen tetap konsisten pada penahan semula. >

Adakah terdapat pertimbangan prestasi dengan cangkuk bertindak balas?

Apabila digunakan dengan betul, cangkuk bertindak balas dapat meningkatkan prestasi dengan mengurangkan pelaku yang tidak perlu. Walau bagaimanapun, penting untuk menggunakan cangkuk Usememo dan Usecallback untuk mengoptimumkan prestasi apabila diperlukan.

Atas ialah kandungan terperinci React Hooks: Cara Memulakan & Membina Sendiri. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!