Welche Vorteile bietet die Verwendung von Hooks in React?

Vorteile der Verwendung von Hooks in React: 1. Vereinfacht die Wiederverwendung von Logik und erleichtert die Wiederverwendung von Code. Hooks ermöglichen Entwicklern die Wiederverwendung von Statuslogik, ohne die Komponentenstruktur zu ändern aggregiert, sodass die Geschäftslogik klar getrennt ist und der Code einfacher zu verstehen und zu warten ist.

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

Hook ist eine neue Funktion von React 16.8. Es wird speziell in Funktionskomponenten verwendet. Es kann andere Funktionen von React-in-Klassenkomponenten ersetzen und wird häufig in der tatsächlichen Arbeit verwendet.

Was sind Hooks?

Hooks werden als Hooks übersetzt und sind Funktionen innerhalb von Funktionskomponenten, die für die Verknüpfung mit externen Funktionen verantwortlich sind.

React bietet einige gängige Hooks und React unterstützt auch benutzerdefinierte Hooks. Diese Hooks werden verwendet, um externe Funktionen in Funktionen einzuführen.

Wenn wir externe Funktionen in eine Komponente einführen müssen, können wir die von React bereitgestellten Hooks verwenden oder Hooks anpassen.

Wenn Sie beispielsweise die Funktion zum Verwalten des Status in einer Komponente einführen, können Sie die Funktion useState verwenden. Die Verwendung von useState wird im Folgenden ausführlich vorgestellt.

Warum Hooks verwenden (Vorteile der Verwendung von Hooks)

Es gibt zwei Hauptgründe für die Verwendung von Hooks:

• Vereinfachen Sie die Wiederverwendung von Logik.

• 1. Vereinfachen Sie die Wiederverwendung von Logik und machen Sie die Wiederverwendung von Code einfacher

Vor dem Aufkommen von Hooks musste React komplexe Entwurfsmuster wie Komponenten höherer Ordnung und Render-Requisiten ausleihen, um eine Wiederverwendung von Logik zu erreichen, aber order Components generiert redundante Komponentenknoten, was das Debuggen komplizierter macht. Hooks ermöglichen es uns, Zustandslogik wiederzuverwenden, ohne die Komponentenstruktur zu ändern.

Zum Beispiel muss die häufig verwendete Antd-Tabelle häufig einige Zustände beibehalten und zum richtigen Zeitpunkt ändern:

componentDidMount(){
 this.loadData();
}
loadData = ()=>{
   this.setState({
     current: xxx,
     total: xxx,
     pageSize: xxx,
     dataSource: xxx[]
   })
}
onTableChange = ()=>{
   this.setState({
     current: xxx,
     total: xxx,
     pageSize: xxx,
   })
}
render(){
 const {total,pageSize,current,dataSource} = this.state;
 return <Table
  dataSource={dataSource}
  pagination={{total,pageSize,current}
  onChange={this.onTableChange}
 />
}

Jede Tabelle muss etwas von dieser Art von Logik schreiben. Wie spät ist es also? Diese sehr ähnlichen Logiken können durch die Kapselung einer Komponente höherer Ordnung abstrahiert werden. Diese höherwertige Komponente verfügt über diese Zustände und kann automatisch den Server aufrufen, um Remote-Daten abzurufen.

Wenn es mit Komponenten höherer Ordnung implementiert wird, sieht es so aus:

import { Table } from 'antd'
import server from './api'
function useTable(server) {
  return function (WrappedComponent) {
    return class HighComponent extends React.Component {
      state = {
        tableProps: xxx, 
      };
      render() {
        const { tableProps } = this.state;
        return <WrappedComponent tableProps={tableProps} />;
      }
    };
  };
}
@useTable(server)
class App extends Component{
  render(){
    const { tableProps } = this.props;
    return (
      <Table 
        columns={[...]}
      // tableProps包含pagination, onChange, dataSource等属性。
        {...tableProps}
      />
    )
  }
}

Wenn es mit Hooks implementiert wird, sieht es so aus:

import { Table } from 'antd'
import server from './api'
function useTable(server) {
  const [tableProps, setTableProps] = useState(xxx);
  return tableProps;
}
function App {
    const { tableProps } = useTable();
    return (
      <Table 
        columns={[...]}
      // tableProps包含pagination, onChange, dataSource等属性
        {...tableProps}
      />
    )
}
/*

Verglichen mit den Ebenen der Verschachtelung von Komponenten höherer Ordnung „Großvater => parent => child",

Hooks sehen so aus:

const { brother1 } = usehook1; 
const { brother2} = usehook2;
*/

Sie können sehen, dass die Logik von Hooks klarer und die Lesbarkeit besser ist.

2. Komplexe Komponenten leichter verständlich machen

In Klassenkomponenten ist der Code für dieselbe Geschäftslogik auf verschiedene Lebenszyklusfunktionen der Komponente verteilt, und Hooks können den Code für dieselbe Geschäftslogik zusammenfassen Die Geschäftslogik ist klar getrennt, wodurch der Code leichter zu verstehen und zu warten ist. 【Verwandte Empfehlung:

Redis-Video-Tutorial

】

Das obige ist der detaillierte Inhalt vonWelche Vorteile bietet die Verwendung von Hooks in React?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!