Was sind React Hooks?

Es gibt 10 Reaktions-Hooks: 1. useState, zum Festlegen und Ändern des Status; 2. useMemo, zum Steuern der Komponentenaktualisierungsbedingungen; 4. useDebugValue, zum Anzeigen benutzerdefinierte Etiketten; 5, useCallback und so weiter.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, Reaktionsversion 17.0.1, Dell G3-Computer.

Was ist React Hook?

Die offizielle Website von React stellt es folgendermaßen vor: Hook ist eine neue Funktion von React 16.8. Sie können damit Status- und andere React-Funktionen verwenden, ohne Klassen schreiben zu müssen.

• Völlig optionalSie können Hooks in einigen Komponenten ausprobieren, ohne vorhandenen Code neu zu schreiben. Aber Sie müssen Hooks jetzt nicht lernen oder verwenden, wenn Sie dies nicht möchten.

• 100 % abwärtskompatibel Hook enthält keine Breaking Changes.

• Jetzt verfügbar Hook wurde in Version 16.8.0 veröffentlicht.

• Es gibt keine Pläne, Klassen aus React zu entfernen.Mehr über die progressive Strategie für Hooks können Sie im Abschnitt unten auf dieser Seite lesen.

• Hook hat keinen Einfluss auf Ihr Verständnis von React-KonzeptenIm Gegenteil, Hook bietet eine direktere API für bekannte React-Konzepte: Requisiten, Status, Kontext, Refs und Lebenszyklus. Wie wir später sehen werden, bieten Hooks auch eine leistungsfähigere Möglichkeit, sie zu kombinieren.

---

Wenn Sie nicht genug über React wissen, wird empfohlen, zuerst die offizielle React-Dokumentation zu lesen, eine Demo zu schreiben und dann den Artikel zu lesen, da ich kurz auf einige grundlegende Dinge über React eingehen werde, ohne auf Details einzugehen .
Offizielle Dokumentation zu React https://zh-hans.reactjs.org/docs/hooks-state.html

Hook bereitgestellt von React

hook	Usage
useState	Einstellungen und Änderungen state, ersetzt den ursprünglichen Zustand und setState
useEffect	Ersetzt den ursprünglichen Lebenszyklus, die zusammengeführte Version von ComponentDidMount, ComponentDidUpdate und ComponentWillUnmount
useLayoutEffect	hat den gleichen Effekt wie useEffect, ruft jedoch den Effekt synchron auf
useMemo	Kontrollkomponentenaktualisierungsbedingungen, die die Methodenausführung steuern und die Wertübertragung entsprechend Zustandsänderungen optimieren können
useCallback	useMemo optimiert die Wertübertragung, usecallback optimiert die Übertragungsmethode, ob aktualisiert werden soll
useRef	Dasselbe wie die vorherige Referenz, das Gleiche, nur prägnanter
useContext	Context und tiefere Komponenten übergeben den Wert
useReducer	ersetzt den Reduzierer im ursprünglichen Redux und wird mit useContext verwendet
useDebugValue	in React Die Bezeichnung des benutzerdefinierten Hooks wird in den Entwicklertools zum Debuggen angezeigt.
useImperativeHandle	ermöglicht es Ihnen, den Instanzwert anzupassen, der der übergeordneten Komponente ausgesetzt wird, wenn Sie ref verwenden.

---

1.useState

import React from 'react';
import './App.css';
//通常的class写法,改变状态
class App extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      hook:'react hook 是真的好用啊'
    }
  }
  changehook = () => {
    this.setState({
      hook:'我改变了react hook 的值'
    })
  }
  render () {
    const { hook } = this.state
    return(
         <header className="App-header">
          {hook}
          <button onClick={this.changehook}>
            改变hook
          </button>
        </header>
      )
  }
}
export  {App}

//函数式写法,改变状态
function App() {
//创建了一个叫hook的变量，sethook方法可以改变这个变量,初始值为‘react hook 是真的好用啊’
 const [hook, sethook] = useState("react hook 是真的好用啊");
  return ( 
    <header className="App-header">
      {hook}{/**这里的变量和方法也是可以直接使用的 */}
      <button onClick={() => sethook("我改变了react hook 的值")}>
        改变hook
      </button>
    </header>
  );
}
export  {App}

//箭头函数的函数写法,改变状态
export const App = props => {
  const [hook, sethook] = useState("react hook 是真的好用啊");
  return (
    <header className="App-header">
      {hook}
      <button onClick={() => sethook("我改变了react hook 的值")}>
        改变hook
      </button>
    </header>
  );
};

Hinweise zur Verwendung finden Sie in der obigen Demo.
Nachdem Sie die vergleichende Verwendung von useState oben gelesen haben, weist eine kleine Demo eine klarere Struktur und einen einfacheren Code auf, der eher dem Schreiben von JS-Code und seiner Anwendung auf die ähnelt Projekt In, wäre das nicht wunderbar?

---

2.useEffect & useLayoutEffect

useEffect ersetzt den ursprünglichen Lebenszyklus, die zusammengeführte Version von ComponentDidMount, ComponentDidUpdate und ComponentWillUnmount
useEffect( ()=>{ return ()=>{ } } , [ ])

• Der erste Parameter ist eine Funktion, die standardmäßig beim ersten Rendern und Aktualisieren ausgelöst wird. Die Rückgabe einer Funktion bedeutet, dass einige Dinge verarbeitet werden können, bevor sie zerstört werden Der zweite Parameter ist ein Array []. Wenn es leer ist, bedeutet dies, dass es nur einmal ausgeführt wird und nicht beim Aktualisieren ausgelöst wird. Welche Parameter werden ausgeführt, wenn sich die Parameter ändern? Der Reihe nach ausgeführt. UseLayoutEffect muss synchron ausgeführt werden. Führen Sie zuerst die Funktion innerhalb von useLayoutEffect
• 
  3 aus. useMemo und useCallback
  Hören Sie auf Zustandsänderungen von Unterkomponenten, um Ereignisse zu verarbeiten, was in der Vergangenheit sehr häufig vorkam. Dies ist schwierig, da ShouldComponentUpdate überwachen kann, ob Änderungen vorliegen, andere externe Methoden jedoch nicht gesteuert werden können. Es kann nur true und false zurückgeben, ComponentDidUpdate jedoch erst nach der Aktualisierung ausgeführt werden, daher ist es nicht sinnvoll, etwas zu tun, bevor das Rendern abgeschlossen ist. useCallback ist noch nicht verfügbar. useContext

Freunde, die zuvor Kontext verwendet haben, werden es auf einen Blick verstehen. Die grundlegende Verwendung von useContext ähnelt dem vorherigen Kontext. Es gibt detaillierte Kommentare im Code, zur Erstellung, zur Wertübertragung und zur Verwendung

---

6. useReducer

Der Usereducer gibt hier den Status zurück und sendet ihn über den Kontext an die Unterkomponente weiter und ruft dann den Status direkt auf oder löst den Reduzierer aus. Wir verwenden useReducer häufig mit useContext createContext, um die Wertübertragungs- und Neuzuweisungsvorgänge von reudx zu simulieren .

import React, { useState, useEffect, useLayoutEffect } from 'react';

//箭头函数的写法，改变状态
const UseEffect = (props) => {
	//创建了一个叫hook的变量，sethook方法可以改变这个变量,初始值为‘react hook 是真的好用啊’
	const [ hook, sethook ] = useState('react hook 是真的好用啊');
	const [ name ] = useState('baby张');
	return (
		<header className="UseEffect-header">
			<h3>UseEffect</h3>
			<Child hook={hook} name={name} />
			{/**上面的变量和下面方法也是可以直接使用的 */}
			<button onClick={() => sethook(&#39;我改变了react hook 的值&#39; + new Date().getTime())}>改变hook</button>
		</header>
	);
};

const Child = (props) => {
	const [ newhook, setnewhook ] = useState(props.hook);
	//这样写可以代替以前的componentDidMount，第二个参数为空数组，表示该useEffect只执行一次
	useEffect(() => {
		console.log(&#39;first componentDidMount&#39;);
	}, []);

	//第二个参数，数组里是hook,当hook变化时，useEffect会触发，当hook变化时，先销毁再执行第一个函数。
	useEffect(
		() => {
			setnewhook(props.hook + &#39;222222222&#39;);
			console.log(&#39;useEffect&#39;);
			return () => {
				console.log(&#39;componentWillUnmount &#39;);
			};
		},
		[ props.hook ]
	);

	//useLayoutEffect 强制useeffect的执行为同步，并且先执行useLayoutEffect内部的函数
	useLayoutEffect(
		() => {
			console.log(&#39;useLayoutEffect&#39;);
			return () => {
				console.log(&#39;useLayoutEffect componentWillUnmount&#39;);
			};
		},
		[ props.hook ]
	);

	return (
		<div>
			<p>{props.name}</p>
			{newhook}
		</div>
	);
};

export default UseEffect;

【Verwandte Empfehlungen:

---

Redis-Video-Tutorial

】

Das obige ist der detaillierte Inhalt vonWas sind React Hooks?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!