Quelles sont les différences entre l'état et les accessoires en réaction ?

Différence : les accessoires sont passés au composant (similaire aux paramètres formels d'une fonction), tandis que l'état est géré à l'intérieur du composant par le composant lui-même (similaire à une variable déclarée dans une fonction). L'état est la gestion des données du composant et le contrôle de son propre état, qui est variable ; les accessoires sont les paramètres de données transmis de l'extérieur et sont immuables.

L'environnement d'exploitation de ce tutoriel : système Windows 7, version React18, ordinateur Dell G3.

Recommandations associées : "Tutoriel vidéo React"

accessoires

L'idée centrale de ​​React est Avec l'idée de composantisation, la page sera divisée en composants indépendants et réutilisables. Le composant

est conceptuellement une fonction qui peut accepter un paramètre comme valeur d'entrée. Ce paramètre est props, donc props peut être compris comme des données transmises au composant depuis l'extérieur. Puisque React est un flux de données unidirectionnel, props correspond essentiellement aux données transmises du composant parent au composant enfant.

Utilisation

Supposons que nous devions maintenant implémenter une liste. Selon l'idée de composantisation de React, nous pouvons traiter les lignes de la liste comme un composant, c'est-à-dire il y a deux composants : <ItemList/> et <Item/>.

Examinons d'abord les données de la liste <ItemList/>

import Item from "./item";
export default class ItemList extends React.Component{
  const itemList = data.map(item => <Item item=item />);
  render(){
    return (
      {itemList}
    )
  }
}

Supposons temporairement qu'elles sont placées dans une variable data, puis renvoyons une valeur pour chaque élément via le. Fonction map. Tableau de <Item item=&#39;数据&#39;/>, c'est-à-dire qu'il contient en fait des composants data.length <Item/>, et les données sont transmises en personnalisant un paramètre sur le composant. Bien entendu, vous pouvez transmettre ici autant de paramètres personnalisés que vous le souhaitez.

dans <Item /> est comme ceci :

export default class Item extends React.Component{
  render(){
    return (
      <li>{this.props.item}</li>
    )
  }
}

Comme vous pouvez le voir dans la fonction render, le composant utilise this.props en interne pour obtenir toutes les données transmises au composant. est un objet qui contient toutes vos configurations pour ce composant. Désormais, il ne contient qu'un seul attribut item, vous pouvez donc l'obtenir via this.props.item.

Lecture seule

props est souvent utilisé comme composant de rendu et état d'initialisation Lorsqu'un composant est instancié, son props est en lecture seule, immuable. Si props peut être modifié pendant le processus de rendu, la forme d'affichage de ce composant deviendra imprévisible. Le nouveau props ne peut être transmis au composant qu'en restituant le composant parent.

Paramètres par défaut

Dans le composant, nous ferions mieux de définir un props pour le paramètre dans defaultProps et de spécifier son type. Par exemple, ceci :

Item.defaultProps = {
  item: 'Hello Props',
};

Item.propTypes = {
  item: PropTypes.string,
};

Concernant propTypes, il peut être déclaré comme les types suivants :

optionalArray: PropTypes.array,
optionalBool: PropTypes.bool,
optionalFunc: PropTypes.func,
optionalNumber: PropTypes.number,
optionalObject: PropTypes.object,
optionalString: PropTypes.string,
optionalSymbol: PropTypes.symbol,

Résumé

props est a from La fonction principale des paramètres externes transmis au composant est de transmettre les données du composant parent au composant enfant. Il est lisible et immuable. Le nouveau props ne peut être activement transmis que via le composant externe pour être re-. rendre le composant enfant. Sinon, le composant enfant peut être restitué. Le props et le formulaire de présentation ne changeront pas.

état

stateQu'est-ce que c'est ?

State is similar to props, but it is private and fully controlled by the component.

La forme d'affichage d'un composant peut être déterminée par l'état des données et les paramètres externes. Les paramètres externes sont props et l'état des données est state

Utilisation.

export default class ItemList extends React.Component{
  constructor(){
    super();
    this.state = {
      itemList:'一些数据',
    }
  }
  render(){
    return (
      {this.state.itemList}
    )
  }
}

Tout d'abord, lorsque le composant est initialisé, définissez un this.state initial sur le composant via state Ces données seront utilisées pour restituer le composant la première fois que render est utilisé.

setState

stateLa différence entre props et state est que this.state= peut être modifié. Cependant, il ne peut pas être modifié directement via la méthode this.setState(), mais doit être modifié via la méthode state.

Par exemple, nous obtenons souvent des données via des opérations asynchrones. Nous devons effectuer des opérations asynchrones dans l'étape didMount :

componentDidMount(){
  fetch('url')
    .then(response => response.json())
    .then((data) => {
      this.setState({itemList:item});  
    }
}

Lorsque l'acquisition des données est terminée, modifiez les données via <🎜. > état. this.setState

Lorsque nous appelons la méthode

, React mettra à jour l'état des données du composant this.setState et rappellera la méthode state, ce qui signifie que le composant sera restitué. render

Remarque : utilisez pour initialiser this.state=, utilisez state pour modifier this.setState, state est le seul endroit qui peut être initialisé. constructor

accepte un objet ou une fonction comme premier paramètre. Vous n'avez besoin de transmettre que la partie qui doit être mise à jour. Il n'est pas nécessaire de transmettre l'objet entier, comme : setState

export default class ItemList extends React.Component{
  constructor(){
    super();
    this.state = {
      name:'axuebin',
      age:25,
    }
  }
  componentDidMount(){
    this.setState({age:18})  
  }
}

在执行完setState之后的state应该是{name:'axuebin',age:18}。

setState还可以接受第二个参数，它是一个函数，会在setState调用完成并且组件开始重新渲染时被调用，可以用来监听渲染是否完成：

this.setState({
  name:'xb'
},()=>console.log('setState finished'))

总结

state的主要作用是用于组件保存、控制以及修改自己的状态，它只能在constructor中初始化，它算是组件的私有属性，不可通过外部访问和修改，只能通过组件内部的this.setState来修改，修改state属性会导致组件的重新渲染。

区别

• props是传递给组件的（类似于函数的形参），而state是在组件内部被组件自己管理的（类似于在一个函数内声明的变量）
  

• state是组件自己管理数据，控制自己的状态，可变；props是外部传入的数据参数，不可变；

• 没有state的叫做无状态组件，有state的叫做有状态组件；

• 多用props，少用state。也就是多写无状态组件。

更多编程相关知识，请访问：编程教学！！

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!