Jadual Kandungan
Cara untuk menyesuaikan Cangkuk
Logik dikongsi antara komponen
开源 React Hooks 库
总结
Rumah hujung hadapan web tutorial js Pemahaman mendalam tentang Hooks tersuai React

Pemahaman mendalam tentang Hooks tersuai React

Apr 20, 2023 pm 06:22 PM
hujung hadapan react.js Spesifikasi kod

Pemahaman mendalam tentang Hooks tersuai React

Dalam projek React, kami sering menggunakan beberapa Cangkuk terbina dalam yang disertakan dengan React, seperti useState, useContext dan useEffect. Tetapi kadangkala, kita mungkin mahu mempunyai Hook dengan tujuan tertentu: contohnya, gunakanData untuk mendapatkan data, gunakanConnect untuk mendapatkan sambungan, dsb. Walaupun Hooks ini tidak ditemui dalam React, React menyediakan cara yang sangat fleksibel untuk anda mencipta Hooks tersuai anda sendiri untuk keperluan anda.

Cara untuk menyesuaikan Cangkuk

Dalam React anda mesti mengikut konvensyen penamaan berikut:

  • Komponen React: Nama komponen React mesti ditulis dengan huruf besar Huruf bermula dengan , seperti StatusBar dan SaveButton. Komponen React juga memerlukan untuk mengembalikan sesuatu yang React tahu cara untuk membuat, seperti JSX .

  • React Hook: Nama cangkuk mesti bermula dengan use, diikuti dengan huruf besar, seperti useState (terbina dalam) atau useStatus (adat ). Tidak seperti komponen React, Hooks tersuai boleh mengembalikan sebarang nilai.

Konvensyen penamaan ini memastikan anda sentiasa boleh melihat komponen dan memahami status, kesan dan ciri React lain yang mungkin "tersembunyi" "Lokasi. Sebagai contoh, jika anda melihat panggilan fungsi getColor() dalam komponen, anda boleh yakin bahawa ia tidak boleh mengandungi keadaan React kerana namanya tidak bermula dengan penggunaan. Walau bagaimanapun, panggilan fungsi seperti useStatus() berkemungkinan mengandungi panggilan ke Hooks lain!

Logik dikongsi antara komponen

Kod di dalamnya menerangkan apa yang mereka mahu lakukan dan bukannya cara melakukannya .

Inti Cangkuk tersuai ialah berkongsi logik antara komponen. Menggunakan Hooks tersuai boleh mengurangkan pertindihan logik Lebih penting lagi, kod dalam Hooks tersuai menerangkan perkara yang mereka mahu lakukan, bukan cara melakukannya. Apabila anda mengekstrak logik ke dalam Cangkuk tersuai, anda boleh menyembunyikan butiran cara tertentu "sistem luaran" atau panggilan API penyemak imbas dikendalikan, kerana kod komponen menyatakan niat, bukan butiran pelaksanaan. Berikut ialah contoh mudah:

import { useState } from 'react';
function useCounter(initialValue) {
  const [count, setCount] = useState(initialValue);
  function increment() {
    setCount(count + 1);
  }
  return [count, increment];
}
Salin selepas log masuk
Cangkuk tersuai ini dipanggil

, yang menerima nilai awal sebagai parameter dan mengembalikan tatasusunan yang mengandungi nilai kiraan semasa dan fungsi untuk menambah kiraan. Menggunakan Cangkuk tersuai adalah sangat mudah, cuma panggilnya dalam komponen fungsi. Berikut ialah contoh penggunaan useCounter: useCounter

import React from 'react';
import useCounter from './useCounter';

function Counter() {
  const [count, increment] = useCounter(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}
Salin selepas log masuk
Dalam contoh ini, kami mengimport

dan memanggilnya dalam komponen. Kami memusnahkan tatasusunan yang dikembalikan kepada useCounter dan count dan menggunakannya dalam komponen. increment

Cangkuk Tersuai membenarkan anda berkongsi logik stateful, tetapi bukan keadaan itu sendiri

Cangkuk Tersuai membenarkan anda berkongsi logik stateful, tetapi bukan keadaan itu sendiri. Setiap panggilan ke Hook adalah bebas sepenuhnya daripada panggilan lain ke Hook yang sama. Ambil

di atas sebagai contoh: useCounter

import useCounter from &#39;./useCounter&#39;;
function Counter() {
	const [count1, increment1] = useCounter(0);
	const [count2, increment2] = useCounter(100);
  return (
    <div>
      <p>Count1: {count1}</p>
      <button onClick={increment1}>Increment1</button>
       <p>Count2: {count2}</p>
      <button onClick={increment2}>Increment2</button>
    </div>
  );
}
Salin selepas log masuk
Apabila kita mengklik

, ia tidak akan menjejaskan Increment2 kerana setiap count1 panggilan adalah bebas dan keadaan dalamannya Juga bebas. useCounter

Kategori

Cangkuk Fungsional

untuk mencapai fungsi atau tujuan tertentu, tanpa mengira perniagaan tertentu:

useWindowWidth

Cangkuk ini mengembalikan nilai lebar tingkap.

import { useState, useEffect } from &#39;react&#39;;
function useWindowWidth() {
  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
  useEffect(() => {
    const handleResize = () => setWindowWidth(window.innerWidth);
    window.addEventListener(&#39;resize&#39;, handleResize);
    return () => window.removeEventListener(&#39;resize&#39;, handleResize);
  }, []);
  return windowWidth;
}
Salin selepas log masuk
useLocalStorage

Cangkuk ini membolehkan anda menyimpan dan mendapatkan semula nilai dari storan setempat.

import { useState } from &#39;react&#39;;

function useLocalStorage(key, initialValue) {
  const [storedValue, setStoredValue] = useState(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.log(error);
      return initialValue;
    }
  });

  const setValue = (value) => {
    try {
      setStoredValue(value);
      window.localStorage.setItem(key, JSON.stringify(value));
    } catch (error) {
      console.log(error);
    }
  };

  return [storedValue, setValue];
}
Salin selepas log masuk
Business Hooks

useFetch

Cangkuk ini membolehkan anda mendapatkan data daripada API.

import { useState, useEffect } from &#39;react&#39;;
function useFetch(url) {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(url);
        const json = await response.json();
        setData(json);
      } catch (error) {
        setError(error);
      } finally {
        setIsLoading(false);
      }
    };
    fetchData();
  }, [url]);
  return { data, error, isLoading };
}
Salin selepas log masuk
useModal

Cakuk ini membolehkan anda mengurus keadaan dialog modal.

//useFetch.js
import {useState, useEffect} from &#39;react&#39;
//don&#39;t forget to give a url parameter for the function.
const useFetch = (url)=>{
  const [data, setData] = useState([])
  const getData = async ()=>{
    const response = await fetch(url)
    const userdata = await response.json()
    setData(userdata)
  }
 useEffect(()=>{
    getData()
  },[url])
  //return data that we will need in other components.
  return {data};
}
export default useFetch;
Salin selepas log masuk
Menyalurkan maklumat antara berbilang Cangkuk

Memandangkan Cangkuk itu sendiri adalah fungsi, kami boleh menyampaikan maklumat antara mereka. Di bawah ini kami mengambil

sebagai contoh untuk mendapatkan maklumat pengguna: useUserInfo

//useUserInfo.jsx
import { useEffect,useState } from &#39;react&#39;
const useUserInfo = (userId) => {
  const [userInfo, setUserInfo] = useState({})
  useEffect(() => {
    fetch(&#39;/user&#39;)
      .then(res => res.json())
      .then(data => setUserInfo(data))
  }, [userId])
  return userInfo
}
//Home.jsx
...
const Home = ()=>{
	const [userId,setUserId] = useState(&#39;103&#39;)
	const useInfo = useUserInfo(userId)
	return (
	  <>
	     <div>name:{userInfo.name}</div>
	     <div>age:{userInfo.age}</div>
	     ...
	  </> 
	)
}
Salin selepas log masuk
Kami menyimpan id pengguna dalam pembolehubah keadaan

Apabila pengguna melakukan operasi tertentu userId, sejak setUserId ialah Kami menyediakan nilai terkini pembolehubah keadaan useState, jadi kami boleh menghantarnya sebagai parameter kepada userId Cangkuk tersuai: useUserInfo

const [userId,setUserId] = useState(&#39;103&#39;)
const userInfo = useUserInfo(userId)
Salin selepas log masuk
Pada ketika ini,

kami akan menjadi ditambah dengan userId yang dikemas kini dengan perubahan. userInfo

Melalukan pengendali acara kepada Cangkuk tersuai

Bahagian ini menerangkan API

percubaan yang masih belum dikeluarkan dalam versi React yang stabil. Bahagian ini menerangkan API percubaan yang belum dikeluarkan dalam versi React yang stabil.

你可能希望让组件自定义其行为,而不是完全地将逻辑封装 Hooks 中,我们可以通过将 event handlers 作为参数传递给 Hooks,下面是一个聊天室的例子:useChatRoom 接受一个服务端 url 和 roomId,当调用这个 Hook 的时候,会进行连接,

export function useChatRoom({ serverUrl, roomId }) {
  useEffect(() => {
    const options = {
      serverUrl: serverUrl,
      roomId: roomId
    };
    const connection = createConnection(options);
    connection.connect();
    connection.on(&#39;message&#39;, (msg) => {
      showNotification(&#39;New message: &#39; + msg);
    });
    return () => connection.disconnect();
  }, [roomId, serverUrl]);
}
Salin selepas log masuk

假设当连接成功时,你想将此逻辑移回你的组件:

export default function ChatRoom({ roomId }) {
  const [serverUrl, setServerUrl] = useState(&#39;https://localhost:1234&#39;);
  useChatRoom({
    roomId: roomId,
    serverUrl: serverUrl,
    onReceiveMessage(msg) {
      showNotification(&#39;New message: &#39; + msg);
    }
  });
  // ...
Salin selepas log masuk

要做到这一点,改变你的自定义 Hook ,把 onReceiveMessage 作为它的命名选项之一:

export function useChatRoom({ serverUrl, roomId, onReceiveMessage }) {
  useEffect(() => {
    const options = {
      serverUrl: serverUrl,
      roomId: roomId
    };
    const connection = createConnection(options);
    connection.connect();
    connection.on(&#39;message&#39;, (msg) => {
      onReceiveMessage(msg);
    });
    return () => connection.disconnect();
  }, [roomId, serverUrl, onReceiveMessage]); // ✅ All dependencies declared
}
Salin selepas log masuk

这可以工作,但是当你的自定义 Hook 接受事件处理程序时,你还可以做一个改进。 在 onReceiveMessage 上添加依赖并不理想,因为它会导致每次组件重新渲染时聊天都重新连接。将此事件处理程序包装到 EffectEvent 中以将其从依赖项中移除:

import { useEffect, useEffectEvent } from &#39;react&#39;;  
// ...
export function useChatRoom({ serverUrl, roomId, onReceiveMessage }) {
  const onMessage = useEffectEvent(onReceiveMessage);
  useEffect(() => {
    const options = {
      serverUrl: serverUrl,
      roomId: roomId
    };
    const connection = createConnection(options);
    connection.connect();
    connection.on(&#39;message&#39;, (msg) => {
      onMessage(msg);
    });
    return () => connection.disconnect();
  }, [roomId, serverUrl]); // ✅ All dependencies declared
}
Salin selepas log masuk

现在不会在每次重新渲染聊天室组件时进行重新连接。

开源 React Hooks 库

  • ahooks 一套由阿里巴巴开源的 React Hooks 库,封装了大量好用的 Hooks。
  • react-use 一个必不可少的 React Hooks 集合。其包含了传感器、用户界面、动画效果、副作用、生命周期、状态这六大类的Hooks。
  • useHooks 一组易于理解的 React Hook集合。
  • react-recipes 一个包含流行的自定义 Hook 的 React Hooks 实用程序库。
  • Rhooks  一组基本的 React 自定义Hooks。
  • react-hanger 一组有用的 hooks,用于特定于某些基本类型的状态更改辅助函数。
  • Beautiful React Hook 一组漂亮的(希望有用的)React hooks 来加速你的组件和 hooks 开发。
  • Awesome React Hooks 一个很棒的 React Hooks 资源集合,该集合包含React Hooks教程、视频、工具,Hooks列表。其中Hooks列表中包含了众多实用的自定义Hooks。
  • SWR 一个用于获取数据的 React Hooks 库。只需一个Hook,就可以显着简化项目中的数据获取逻辑。
  • React Hook Form 一个用于表单状态管理和验证的 React Hooks (Web + React Native)。

总结

自定义 Hooks 可以帮助你迁移到更好的开发范式。通过将一些通用逻辑封装在自定义 Hooks 中,你可以使组件代码保持简洁专注于核心意图,这有助于减少重复性的代码,并使你的代码更易于维护更新,从而使你能够更快速地开发新功能。

对于 Effect 而言,这样可以使数据在 Effects 中流动的过程变得非常明确。这让你的组件能够专注于意图,而不是 Effects 的具体实现。当 React 添加新功能时,你可以删除那些 Effects 而不影响任何组件。就像设计系统一样,你可能会发现从应用程序组件中提取常见习惯用法到自定义 Hooks 中是有非常帮助的。这将使你的组件代码专注于意图,并允许你避免频繁编写原始 Effects,这也是 React 开发者所推崇的。

(Belajar perkongsian video: Video Pengaturcaraan Asas)

Atas ialah kandungan terperinci Pemahaman mendalam tentang Hooks tersuai React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Cara Membuka Segala -galanya Di Myrise
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

PHP dan Vue: gandingan sempurna alat pembangunan bahagian hadapan PHP dan Vue: gandingan sempurna alat pembangunan bahagian hadapan Mar 16, 2024 pm 12:09 PM

PHP dan Vue: gandingan sempurna alat pembangunan bahagian hadapan Dalam era perkembangan pesat Internet hari ini, pembangunan bahagian hadapan telah menjadi semakin penting. Memandangkan pengguna mempunyai keperluan yang lebih tinggi dan lebih tinggi untuk pengalaman tapak web dan aplikasi, pembangun bahagian hadapan perlu menggunakan alat yang lebih cekap dan fleksibel untuk mencipta antara muka yang responsif dan interaktif. Sebagai dua teknologi penting dalam bidang pembangunan bahagian hadapan, PHP dan Vue.js boleh dianggap sebagai alat yang sempurna apabila digandingkan bersama. Artikel ini akan meneroka gabungan PHP dan Vue, serta contoh kod terperinci untuk membantu pembaca memahami dan menggunakan kedua-dua ini dengan lebih baik.

Soalan yang sering ditanya oleh penemuduga front-end Soalan yang sering ditanya oleh penemuduga front-end Mar 19, 2024 pm 02:24 PM

Dalam temu bual pembangunan bahagian hadapan, soalan lazim merangkumi pelbagai topik, termasuk asas HTML/CSS, asas JavaScript, rangka kerja dan perpustakaan, pengalaman projek, algoritma dan struktur data, pengoptimuman prestasi, permintaan merentas domain, kejuruteraan bahagian hadapan, corak reka bentuk, dan teknologi dan trend baharu. Soalan penemuduga direka bentuk untuk menilai kemahiran teknikal calon, pengalaman projek dan pemahaman tentang trend industri. Oleh itu, calon harus bersedia sepenuhnya dalam bidang ini untuk menunjukkan kebolehan dan kepakaran mereka.

Adakah Django bahagian hadapan atau belakang? semaklah! Adakah Django bahagian hadapan atau belakang? semaklah! Jan 19, 2024 am 08:37 AM

Django ialah rangka kerja aplikasi web yang ditulis dalam Python yang menekankan pembangunan pesat dan kaedah bersih. Walaupun Django ialah rangka kerja web, untuk menjawab soalan sama ada Django ialah front-end atau back-end, anda perlu mempunyai pemahaman yang mendalam tentang konsep front-end dan back-end. Bahagian hadapan merujuk kepada antara muka yang pengguna berinteraksi secara langsung, dan bahagian belakang merujuk kepada program bahagian pelayan Mereka berinteraksi dengan data melalui protokol HTTP. Apabila bahagian hadapan dan bahagian belakang dipisahkan, program bahagian hadapan dan bahagian belakang boleh dibangunkan secara bebas untuk melaksanakan logik perniagaan dan kesan interaktif masing-masing, dan pertukaran data.

Perkongsian pengalaman pembangunan C#: kemahiran pembangunan kolaboratif bahagian hadapan dan belakang Perkongsian pengalaman pembangunan C#: kemahiran pembangunan kolaboratif bahagian hadapan dan belakang Nov 23, 2023 am 10:13 AM

Sebagai pembangun C#, kerja pembangunan kami biasanya merangkumi pembangunan bahagian hadapan dan bahagian belakang Apabila teknologi berkembang dan kerumitan projek meningkat, pembangunan kolaboratif bahagian hadapan dan bahagian belakang menjadi semakin penting dan kompleks. Artikel ini akan berkongsi beberapa teknik pembangunan kolaboratif bahagian hadapan dan belakang untuk membantu pembangun C# menyelesaikan kerja pembangunan dengan lebih cekap. Selepas menentukan spesifikasi antara muka, pembangunan kolaboratif bahagian hadapan dan belakang tidak dapat dipisahkan daripada interaksi antara muka API. Untuk memastikan pembangunan kolaboratif bahagian hadapan dan belakang yang lancar, perkara yang paling penting ialah menentukan spesifikasi antara muka yang baik. Spesifikasi antara muka melibatkan nama antara muka

Meneroka teknologi bahagian hadapan bahasa Go: visi baharu untuk pembangunan bahagian hadapan Meneroka teknologi bahagian hadapan bahasa Go: visi baharu untuk pembangunan bahagian hadapan Mar 28, 2024 pm 01:06 PM

Sebagai bahasa pengaturcaraan yang pantas dan cekap, bahasa Go popular secara meluas dalam bidang pembangunan bahagian belakang. Walau bagaimanapun, beberapa orang mengaitkan bahasa Go dengan pembangunan bahagian hadapan. Malah, menggunakan bahasa Go untuk pembangunan bahagian hadapan bukan sahaja boleh meningkatkan kecekapan, tetapi juga membawa ufuk baharu kepada pembangun. Artikel ini akan meneroka kemungkinan menggunakan bahasa Go untuk pembangunan bahagian hadapan dan memberikan contoh kod khusus untuk membantu pembaca memahami dengan lebih baik bahagian ini. Dalam pembangunan front-end tradisional, JavaScript, HTML dan CSS sering digunakan untuk membina antara muka pengguna

Bagaimana untuk menulis dan mengekalkan dokumentasi kod dalam pembangunan Java Bagaimana untuk menulis dan mengekalkan dokumentasi kod dalam pembangunan Java Oct 10, 2023 pm 08:22 PM

Cara menulis dan menyelenggara dokumentasi kod dalam pembangunan Java Dalam proses pembangunan Java, menulis dan menyelenggara dokumentasi kod adalah bahagian yang sangat penting. Dokumen kod yang baik boleh meningkatkan kebolehbacaan dan kebolehselenggaraan kod, memudahkan kerjasama dan komunikasi antara ahli projek, dan juga membantu dengan penyelenggaraan dan lelaran kod kemudian. Penggunaan komen Komen adalah asas dokumentasi kod Ia boleh digunakan untuk menerangkan fungsi kod, logik pelaksanaan, perihalan parameter, dll. Di Jawa, terdapat tiga jenis ulasan: komen satu baris (//) dan komen berbilang baris (/.

Gabungan teknologi Golang dan bahagian hadapan: terokai cara Golang memainkan peranan dalam bidang bahagian hadapan Gabungan teknologi Golang dan bahagian hadapan: terokai cara Golang memainkan peranan dalam bidang bahagian hadapan Mar 19, 2024 pm 06:15 PM

Gabungan teknologi Golang dan bahagian hadapan: Untuk meneroka bagaimana Golang memainkan peranan dalam bidang bahagian hadapan, contoh kod khusus diperlukan Dengan perkembangan pesat Internet dan aplikasi mudah alih, teknologi bahagian hadapan telah menjadi semakin penting. Dalam bidang ini, Golang, sebagai bahasa pengaturcaraan bahagian belakang yang berkuasa, juga boleh memainkan peranan penting. Artikel ini akan meneroka cara Golang digabungkan dengan teknologi bahagian hadapan dan menunjukkan potensinya dalam bidang bahagian hadapan melalui contoh kod khusus. Peranan Golang dalam bidang front-end adalah sebagai cekap, ringkas dan mudah dipelajari

Cara melaksanakan pemesejan segera pada bahagian hadapan Cara melaksanakan pemesejan segera pada bahagian hadapan Oct 09, 2023 pm 02:47 PM

Kaedah untuk melaksanakan pemesejan segera termasuk WebSocket, Tinjauan Panjang, Acara Dihantar Pelayan, WebRTC, dsb. Pengenalan terperinci: 1. WebSocket, yang boleh mewujudkan sambungan berterusan antara pelanggan dan pelayan untuk mencapai komunikasi dua hala masa nyata Bahagian hadapan boleh menggunakan API WebSocket untuk membuat sambungan WebSocket dan mencapai pemesejan segera dengan menghantar dan menerima. mesej; 2. Long Polling, teknologi yang menyerupai komunikasi masa nyata, dsb.

See all articles