Einführung in 10 Hooks in React

importiere React von „react“;
importiere './App.css';
//Normalerweise schreibe ich eine Klasse, um den Status zu ändern class App extends React.Component {
  Konstruktor (Requisiten) {
    super(Requisiten)
    dieser.Zustand = {
      Hook: „React Hook ist wirklich nützlich“
    }
  }
  changehook = () => {
    dies.setState({
      Hook: „Ich habe den Wert des React-Hooks geändert“
    })
  }
  rendern () {
    const { hook } = dieser.Zustand
    zurückkehren(
         <header className="App-header">
          {Haken}
          <button onClick={this.changehook}>
            Haken ändern
          </button>
        </header>
      )
  }
}
{App} exportieren

//Funktionales Schreiben, Zustandsänderungsfunktion App() {
//Eine Variable namens Hook erstellt. Die Methode Sethook kann diese Variable ändern. Der Anfangswert ist „React Hook ist wirklich nützlich“.
 const [hook, sethook] = useState("React-Hook ist wirklich nützlich");
  zurückkehren ( 
    <header className="App-header">
      {hook}{/**Die Variablen und Methoden hier können auch direkt verwendet werden*/}
      <button onClick={() => sethook("Ich habe den Wert des React-Hooks geändert")}>
        Haken ändern
      </button>
    </header>
  );
}
{App} exportieren

// Pfeilfunktion schreiben, Status ändern export const App = props => {
  const [hook, sethook] = useState("React-Hook ist wirklich nützlich");
  zurückkehren (
    <header className="App-header">
      {Haken}
      <button onClick={() => sethook("Ich habe den Wert des React-Hooks geändert")}>
        Haken ändern
      </button>
    </header>
  );
};

importiere React, { useState, useEffect, useLayoutEffect } von „react“;

//Schreiben der Pfeilfunktion, Statusänderung const UseEffect = (props) => {
 //Eine Variable namens Hook erstellt. Die Methode Sethook kann diese Variable ändern. Der Anfangswert ist „React Hook ist wirklich nützlich“.
 const [ hook, sethook ] = useState('React-Hook ist wirklich nützlich');
 const [ name ] = useState('baby');
 zurückkehren (
  <header Klassenname="UseEffect-header">
   <h3>NutzenEffekt</h3>
   <Untergeordneter Hook={Hook} Name={Name} />
   {/**Die obigen Variablen und die folgenden Methoden können auch direkt verwendet werden*/}
   <button onClick={() => sethook('Ich habe den Wert des React-Hooks geändert' + new Date().getTime())}>Hook ändern</button>
  </header>
 );
};

const Child = (Eigenschaften) => {
 const [ neuer Hook, setze neuen Hook ] = useState(props.hook);
 //Dies kann das vorherige componentDidMount ersetzen. Der zweite Parameter ist ein leeres Array, das angibt, dass useEffect nur einmal ausgeführt wirduseEffect(() => {
  console.log('erste Komponente wurde eingebunden');
 }, []);

 //Der zweite Parameter, das Array, ist der Hook. Wenn sich der Hook ändert, wird useEffect ausgelöst. Wenn sich der Hook ändert, wird er zuerst zerstört und dann wird die erste Funktion ausgeführt.
 Effekt verwenden(
  () => {
   setnewhook(props.hook + '222222222');
   console.log('useEffect');
   zurückgeben () => {
    console.log('Komponente wird nicht eingebunden ');
   };
  },
  [ Requisiten.hook ]
 );

 //useLayoutEffect erzwingt eine synchrone Ausführung von useeffect und führt zuerst die Funktion useLayoutEffect innerhalb von useLayoutEffect aus.
  () => {
   console.log('useLayoutEffect');
   zurückgeben () => {
    console.log('useLayoutEffect-Komponente wird nicht eingehängt');
   };
  },
  [ Requisiten.hook ]
 );

 zurückkehren (
  <div>
   <p>{Eigenschaften.name}</p>
   {neuer Hook}
  </div>
 );
};

Standard-UseEffect exportieren;

importiere React, { useState, useMemo } von „react“;

const Child = ({ Alter, Name, Kinder }) => {
    //Wenn useMemo nicht zur Verarbeitung verwendet wird, wird die untergeordnete Komponente einmal gerendert, solange sich der Status der übergeordneten Komponente ändert. Mit useMemo können Sie einen bestimmten Statusnamen überwachen. Wenn sich der Name ändert, führen Sie die erste Funktion in useMemo aus console.log(age, name, children, '11111111');
 Funktion Namensänderung() {
  console.log(Alter, Name, Kinder, '22222222');
  gib Name + „Ändern“ zurück;
    }
     {/** Obwohl auf der offiziellen React-Website steht, dass useCallback und useMemo ähnliche Funktionen haben, weiß ich nicht, wo das Versionsproblem liegt. Diese Methode kann noch nicht verwendet werden. const memoizedCallback = useCallback(
        () => {
            console.log('useCallback')
        },
        [Name],
      );
    Konsole.log(memoizedCallback,'memoizedCallback')
     */}
    //useMemo hat zwei Parameter, genau wie useEffect, der erste Parameter ist eine Funktion, der zweite Parameter ist ein Array, das verwendet wird, um einen Status zu überwachen, der sich nicht ändert const changedname = useMemo(() => namechange(), [ name ]);
 zurückkehren (
  <div Stil={{ Grenze: '1px durchgezogen' }}>
   <p>Kinder: {Kinder}</p>
   <p>Name: {Name}</p>
   <p>geändert: {changedname}</p>
   <p>Alter:{Alter}</p>
  </div>
 );
};

const UseMemo = () => {
    //useState legt den Namen und das Alter fest und verwendet zwei Schaltflächen, um sie zu ändern und an die untergeordnete Komponente zu übergeben. const [ name, setname ] = useState('baby张'); 
 const [ Alter, Setage ] = useState(18);
 zurückkehren (
  <div>
   <Schaltfläche
    beiKlick={() => {
     setname('Baby' + new Date().getTime()); 
    }}
   >
    Namen ändern</button>
   <Schaltfläche
    beiKlick={() => {
     setage('Alter' + neues Datum().getTime());
    }}
   >
    Alter ändern</button>
   <p>
    UseMemo {name}:{age}
   </p>
   <Alter des Kindes={Alter} Name={Name}>
    Kinder von {name}
   </Kind>
  </div>
 );
};

Standard-UseMemo exportieren;

importiere React, { useState, useRef } von „react“;

const UseRef = () => {
 //Hier bindet useState einen Input und verknüpft einen Statusnamen
 const [ name, setname ] = useState('baby');
 const refvalue = useRef(null); //Erstelle zuerst ein leeres useRef
 Funktion addRef() {
  refvalue.current.value = Name; //Weisen Sie diesem Ref einen Wert zu, wenn Sie auf die Schaltfläche klicken // refvalue.current = Name //Wenn es so geschrieben ist, ist der Wert auch dann noch im erstellten Ref vorhanden und kann verwendet werden, wenn der Ref nicht an das DOM gebunden ist console.log(refvalue.current.value);
 }
 zurückkehren (
  <div>
            <Eingabe
                Standardwert={name}
    beiÄnderung={(e) => {
     setname(e.ziel.wert);
                }}
   />
   <button onClick={addRef}>Fügen Sie unten den Namen ein</button>
   <p>Geben Sie mir einen UseRef-Namen:</p>
   <input ref={refvalue} />
  </div>
 );
};

Standard-UseRef exportieren;

importiere React, { useState, useContext, createContext } von „react“;

const ContextName = erstelleContext();
//Hier werden zur Vereinfachung des Bloggens die Komponenten Opa und Enkel in eine Datei geschrieben. Normalerweise muss der von der Komponente Opa und der Komponente Enkel erstellte Kontext einzeln eingeführt werden.

const UseContext = () => {
 //Hier erstellt useState einen Status und die Schaltfläche steuert die Änderung const [ name, setname ] = useState('baby张');
 zurückkehren (
  <div>
   <h3>UseContext Opa</h3>
   <Schaltfläche
    beiKlick={() => {
     setname('Baby' + new Date().getTime());
    }}
   >
    Namen ändern</button>
   {/**Dies ist dasselbe wie die Kontextverwendung. Der Anbieter muss den Wert an die untergeordnete Komponente übergeben. Der Wert ist nicht unbedingt ein Parameter*/}}
   <ContextName.Provider-Wert={{ Name: Name, Alter: 18 }}>
    {/**Unterkomponenten, die Variablen verwenden müssen, müssen in die Mitte des Anbieters geschrieben werden, um eine gemeinsame Nutzung zu erreichen*/}
    <Kind />
   </ContextName.Provider>
  </div>
 );
};

const Kind = () => {
 //Erstelle eine Sohnkomponente und führe die Enkelkomponente ein return (
  <div Stil={{ Grenze: '1px durchgezogen' }}>
   Kind
  </div>
 );
};

const KindKind = () => {
 //Erstellen Sie eine Enkelkomponente, akzeptieren Sie den Status der Enkelkomponente und verwenden Sie useContext, um den Wert von ContextName abzurufen, der von der Enkelkomponente erstellt wurde. let childname = useContext(ContextName);
 zurückkehren (
  <div Stil={{ Grenze: '1px durchgezogen' }}>
   KindKind Enkelkind
    {Kindname.Name}:{Kindname.Alter}
   </p>
  </div>
 );
};

Standard-UseContext exportieren;

importiere React, { useState, useReducer, useContext, createContext } von „react“;

// Stroe-Typ und Initialisierungswert initialisieren und Reducer erstellen
const ADD_COUNTER = "ADD_COUNTER";
const initReducer = {
 Anzahl: 0
};
//Normaler Reducer, der die Funktion Reducer (Zustand, Aktion) { schreibt.
 Schalter (Aktion.Typ) {
  Fall ADD_COUNTER:
   return { ...Zustand, Anzahl: Zustand.Anzahl + 1 };
  Standard:
   Rückgabezustand;
 }
}

const CountContext = erstelleContext();
//Im obigen Absatz wird der Status initialisiert und der Reducer erstellt den Kontext. Sie können eine separate Datei schreiben. Hier habe ich es der besseren Verständlichkeit halber in eine Datei eingefügt const UseReducer = () => {
 const [ name, setname ] = useState('baby');
 //Verwenden Sie useReducer in der übergeordneten Komponente. Der erste Parameter ist die Reducer-Funktion und der zweite Parameter ist der Status. Der zurückgegebene Wert ist Status und Dispatch.
 const [Status, Versand] = useReducer (Reducer, initReducer);
 zurückkehren (
  <div>
   Verwenden Sie Reducer
   {/* Hier übergeben wir den Reducer und den Status über den Kontext an die untergeordnete Komponente*/}
   <CountContext.Provider-Wert={{ Status, Dispatch, Name, Setname }}>
    <Kind />
   </CountContext.Provider>
  </div>
 );
};

const Kind = () => {
 // Akzeptieren Sie wie bei der normalen Kontextakzeptanz den Wert der übergeordneten Komponente, lösen Sie den Reduzierer durch Ereignisse usw. aus, um den Redux-Effekt zu erzielen const { state, dispatch, name, setname } = useContext(CountContext);
 Funktion handleclick(Anzahl) {
  dispatch({ Typ: ADD_COUNTER, Anzahl: 17 });
  setname(Anzahl % 2 == 0 ? 'Babybruder' : 'Babybruder');
 }
 zurückkehren (
  <div>
   <p>
    {name} ist dieses Jahr {state.count} Jahre alt</p>
   <button onClick={() => handleclick(state.count)}>Erwachsen</button>
  </div>
 );
};

Standardmäßig UseReducer exportieren;