Apakah cangkuk? Mari kita bincangkan tentang dua Cangkuk yang biasa digunakan dalam React

Artikel ini akan membawa anda melalui cangkuk, bercakap tentang sebab disyorkan untuk menggunakan cangkuk untuk pembangunan, dan memperkenalkan dua Cangkuk yang paling biasa digunakan dalam React. Saya harap ia akan membantu semua orang!

Perkenalkan dahulu apa itu cangkuk

Cangkuk ialah ciri baharu React 16.8 Ia digunakan khas dalam komponen berfungsi komponen. Ciri-ciri lain biasanya digunakan dalam kerja sebenar. [Cadangan berkaitan: Tutorial video Redis]

Mengapa disyorkan untuk menggunakan cangkuk untuk pembangunan

Cangkuk digunakan khas untuk membangunkan komponen berfungsi dan boleh digunakan untuk menggantikan kelas Beberapa kitaran hayat untuk mengelakkan kekeliruan yang disebabkan oleh sebilangan besar ini, jadi cangkuk memudahkan pembangunan dan memudahkan pembangun memahami kod

Di atas adalah ringkasan peribadi. sila rujuk laman web rasmi react:

https://react.docschina.org/docs/hooks-intro.html#motivation

useState

In kod:

React.useState(0) adalah bersamaan dengan this.state dalam komponen kelas pembolehubah

setVariable boleh digunakan untuk mengubah suai nilai, yang boleh bersamaan dengan ini.setState dalam komponen kelas

useEffect

import React,(useState) from 'react'
export default function useState_Demo() {
    const [variable, setVariable] = useState(0);//通过解构赋值，我们拿到的variable、setVariable
    function changeVariable(){
        setVariable((variable) => variable +1) //setVariable的回调中传进来的参数是variable
    }
    render (
        <div> 
            <button onclick = {change}>点我会使variable+1</button>
        </div>
    )
}

Dalam kod:

Seperti yang dapat dilihat daripada kod berikut, penggunaan useEffect menggantikan Penggunaan componentDidMoun, componentDidUpdate dan componentWillUnmount dalam komponen kelas

Perkara yang perlu diberi perhatian apabila menggunakan cangkuk

import React,(useState, useEffect) from 'react'
export default function useState_Demo() {
   const [variable, setVariable] = useState(0);//通过解构赋值，我们拿到的variable、setVariable
    
    useEffect(() => {
        //这个return是在该组件监测的数据变化时或者被卸载时调用的，被卸载时调用可以相当于componentWillUnmount钩子 
        return () => {
            console.log('该组件被卸载了')
        }
    }, [variable])//第二个参数传了[variable]，表示检测variable的更新变化，一旦variable变化就会再次执行useEffect的回调
                  //第二个参数传了[],表示谁都不检测只执行一次useEffect的回调，相当于componentDidMount钩子
                  //第二个参数不传参，只要该组件有state变化就会执行useEffect的回调，相当于componentDidUpdate钩子
    function changeVariable(){
        setVariable((variable) => variable +1) //setVariable的回调中传进来的参数是variable
    }
    render (
        <div> 
            <button onclick = {change}>点我会使variable+1</button>
        </div>
    )
}

1. Hanya gunakan Cangkuk di lapisan paling luar fungsi komponen, bukan dalam gelung, keadaan atau Cangkuk Panggilan bersarang

dalam set fungsi 2. Cangkuk

import React,(useEffect) from 'react'
export default function useState_Demo() {
   //这里才是正确的
   useEffect(() => {})
    
   //错误1，使用了条件判断
   if(true) {
        useEffect(() => {})
   }
   //错误2，使用了循环
   while(true) {
        useEffect(() => {})
   }
  //错误3,使用了嵌套
  useEffect(() => {
      useEffect(() => {})
  })
}

tidak boleh digunakan di luar fungsi komponen 3. Untuk mengelakkan ralat di atas, anda boleh memasang

import React,(useState, useEffect) from 'react'
//错误1，在组件函数外使用了useState
const [variable, setVariable] = useState(0);
//错误2，在组件函数外使用了useEffect
useEffect(() => {})
export default function useState_Demo() {
   //在组件函数里使用才是正确的
   const [variable, setVariable] = useState(0);
}

pemalam ESLint untuk menyemak ralat kodeslint-plugin-react-hooksCustom hook

Kail tersuai adalah untuk memudahkan perkongsian logik antara komponen Sebenarnya, ia adalah untuk merangkum fungsi yang boleh digunakan semula

Anda mungkin tertanya-tanya, adakah Cangkuk yang sama akan digunakan dalam berbilang komponen untuk berkongsi keadaan?

//自定义hook
function useHook(initState) {
  const [variable, setVariable] = useState(initState)
  return variable;
}
//使用自定义hook
export default function useState_Demo() {
    const variableState = useHook(0)
}

Jawapannya: tidak. Oleh kerana setiap panggilan ke cangkuk yang disertakan dengan tindak balas adalah bebas dan tidak menjejaskan satu sama lain, jadi cangkuk tersuai adalah bebas dan tidak menjejaskan satu sama lain apabila dipanggil berbilang kali

Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati :

Pengenalan kepada pengaturcaraan

! !

Atas ialah kandungan terperinci Apakah cangkuk? Mari kita bincangkan tentang dua Cangkuk yang biasa digunakan dalam React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!