Was ist zustandsloses Schreiben?

React Stateless wird als „{props.xxx}“ geschrieben. Seine zustandslose Komponente wird hauptsächlich zum Definieren von Vorlagen, zum Empfangen von Daten verwendet, die von den Requisiten der übergeordneten Komponente übergeben werden, und zum Füllen der Requisiten mit dem Ausdruck „{props.xxx}“. in die Vorlage ein.

Die Betriebsumgebung dieses Artikels: Windows7-System, React17.0.1, Dell G3.

Wie kann man in React zustandslos schreiben?

Die Schreibmethode und der Unterschied zwischen zustandslosen Komponenten und zustandsbehafteten Komponenten in React

Komponenten in React sind hauptsächlich in zwei Kategorien unterteilt: zustandslose Komponenten und zustandsbehaftete Komponenten.

1. Zustandslose Komponenten werden hauptsächlich verwendet, um Vorlagen zu definieren, von übergeordneten Komponenten-Requisiten übergebene Daten zu empfangen und den Ausdruck {props.xxx} zu verwenden, um Requisiten in die Vorlage zu stopfen. Zustandslose Komponenten sollten die Vorlage rein halten, um die Wiederverwendung von Komponenten zu erleichtern. Erstellen Sie zustandslose Komponenten wie folgt:

var Header = (props) = (
    <p>{props.xxx}</p>
);
export default Header

2. Zustandsbehaftete Komponenten werden hauptsächlich zum Definieren von Interaktionslogik und Geschäftsdaten verwendet (wenn Redux verwendet wird, können Geschäftsdaten einheitlich extrahiert und verwaltet werden). Verwenden Sie den Ausdruck {this.state.xxx} Hängen Sie die Geschäftsdaten an die Instanz der Containerkomponente ein (zustandsbehaftete Komponenten können auch als Containerkomponenten bezeichnet werden, und zustandslose Komponenten können auch als Anzeigekomponenten bezeichnet werden) und übergeben Sie dann Requisiten an die Anzeigekomponente. Die Anzeigekomponente empfängt die Requisiten und stopft sie Requisiten in die Vorlage einfügen. Erstellen Sie eine zustandsbehaftete Komponente wie folgt:

class Home extends React.Component {
    constructor(props) {
        super(props);
    };
    render() {
        return (
            <header></header>  //也可以写成<header></header>
        )
    }
}
export default Home

Dies ist die offizielle Standardschreibweise. Im Konstruktor muss standardmäßig ein Parameter übergeben und die super()-Methode aufgerufen werden, um eine Instanz der Unterklasse zu erhalten. Noch verwirrender ist jedoch, warum diese Parameter übergeben werden sollten und welchen Nutzen die Übergabe dieser Parameter hat.

Denn aus der Perspektive der Komponente in render() kann der Konstruktor das Props-Attribut für die Komponenteninstanz abrufen, ohne Parameter zu übergeben. Wie folgt:

class Home extends React.Component {
    constructor() {
        super();
    };
    render (){
        return(
            <p>
                <header></header>
            </p>
        );
    };
};

class Header extends React.Component {
    constructor() {
        super();
    };
    render() {
        return (
            <p>{this.props.name}</p>  //构造函数中并没有传递props属性，这里通过{this.props.name}依然获取到了值
        );
    };
};

Dies ist einfacher zu verstehen, da die render()-Methode eine Methode für den Unterkomponenten-Prototyp ist. Wenn diese entfernt wird, kann sie nicht abgerufen werden.

Dann stellt sich die Frage: Was ist, wenn wir im Konstruktor auf Requisiten zugreifen möchten? An diesem Punkt müssen wir einen Props-Parameter im Konstruktorkonstruktor übergeben, damit wir auf das Props-Attribut der Unterkomponenteninstanz zugreifen können. Wie folgt:

class Header extends React.Component {
    constructor(props) {
        super();
        this.name = props.name;  //获取到子组件实例上的props.name属性，赋值给实例属性name
    };
    render() {
        return (
            <p>{this.name}</p>
        );
    };
};

Es gibt noch eine andere Frage: Warum müssen wir ein Props-Attribut in der Super(props)-Methode übergeben? Schauen Sie sich das folgende Beispiel an:

class Header extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            nameOne: props.name,
            nameTwo: this.props.name  //super()方法中传递了props属性，this.props才可以获取到name属性
        }
    };
    render() {
        return (
            <p>{this.state.nameOne}{this.state.nameTwo}</p>
        );
    };
};

Tatsächlich sind die Werte von props.name und this.props.name gleich, aber sie unterscheiden sich immer noch. Die props in props.name sind die Attributprops von Unterkomponente, aber dies. Die Requisiten in props.name sind nicht die Attribut-Requisiten der Unterkomponente, aber diese Requisiten werden tatsächlich an die übergeordnete Klasse Component übergeben, wenn die Super-Methode aufgerufen wird. also ist this.props.name das props-Attribut in der übergeordneten Component-Klasse. Schauen Sie sich den Quellcode von React an:

Haben Sie festgestellt, dass die Supermethode der Unterklasse die Props-Parameter an die übergeordnete Klasse Component übergibt und die Component die Props-Parameter an ihre Instanzattribute props anhängt? Daher können Sie „props.xxx“ im Konstruktor nur verwenden, indem Sie den Parameter „props“ an die Methode „super“ übergeben. Wenn der Parameter „props“ nicht in der Methode „super“ übergeben wird, wird beim Abrufen des Werts von „this.props“ ein Fehler gemeldet. Name. Rufen Sie this.props ab und zeigen Sie es als undiffed an: wie folgt:

class Header extends React.Component {
    constructor(props) {
        super();
        this.state = {
            nameOne: this.props.name, 
            nameTwo: this.props  
        };
        console.log(this.props.name);  //报错
        console.log(this.props);  //undifined
    };
    render() {
        return (
            <p>{this.state.nameOne}{this.state.nameTwo}</p>
        );
    };
};

Der Kern dieser Schreibmethode besteht darin, die Instanzattribute props der Unterkomponente Header den Instanzattributen state.nameOne und state.nameTwo der Unterkomponente zuzuweisen. Komponenten-Header. Einfach ausgedrückt handelt es sich um die Header-Unterbaugruppe. Die Komponente erstellt ein Statusattribut und weist dann ihrem eigenen Statusattribut ihr eigenes Props-Attribut zu.

Warum wird this.props undefiniert ausgedruckt? Da es sich bei Requisiten um Parameter handelt, die beim Aufrufen der Unterkomponente übergeben werden, kann im Konstruktor nicht auf Requisiten zugegriffen werden. Daher besteht für this.props.name kein Zweifel, dass ein Fehler gemeldet wird.

Wenn Sie also für die Props-Parameter im Konstruktor und die Props-Parameter in Super nicht this.props und props im Konstruktor verwenden, müssen Sie überhaupt keine Parameter übergeben. Andernfalls übergeben Sie die Referenz. Die erhaltenen Werte sind jedoch für this.props und props dieselben, sodass Sie beide schreiben können. Beide Parameter sind jedoch in der offiziellen Dokumentation aufgeführt. Der Genauigkeit halber schreiben wir sie alle auf.

Allerdings gefällt mir persönlich diese Art zu schreiben immer noch.

constructor(props) {
    super(props);
    this.state = {
        name: props.name
    }
};

Der ohne das ist der Wert, und der mit dem ist der Schlüssel.

Komponenten in React werden hauptsächlich in zwei Kategorien unterteilt: zustandslose Komponenten und zustandsbehaftete Komponenten.

1. Zustandslose Komponenten werden hauptsächlich verwendet, um Vorlagen zu definieren, von übergeordneten Komponenten-Requisiten übergebene Daten zu empfangen und den Ausdruck {props.xxx} zu verwenden, um Requisiten in die Vorlage zu stopfen. Zustandslose Komponenten sollten die Vorlage rein halten, um die Wiederverwendung von Komponenten zu erleichtern. Erstellen Sie zustandslose Komponenten wie folgt:

var Header = (props) = (
    <p>{props.xxx}</p>
);
export default Header

2. Zustandsbehaftete Komponenten werden hauptsächlich zum Definieren von Interaktionslogik und Geschäftsdaten verwendet (wenn Redux verwendet wird, können Geschäftsdaten einheitlich extrahiert und verwaltet werden). Verwenden Sie den Ausdruck {this.state.xxx} Hängen Sie die Geschäftsdaten an die Instanz der Containerkomponente ein (zustandsbehaftete Komponenten können auch als Containerkomponenten bezeichnet werden, und zustandslose Komponenten können auch als Anzeigekomponenten bezeichnet werden) und übergeben Sie dann Requisiten an die Anzeigekomponente. Die Anzeigekomponente empfängt die Requisiten und stopft sie Requisiten in die Vorlage einfügen. Erstellen Sie eine zustandsbehaftete Komponente wie folgt:

class Home extends React.Component {
    constructor(props) {
        super(props);
    };
    render() {
        return (
            <header></header>  //也可以写成<header></header>
        )
    }
}
export default Home

Dies ist die offizielle Standardschreibweise. Im Konstruktor muss standardmäßig ein Parameter übergeben und die super()-Methode aufgerufen werden, um eine Instanz der Unterklasse zu erhalten. Noch verwirrender ist jedoch, warum diese Parameter übergeben werden sollten und welchen Nutzen die Übergabe dieser Parameter hat.

Denn aus der Perspektive der Komponente in render() kann der Konstruktor das Props-Attribut für die Komponenteninstanz abrufen, ohne Parameter zu übergeben. Wie folgt:

class Home extends React.Component {
    constructor() {
        super();
    };
    render (){
        return(
            <p>
                <header></header>
            </p>
        );
    };
};

class Header extends React.Component {
    constructor() {
        super();
    };
    render() {
        return (
            <p>{this.props.name}</p>  //构造函数中并没有传递props属性，这里通过{this.props.name}依然获取到了值
        );
    };
};

Dies ist einfacher zu verstehen, da die render()-Methode eine Methode für den Unterkomponenten-Prototyp ist. Wenn diese entfernt wird, kann sie nicht abgerufen werden.

Dann stellt sich die Frage: Was ist, wenn wir im Konstruktor auf Requisiten zugreifen möchten? An diesem Punkt müssen wir einen Props-Parameter im Konstruktorkonstruktor übergeben, damit wir auf das Props-Attribut der Unterkomponenteninstanz zugreifen können. Wie folgt:

class Header extends React.Component {
    constructor(props) {
        super();
        this.name = props.name;  //获取到子组件实例上的props.name属性，赋值给实例属性name
    };
    render() {
        return (
            <p>{this.name}</p>
        );
    };
};

Es gibt noch eine andere Frage: Warum müssen wir ein Props-Attribut in der Super(props)-Methode übergeben? Schauen Sie sich das folgende Beispiel an:

class Header extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            nameOne: props.name,
            nameTwo: this.props.name  //super()方法中传递了props属性，this.props才可以获取到name属性
        }
    };
    render() {
        return (
            <p>{this.state.nameOne}{this.state.nameTwo}</p>
        );
    };
};

Tatsächlich sind die Werte von props.name und this.props.name gleich, aber sie unterscheiden sich immer noch. Die props in props.name sind die Attributprops von Unterkomponente, aber dies. Die Requisiten in props.name sind nicht die Attribut-Requisiten der Unterkomponente, aber diese Requisiten werden tatsächlich an die übergeordnete Klasse Component übergeben, wenn die Super-Methode aufgerufen wird. also ist this.props.name das props-Attribut in der übergeordneten Component-Klasse. Schauen Sie sich den Quellcode von React an:

Haben Sie festgestellt, dass die Supermethode der Unterklasse die Props-Parameter an die übergeordnete Klasse Component übergibt und die Component die Props-Parameter an ihre Instanzattribute props anhängt? Daher können Sie „props.xxx“ im Konstruktor nur verwenden, indem Sie den Parameter „props“ an die Methode „super“ übergeben. Wenn der Parameter „props“ nicht in der Methode „super“ übergeben wird, wird beim Abrufen des Werts von „this.props“ ein Fehler gemeldet. Name. Rufen Sie this.props ab und zeigen Sie es als undiffed an: wie folgt:

class Header extends React.Component {
    constructor(props) {
        super();
        this.state = {
            nameOne: this.props.name, 
            nameTwo: this.props  
        };
        console.log(this.props.name);  //报错
        console.log(this.props);  //undifined
    };
    render() {
        return (
            <p>{this.state.nameOne}{this.state.nameTwo}</p>
        );
    };
};

Der Kern dieser Schreibmethode besteht darin, die Instanzattribute props der Unterkomponente Header den Instanzattributen state.nameOne und state.nameTwo der Unterkomponente zuzuweisen. Komponenten-Header. Einfach ausgedrückt handelt es sich um die Header-Unterbaugruppe. Die Komponente erstellt ein Statusattribut und weist dann ihrem eigenen Statusattribut ihr eigenes Props-Attribut zu.

Warum wird this.props undefiniert ausgedruckt? Da es sich bei Requisiten um Parameter handelt, die beim Aufrufen der Unterkomponente übergeben werden, kann im Konstruktor nicht auf Requisiten zugegriffen werden. Daher besteht für this.props.name kein Zweifel, dass ein Fehler gemeldet wird.

Wenn Sie also für die Props-Parameter im Konstruktor und die Props-Parameter in Super nicht this.props und props im Konstruktor verwenden, müssen Sie überhaupt keine Parameter übergeben. Andernfalls übergeben Sie die Referenz. Die erhaltenen Werte sind jedoch für this.props und props dieselben, sodass Sie beide schreiben können. Beide Parameter sind jedoch in der offiziellen Dokumentation aufgeführt. Der Genauigkeit halber schreiben wir sie alle auf.

Allerdings gefällt mir persönlich diese Art zu schreiben immer noch.

constructor(props) {
    super(props);
    this.state = {
        name: props.name
    }
};

Der ohne das ist der Wert, und der mit dem ist der Schlüssel.

Empfohlenes Lernen: „

Video-Tutorial reagieren

“

Das obige ist der detaillierte Inhalt vonWas ist zustandsloses Schreiben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!