Qu’est-ce que l’écriture sans état de réaction ?

React stateless s'écrit "{props.xxx}". Son composant sans état est principalement utilisé pour définir des modèles, recevoir les données transmises par les accessoires du composant parent et utiliser l'expression de "{props.xxx}" pour remplir les accessoires. dans le modèle.

L'environnement d'exploitation de cet article : système Windows7, React17.0.1, Dell G3.

Quelle est la façon d'écrire apatride en réaction ?

La méthode d'écriture et la différence entre les composants sans état et les composants avec état dans React

Les composants dans React sont principalement divisés en deux catégories : les composants sans état et les composants avec état.

1. Les composants sans état sont principalement utilisés pour définir des modèles, recevoir les données transmises par les accessoires du composant parent et utiliser l'expression {props.xxx} pour insérer les accessoires dans le modèle. Les composants sans état doivent conserver le modèle pur pour faciliter la réutilisation des composants. Créez des composants sans état comme suit :

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

2. Les composants avec état sont principalement utilisés pour définir la logique d'interaction et les données métier (si Redux est utilisé, les données métier peuvent être extraites et gérées de manière uniforme), utilisez {this.state.xxx} L'expression monte les données métier sur l'instance du composant conteneur (les composants avec état peuvent également être appelés composants de conteneur, et les composants sans état peuvent également être appelés composants d'affichage), puis transmet les accessoires au composant d'affichage. Le composant d'affichage reçoit les accessoires et les remplit. accessoires à l’intérieur du modèle. Créez un composant avec état comme suit :

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

C'est la manière officielle d'écrire par défaut dans le constructeur, un paramètre doit être passé par défaut et la méthode super() doit être appelée pour obtenir une instance de la sous-classe. Mais ce qui est plus déroutant, c'est pourquoi ces paramètres doivent être transmis, et à quoi sert de transmettre ces paramètres ?

Parce que du point de vue du composant dans render(), le constructeur peut obtenir l'attribut props sur l'instance du composant sans passer de paramètres. Comme suit :

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}依然获取到了值
        );
    };
};

C'est plus facile à comprendre, car la méthode render() est une méthode sur le prototype du sous-composant, il faut y accéder via ceci. Si celle-ci est supprimée, elle ne peut pas être obtenue.

Ensuite, la question se pose : et si nous voulons accéder aux accessoires dans le constructeur ? À ce stade, nous devons passer un paramètre props dans le constructeur constructor afin de pouvoir accéder à l'attribut props sur l'instance du sous-composant. Comme suit :

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

Il y a une autre question, pourquoi devons-nous passer un attribut props dans la méthode super(props) ? Regardez l'exemple suivant :

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>
        );
    };
};

En fait, les valeurs​​de props.name et this.props.name sont les mêmes, mais elles sont toujours différentes. Les props dans props.name sont les attributs props du. sous-composant, mais ceci. Les accessoires dans props.name ne sont pas les accessoires d'attribut du sous-composant, bien que les valeurs soient les mêmes, ces accessoires sont en fait transmis à la classe parent Component lorsque la super méthode est appelée, donc ceci. .props.name obtient est l'attribut props dans la classe parent Component. Jetez un œil au code source de React :

Avez-vous constaté que la super méthode de la sous-classe transmet les paramètres des accessoires au composant de classe parent et que le composant monte les paramètres des accessoires sur ses accessoires d'attribut d'instance. Par conséquent, vous ne pouvez utiliser ceci, props.xxx dans le constructeur qu'en passant le paramètre props à la super méthode. Si le paramètre props n'est pas transmis dans la super méthode, une erreur sera signalée lors de l'obtention de la valeur de this.props. nom. Obtenez this.props et affichez-le sans différence : comme suit :

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>
        );
    };
};

L'essence de cette méthode d'écriture est d'attribuer les accessoires d'attribut d'instance du sous-composant Header aux attributs d'instance state.nameOne et state.nameTwo du sous-composant. En-tête du composant. En termes simples, il s'agit du sous-assemblage En-tête. Le composant crée un attribut d'état, puis attribue son propre attribut props à son propre attribut d'état.

Pourquoi this.props affiche-t-il undefined ? Étant donné que les props sont des paramètres transmis lors de l'appel du sous-composant, les props ne sont pas accessibles à l'intérieur du constructeur, donc pour this.props.name, il ne fait aucun doute qu'une erreur sera signalée.

Donc, pour les paramètres props dans le constructeur et les paramètres props dans super, si vous n'utilisez pas this.props et props dans le constructeur, vous n'avez pas du tout besoin de transmettre de paramètres. Sinon, transmettez la référence. Mais les valeurs obtenues sont les mêmes pour this.props et props, vous pouvez donc écrire l'une ou l'autre. Cependant, les deux paramètres sont écrits dans la documentation officielle. Alors par souci de rigueur, notons-les tous.

Cependant, personnellement, j’aime toujours cette façon d’écrire.

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

Celui sans ceci est la valeur, et celui avec ceci est la clé.

Les composants de React sont principalement divisés en deux catégories : les composants sans état et les composants avec état.

1. Les composants sans état sont principalement utilisés pour définir des modèles, recevoir les données transmises par les accessoires du composant parent et utiliser l'expression {props.xxx} pour insérer les accessoires dans le modèle. Les composants sans état doivent conserver le modèle pur pour faciliter la réutilisation des composants. Créez des composants sans état comme suit :

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

2. Les composants avec état sont principalement utilisés pour définir la logique d'interaction et les données métier (si Redux est utilisé, les données métier peuvent être extraites et gérées de manière uniforme), utilisez {this.state.xxx} L'expression monte les données métier sur l'instance du composant conteneur (les composants avec état peuvent également être appelés composants de conteneur, et les composants sans état peuvent également être appelés composants d'affichage), puis transmet les accessoires au composant d'affichage. Le composant d'affichage reçoit les accessoires et les remplit. accessoires à l’intérieur du modèle. Créez un composant avec état comme suit :

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

C'est la manière officielle d'écrire par défaut dans le constructeur, un paramètre doit être passé par défaut et la méthode super() doit être appelée pour obtenir une instance de la sous-classe. Mais ce qui est plus déroutant, c'est pourquoi ces paramètres doivent être transmis, et à quoi sert de transmettre ces paramètres ?

Parce que du point de vue du composant dans render(), le constructeur peut obtenir l'attribut props sur l'instance du composant sans passer de paramètres. Comme suit :

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}依然获取到了值
        );
    };
};

C'est plus facile à comprendre, car la méthode render() est une méthode sur le prototype du sous-composant, il faut y accéder via ceci. Si celle-ci est supprimée, elle ne peut pas être obtenue.

Ensuite, la question se pose : et si nous voulons accéder aux accessoires dans le constructeur ? À ce stade, nous devons passer un paramètre props dans le constructeur constructor afin de pouvoir accéder à l'attribut props sur l'instance du sous-composant. Comme suit :

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

Il y a une autre question, pourquoi devons-nous passer un attribut props dans la méthode super(props) ? Regardez l'exemple suivant :

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>
        );
    };
};

En fait, les valeurs​​de props.name et this.props.name sont les mêmes, mais elles sont toujours différentes. Les props dans props.name sont les attributs props du. sous-composant, mais ceci. Les accessoires dans props.name ne sont pas les accessoires d'attribut du sous-composant, bien que les valeurs soient les mêmes, ces accessoires sont en fait transmis à la classe parent Component lorsque la super méthode est appelée, donc ceci. .props.name obtient est l'attribut props dans la classe parent Component. Jetez un œil au code source de React :

Avez-vous constaté que la super méthode de la sous-classe transmet les paramètres des accessoires au composant de classe parent et que le composant monte les paramètres des accessoires sur ses accessoires d'attribut d'instance. Par conséquent, vous ne pouvez utiliser ceci, props.xxx dans le constructeur qu'en passant le paramètre props à la super méthode. Si le paramètre props n'est pas transmis dans la super méthode, une erreur sera signalée lors de l'obtention de la valeur de this.props. nom. Obtenez this.props et affichez-le sans différence : comme suit :

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>
        );
    };
};

L'essence de cette méthode d'écriture est d'attribuer les accessoires d'attribut d'instance du sous-composant Header aux attributs d'instance state.nameOne et state.nameTwo du sous-composant. En-tête du composant. En termes simples, il s'agit du sous-assemblage En-tête. Le composant crée un attribut d'état, puis attribue son propre attribut props à son propre attribut d'état.

Pourquoi this.props affiche-t-il undefined ? Étant donné que les props sont des paramètres transmis lors de l'appel du sous-composant, les props ne sont pas accessibles à l'intérieur du constructeur, donc pour this.props.name, il ne fait aucun doute qu'une erreur sera signalée.

Donc, pour les paramètres props dans le constructeur et les paramètres props dans super, si vous n'utilisez pas this.props et props dans le constructeur, vous n'avez pas du tout besoin de transmettre de paramètres. Sinon, transmettez la référence. Mais les valeurs obtenues sont les mêmes pour this.props et props, vous pouvez donc écrire l'une ou l'autre. Cependant, les deux paramètres sont écrits dans la documentation officielle. Alors par souci de rigueur, notons-les tous.

Cependant, personnellement, j’aime toujours cette façon d’écrire.

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

Celui sans ceci est la valeur, et celui avec ceci est la clé.

Apprentissage recommandé : "

Tutoriel vidéo React

"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!