Was sind React Hooks?

React-Hooks sind eine neue Funktion von React16.8, die es React-Funktionskomponenten ermöglicht, einen Status zu haben und Lebenszyklusmethoden wie „componentDidMount“ und „componentDidUpdate“ bereitzustellen.

Die meisten unserer React-Klassenkomponenten können den Status speichern, Funktionskomponenten jedoch nicht? Und Klassenkomponenten haben einen Lebenszyklus, Funktionskomponenten jedoch nicht?

In früheren Versionen von React können Klassenkomponenten einige unnötige Renderings optimieren, indem sie PureComponent erben. Die offizielle Website von React bietet keine entsprechende Methode zum Zwischenspeichern von Funktionskomponenten, um einige unnötige Renderings zu reduzieren . Memofunktion.

Die neuen Hooks in React 16.8 können dafür sorgen, dass React-Funktionskomponenten einen Status haben und Lebenszyklusmethoden wie „componentDidMount“ und „componentDidUpdate“ bereitstellen.

Hook Das Wort Hook bedeutet „Haken“.

React Hooks bedeutet, dass Komponenten so weit wie möglich als reine Funktionen geschrieben werden sollten. Wenn externe Funktionen und Nebenwirkungen benötigt werden, sollten Hooks verwendet werden, um den externen Code einzubinden. React Hooks sind diese Hooks.

Verwenden Sie den Haken, den Sie benötigen. React stellt standardmäßig einige gängige Hooks bereit, Sie können aber auch Ihre eigenen Hooks kapseln.

Alle Hooks führen externe Funktionen in Funktionen ein, daher stimmt React zu, dass Hooks zur leichteren Identifizierung mit dem Use-Präfix benannt werden. Wenn Sie die Funktion xxx verwenden möchten, heißt der Hook usexxx.

Im Folgenden werden die vier am häufigsten verwendeten Hooks vorgestellt, die standardmäßig von React bereitgestellt werden.

• useState()

• useContext()

• useReducer()

• useEffect()

useState(): Status-Hook

useState() wird verwendet für Funktionskomponenten führen den Zustand ein. Reine Funktionen können keinen Status haben, also setzen Sie den Status in den Haken.

Wenn der Benutzer in der Komponentenklasse weiter oben in diesem Artikel auf die Schaltfläche klickt, ändert sich der Text der Schaltfläche. Der Text hängt davon ab, ob der Benutzer klickt oder nicht. Schreiben Sie mit useState() wie folgt um.

import React, { useState } from "react";
export default function  Button()  {
  const  [buttonText, setButtonText] =  useState("Click me,   please");
  function handleClick()  {
    return setButtonText("Thanks, been clicked!");
  }
  return  <button  onClick={handleClick}>{buttonText}</button>;
}

Demo-Adresse: https://codesandbox.io/s/nifty-waterfall-4i2dq

Im obigen Code ist die Button-Komponente eine Funktion und der useState()-Hook wird intern verwendet, um den Status einzuführen.

useState() Diese Funktion akzeptiert den Anfangswert des Zustands als Parameter. Im obigen Beispiel ist der Anfangswert der Text der Schaltfläche. Diese Funktion gibt ein Array zurück. Das erste Mitglied des Arrays ist eine Variable (buttonText im obigen Beispiel), die auf den aktuellen Wert des Status zeigt. Der zweite Member ist eine Funktion, die zum Aktualisieren des Status verwendet wird. Die Konvention besteht aus dem Set-Präfix plus dem Variablennamen des Status (das obige Beispiel ist setButtonText).

useContext(): Shared State Hook

Wenn Sie den Status zwischen Komponenten teilen müssen, können Sie useContext() verwenden.

Jetzt haben wir zwei Komponenten, Navigationsleiste und Nachrichten, und wir möchten den Status zwischen ihnen teilen.

<div className="App">
  <Navbar/>
  <Messages/>
</div>

Der erste Schritt besteht darin, die React Context API zu verwenden, um einen Kontext außerhalb der Komponente zu erstellen.

const AppContext = React.createContext({});

Der Komponentenverpackungscode lautet wie folgt.

<AppContext.Provider value={{
  username: &#39;superawesome&#39;
}}>
  <div className="App">
    <Navbar/>
    <Messages/>
  </div>
</AppContext.Provider>

Im obigen Code stellt AppContext.Provider ein Kontextobjekt bereit, das von Unterkomponenten gemeinsam genutzt werden kann.

Der Code der Navbar-Komponente lautet wie folgt.

const Navbar = () => {
  const { username } = useContext(AppContext);
  return (
    <div className="navbar">
      <p>AwesomeSite</p>
      <p>{username}</p>
    </div>
  );
}

Im obigen Code wird die Hook-Funktion useContext() verwendet, um das Context-Objekt einzuführen und daraus das Benutzernamenattribut abzurufen.

Der Code der Nachrichtenkomponente ist ebenfalls ähnlich.

const Messages = () => {
  const { username } = useContext(AppContext)
  return (
    <div className="messages">
      <h1>Messages</h1>
      <p>1 message for {username}</p>
      <p className="message">useContext is awesome!</p>
    </div>
  )
}

demo: https://codesandbox.io/s/react-usecontext-redux-0bj1v

useReducer(): Action Hook

React selbst bietet keine Statusverwaltungsfunktionalität und benötigt diese normalerweise die Nutzung einer externen Bibliothek. Die am häufigsten verwendete Bibliothek hierfür ist Redux.

Das Kernkonzept von Redux besteht darin, dass Komponenten Aktionen ausführen, um mit dem Statusmanager zu kommunizieren. Nachdem der Statusmanager die Aktion erhalten hat, verwendet er die Reducer-Funktion, um den neuen Status zu berechnen. Die Form der Reducer-Funktion ist (Zustand, Aktion) => newState. Der Hook

useReducers() wird verwendet, um die Reducer-Funktion einzuführen.

const [state, dispatch] = useReducer(reducer, initialState);

Das Obige ist die grundlegende Verwendung von useReducer(). Es akzeptiert die Reducer-Funktion und den Anfangswert des Status als Parameter und gibt ein Array zurück. Das erste Mitglied des Arrays ist der aktuelle Wert des Zustands und das zweite Mitglied ist die Dispatch-Funktion, die die Aktion sendet.

Unten sehen Sie ein Beispiel für einen Zähler. Die zur Berechnung des Zustands verwendete Reduzierfunktion lautet wie folgt.

const myReducer = (state, action) => {
  switch(action.type)  {
    case('countUp'):
      return  {
        ...state,
        count: state.count + 1
      }
    default:
      return  state;
  }
}

Der Komponentencode lautet wie folgt.

function App() {
  const [state, dispatch] = useReducer(myReducer, { count:   0 });
  return  (
    <div className="App">
      <button onClick={() => dispatch({ type: &#39;countUp&#39; })}>
        +1
      </button>
      <p>Count: {state.count}</p>
    </div>
  );
}

demo: https://codesandbox.io/s/react-usereducer-redux-xqlet

Da Hooks Shared-State- und Reducer-Funktionen bereitstellen können, kann es Redux in diesen Aspekten ersetzen. Allerdings kann es keine Middleware und keine Zeitreise bereitstellen. Wenn Sie diese beiden Funktionen benötigen, müssen Sie dennoch Redux verwenden.

useEffect(): Nebeneffekt-Hook

useEffect() wird verwendet, um Vorgänge mit Nebeneffekten einzuführen. Am häufigsten werden Daten vom Server angefordert. Code, der zuvor in „componentDidMount“ platziert wurde, kann jetzt in „useEffect()“ platziert werden.

useEffect() wird wie folgt verwendet.

useEffect(()  =>  {
  // Async Action
}, [dependencies])

上面用法中，useEffect()接受两个参数。第一个参数是一个函数，异步操作的代码放在里面。第二个参数是一个数组，用于给出 Effect 的依赖项，只要这个数组发生变化，useEffect()就会执行。第二个参数可以省略，这时每次组件渲染时，就会执行useEffect()。

下面看一个例子。

const Person = ({ personId }) => {
  const [loading, setLoading] = useState(true);
  const [person, setPerson] = useState({});
  useEffect(() => {
    setLoading(true); 
    fetch(`https://swapi.co/api/people/${personId}/`)
      .then(response => response.json())
      .then(data => {
        setPerson(data);
        setLoading(false);
      });
  }, [personId])
  if (loading === true) {
    return <p>Loading ...</p>
  }
  return <div>
    <p>You&#39;re viewing: {person.name}</p>
    <p>Height: {person.height}</p>
    <p>Mass: {person.mass}</p>
  </div>
}

上面代码中，每当组件参数personId发生变化，useEffect()就会执行。组件第一次渲染时，useEffect()也会执行。

demo：https://codesandbox.io/s/react-useeffect-redux-9t3bg

创建自己的 Hooks

上例的 Hooks 代码还可以封装起来，变成一个自定义的 Hook，便于共享。

const usePerson = (personId) => {
  const [loading, setLoading] = useState(true);
  const [person, setPerson] = useState({});
  useEffect(() => {
    setLoading(true);
    fetch(`https://swapi.co/api/people/${personId}/`)
      .then(response => response.json())
      .then(data => {
        setPerson(data);
        setLoading(false);
      });
  }, [personId]);  
  return [loading, person];
};

上面代码中，usePerson()就是一个自定义的 Hook。

Person 组件就改用这个新的钩子，引入封装的逻辑。

const Person = ({ personId }) => {
  const [loading, person] = usePerson(personId);
  if (loading === true) {
    return <p>Loading ...</p>;
  }
  return (
    <div>
      <p>You&#39;re viewing: {person.name}</p>
      <p>Height: {person.height}</p>
      <p>Mass: {person.mass}</p>
    </div>
  );
};

demo：https://codesandbox.io/s/react-useeffect-redux-ghl7c

更多编程相关知识，请访问：编程学习网站！！

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!