Verwendung von React: Zustandsverwaltung innerhalb von React-Komponenten

Dieser Artikel führt Sie in die Verwendung von React ein: Die interne Statusverwaltung von React-Komponenten hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen.

In diesem Artikel konzentrieren wir uns auf die Zustandsverwaltung innerhalb von React-Komponenten, um die folgenden drei Kernkonzepte zu verstehen oder zu überdenken:

1. props und state

2. Funktionskomponente

3. Klassenkomponente

Fangen wir an!

01. Daten in Reaktion

Aus der Perspektive der „Komponenten“ unterteilt React die in der Anwendung fließenden Daten in zwei Typen:

Requisiten, deren Inhalt nicht geändert werden kann, aber komponentenübergreifend in eine Richtung weitergegeben werden können;

Der Inhalt kann geändert werden, der Status kann jedoch nicht komponentenübergreifend weitergegeben werden;

Darüber hinaus besteht der Unterschied zwischen Requisiten und Status darin, dass Requisiten extern sind und von jedem Code gesteuert werden, der diese Komponente rendert. Der Status ist intern und wird von der Komponente selbst gesteuert.

Anfänger, die keine Computerkenntnisse haben, sind oft verwirrt über die Beziehung zwischen den Namen und Bedeutungen von Requisiten und Zuständen. Tatsächlich ist es Ihnen egal, dass es sich im Grunde nur um einen anderen Namen für Daten handelt, aber in React sind sie alle gegeben besondere Einschränkungen oder Fähigkeiten.

Sie können alle Daten, die Sie an die untergeordnete Komponente übergeben möchten, über das props-Attribut der Komponente übergeben, genau wie beim Übergeben von Eigenschaften in HTML. Alle Eigenschaften werden im this.props-Objekt der untergeordneten Komponente (Klassenkomponente) gespeichert.

function Parent(props) {    
return <Child name={"Tom"} />
}function Child(props) {    
return <span>(props.name)</span>
}

02. Funktionskomponente

Wir haben bereits erwähnt, dass React Komponenten zum Rendern von Ansichten verwendet, um die Leistung zu verbessern. Eine Komponente ist eine Funktion und ihre Funktion kann prägnant mit einer Formel ausgedrückt werden: f (Daten) => UI. An dieser Stelle denke ich, dass Ihnen aufgefallen sein sollte, warum wir sagen, dass React kein großes MVC- (oder MVVM-)Framework ist, da React nur für das Rendern der Ansichtsebene (View) verantwortlich ist und andere Dinge von anderen Tools erledigt werden im React-Ökosystem.

Allerdings ist die einfachste Form für React-Komponenten die Funktionskomponente, die die React-Philosophie, eine Sache nach der anderen zu erledigen, die Komponentisierung und die datengesteuerte Benutzeroberfläche vollständig demonstriert.

Funktionskomponenten werden auch als „zustandslose Komponenten“, „kontrollierte Komponenten“ oder „Marionettenkomponenten“ bezeichnet, da Funktionskomponenten nur für den Empfang von Requisiten und die Rückgabe der Benutzeroberfläche verantwortlich sind. In realen React-Anwendungsentwicklungsszenarien verwenden wir häufig Funktionskomponenten so weit wie möglich zu erweitern, um die gesamte Anwendungsoberfläche in möglichst kleine visuelle Einheiten aufzuteilen.

Dies liegt daran, dass die Funktionskomponente sehr intuitiv ist, das Attribut-Return-Element empfängt, die interne Logik klar und deutlich ist und, was noch wichtiger ist, das Schlüsselwort „this“ in der Funktionskomponente nicht vorhanden ist, sodass Sie sich nie um das lästige „This“ kümmern müssen Kontextproblem“.

Denken Sie daran: Wenn Ihre Komponente den internen Status nicht verfolgen muss, versuchen Sie, funktionale Komponenten zu verwenden.

03. Klassenkomponente

Der Funktionskomponente entspricht die „Klassenkomponente“. Sie wird auch als „zustandsbehaftete Komponente“, „unkontrollierte Komponente“ und „Containerkomponente“ bezeichnet. Hierbei ist zu beachten, dass wir zwar die beiden Arten von Komponenten in Form von Code benennen, dies jedoch nicht streng ist, da „Klassen“ in JavaScript auch Funktionen sind.

Im Gegensatz zu Funktionskomponenten verfügen Klassenkomponenten über interne Daten, die geändert werden können – den Status. Dies wirkt sich letztendlich auf die Darstellung der Seite aus und der Status kann jederzeit intern von der Komponente geändert werden. Der übliche Moment ist, wenn der Benutzer mit der Schnittstelle interagiert.

Denn React kapselt sich ändernde Daten in Komponenten und folgt dem Prinzip des unidirektionalen Datenflusses. Wir verfügen über hochabstrakte UI-Komponenten und kapseln komplexe Geschäftslogik. Dadurch können wir große Anwendungen entwickeln, indem wir eine Reihe kleiner Komponenten aufbauen und kombinieren.

Wie fügt man einer Klassenkomponente einen Status hinzu? Es ist ganz einfach: Wir müssen lediglich ein Statusattribut innerhalb der Klassenkomponente hinzufügen, und das Statusattribut ist ein Objekt. Dieses Objekt stellt den Zustand der Komponente dar. Jeder Attributname des Objekts stellt einen bestimmten Zustand der Komponente dar. Das Folgende ist der spezifische Code:

import React from "react"class Parent extends React.Component {
    state = {
        name: "Eliot",
    }
    
    render() {        return <p>{this.state.name}</p>
    }
}

React 使我们迫使大脑关注两个重要的部分：

组件看起来是什么样？

组件当前的状态是什么？

通过让组件管理自己的状态，任何时候状态的变更都会令 React 自动更新相应的页面部分。这便是使用 React 构建组件的主要优势之一：当页面需要重新渲染时，我们仅仅需要思考的是如何更改状态。我们不必跟踪页面的哪些部分需要更改，不需要决定如何有效的重新呈现页面，React 自会比较先前的输出和新的输出，决定什么应该发生改变，并为我们做出决定。而这个确定之前改变了什么和现在应该新输出什么的过程有一个专门的名词，叫做 Reconciliation。

04. 修改 state

你应该还记得类组件与函数组件最大的不同在于类组件自身拥有可以改变内部数据的能力。那么如何行使这一能力呢？和直觉不同，要做到这一点，你需要使用 React 提供的专门的 API：this.setState()。

你有两种方式使用该 API：

设置对象参数；

设置函数参数；

让我们先来看看第一种：

this.setState({    name: "Tom"})

React 会自动合并对 state 的改变。而有时，你的组件需要一个新的 state ，而这个 state 的变化又依赖于旧的 state值，每当这种时候，你就该使用第二种 API 调用方式：

this.setState((prevState) => ({
    name: "mr." + prevState.name
}))

讲到这里你可能会感到奇怪，只是更新 state 而已，为什么还需要调用一个专门的 API？我们直接修改之前定义的 state对象不就好了吗？之所以这样设计的原因是，组件内 state 的变化不仅仅是对象属性值发生变化那么简单，它还需要驱动整个 UI 进行重新渲染，因此 this.setState() 这个 API 被调用时实际上做了两件事：

修改 state 对象；

驱动组件重新渲染；

如果你对 React 有一定研究，你可能会质疑我以上所罗列的两点并不精确，的确如此，小小的 this.setState() API 其实内部还有很多细节值得注意，例如，当调用 this.setState() 时并不会立即改变 state 的值，也当然不会立即重新渲染组件。例如，当以对象为参数调用 this.setState() API 时，尽管内部重复为数据赋值，最终的数据也只保留最后一次更改的结果。

不过幸好，这些略显古怪的状态早有前人为我们做了详尽的解释，如果你感兴趣，请点击下方链接查询更多的信息：

setState：这个API设计到底怎么样

问一个react更新State的问题？

05. 控制组件

当你在 Web 应用中使用表单时，这个表单的数据被存储于相应的 DOM 节点内部，但正如我们之前提到的，React 的整个关键点就在于如何高效的管理应用内的状态。所以虽然表单的数据被存储于 DOM 中，React 依然可以对它进行状态管理。

而管理的方式即是使用“控制组件”。简单而言，“控制组件”会渲染出一个表单，但是将表单所需的所有真实数据作为 state 存储于组件内部，而不是 DOM 中。

之所以被称为“控制组件”的原因也即在于此，“控制组件”控制着组件内的表单数据，因此，唯一更新表单数据的方式就是更新组件内部对应的 state 值。

import React as "react"class Input extends React.Component {
    state = {
        value: "enter something...",
    }
    
    handleClick: (e) => {        this.setState({value: e.target.value})
    }
    
    render() {
        <input value={this.state.value} onKeyup={this.handleClick} />
    }
}

可以看到，我们使用 handleClick 方法响应用户每一次键盘敲击以即时更新表单状态，这样做不仅天然的支持了即时的输入验证，还允许你有条件的禁止或点亮表单按钮。

06. 小结

这篇文章我们介绍了 React 的两种数据形式：state 和 props，并且介绍了 React 组件的两种形式：函数组件与类组件，希望各位有所收获。

相关推荐：

react的使用： React如何渲染UI

React的使用：react框架的五大特点

Das obige ist der detaillierte Inhalt vonVerwendung von React: Zustandsverwaltung innerhalb von React-Komponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!