Was ist ein Haken? Lassen Sie uns über zwei häufig verwendete Hooks in React sprechen

Dieser Artikel führt Sie durch Hooks, spricht darüber, warum die Verwendung von Hooks für die Entwicklung empfohlen wird, und stellt die beiden am häufigsten verwendeten Hooks in React vor. Ich hoffe, dass er für alle hilfreich ist!

Lassen Sie uns zunächst vorstellen, was ein Hook ist.

Hook ist eine neue Funktion von React 16.8. Es wird speziell in Funktionskomponenten verwendet und wird häufig in der tatsächlichen Arbeit verwendet. [Verwandte Empfehlungen: Redis-Video-Tutorial]

Warum wird die Verwendung von Hooks für die Entwicklung empfohlen?

Hook wird speziell für die Zusammenarbeit bei der Entwicklung funktionaler Komponenten verwendet. Er kann verwendet werden, um einige der Lebenszyklen von Klassenkomponenten zu ersetzen Um Verwirrung durch eine große Anzahl davon zu vermeiden, erleichtern Hooks die Entwicklung und erleichtern Entwicklern das Verständnis des Codes

Das Obige ist eine einfache Zusammenfassung meiner persönlichen Erfahrungen. Weitere Gründe finden Sie auf der offiziellen React-Website :

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

useState

Im Code:

React.useState(0) entspricht dem Hinzufügen eines Attributwerts dazu. state in der Klassenkomponente

variable entspricht dem Wert von this.state.variable in der Klassenkomponente

setVariable Es kann verwendet werden, um den Wert der Variablen zu ändern, der this.setState in der Klassenkomponente entsprechen kann

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>
    )
}

useEffect

Im Code:

Wie aus dem folgenden Code ersichtlich ist, ersetzt die Verwendung von useEffect in der Klassenkomponente ComponentDidMoun, ComponentDidUpdate und ComponentWillUnmount 1. Verwenden Sie Hooks nur in der äußersten Ebene von Komponentenfunktionen. Rufen Sie Hooks nicht in Schleifen, Bedingungen oder verschachtelten Funktionen auf.

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>
    )
}

3. Um die oben genannten Fehler zu vermeiden, Sie können das

ESLint-Plugin installieren, um den Code auf Fehler zu prüfen.

Benutzerdefinierte Hooks sind eine Funktion, die die gemeinsame Nutzung von Logik zwischen Komponenten erleichtert , und der benutzerdefinierte Hook ruft auch den Hook auf, der mit „react“ geliefert wird. Der Name sollte mit „use“ beginnen. Sie fragen sich vielleicht: Wird derselbe Hook in mehreren Komponenten verwendet, um den Status zu teilen?

Die Antwort lautet: Nein. Da jeder Aufruf des Hooks, der mit React geliefert wird, unabhängig ist und sich nicht gegenseitig beeinflusst, ist der benutzerdefinierte Hook unabhängig und beeinflusst sich nicht gegenseitig, wenn er mehrmals aufgerufen wird. Weitere programmierbezogene Kenntnisse finden Sie unter: eslint-plugin-react-hooksEinführung in die Programmierung ! !

Das obige ist der detaillierte Inhalt vonWas ist ein Haken? Lassen Sie uns über zwei häufig verwendete Hooks in React sprechen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!