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.
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 | 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 ()=>{ } } , [ ])
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('我改变了react hook 的值' + new Date().getTime())}>改变hook</button>
</header>
);
};
const Child = (props) => {
const [ newhook, setnewhook ] = useState(props.hook);
//这样写可以代替以前的componentDidMount，第二个参数为空数组，表示该useEffect只执行一次
useEffect(() => {
console.log('first componentDidMount');
}, []);
//第二个参数，数组里是hook,当hook变化时，useEffect会触发，当hook变化时，先销毁再执行第一个函数。
useEffect(
() => {
setnewhook(props.hook + '222222222');
console.log('useEffect');
return () => {
console.log('componentWillUnmount ');
};
},
[ props.hook ]
);
//useLayoutEffect 强制useeffect的执行为同步，并且先执行useLayoutEffect内部的函数
useLayoutEffect(
() => {
console.log('useLayoutEffect');
return () => {
console.log('useLayoutEffect componentWillUnmount');
};
},
[ props.hook ]
);
return (
<div>
<p>{props.name}</p>
{newhook}
</div>
);
};
export default UseEffect;】
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!
