Comment écrire des composants React ? (code)

Le contenu de cet article explique comment écrire des composants React ? (code), il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Comment écrire un composant React

Dans le monde React, class est généralement utilisé pour déclarer un composant, qui doit hériter de React.Component.
Par exemple, le code suivant :

// MyFirstComponent.jsx
class MyFirstComponent extends React.Component {
  state = {
    text: "Hello React"
  };

  /** 组件生命周期钩子函数：在组件挂载完成后立即被调用 */
  componentDidMount() {
    alert("组件挂载完成！");
  }

  render() {
    return (
      <p>{this.state.text}, I am {this.props.author}!</p>
    )
  }
}

export default MyFirstComponent;

// index.js
import MyFirstComponent from "MyFirstComponent";

/** 渲染结果：<p>Hello React, I am Shaye!</p> */
ReactDOM.render(<MyFirstComponent author="Shaye"></MyFirstComponent>, document.getElementById("app"));

Ce qui précède est une manière conventionnelle d'écrire des composants React, mais on peut aussi trouver plusieurs choses intéressantes en observant le code ci-dessus :

Il y a une fonction

dans

1. MyFirstComponentcomponentDidMount qui est une fonction de hook du cycle de vie des composants. En fait, React a conçu une série de fonctions de hook de cycle de vie pour les composants

2. MyFirstComponent Il contient une fonction spéciale render(). Cette fonction convertit le contenu du modèle similaire à <.>html comme valeur de retour. C'est une fonction qui doit être définie, sinon jsx générera une erreur React

3. À première vue, cela ressemble à un moteur de modèle, mais c'est en fait un jsx Extension de syntaxe, son concept de base est le fameux JavaScript, qui est entièrement implémenté à l'intérieur de all in js. Comme le moteur de modèle traditionnel, il peut également lier des expressions JavaScript js

   <.>
peut clairement être vu comme provenant de deux objets :
4. et

   ; jsx est l'état du composant personnalisé interne de this.state est externe Les données transmises dans this.props sont ; transmis sous forme d'attributs de balises, similaires aux paramètres de fonction this.stateMyFirstComponentthis.propsMyFirstComponentEn résumé, lorsque vous maîtrisez le

   cycle de vie des composants

JSX

État d'état du composant Accessoires d'attribut de composant Vous saurez comment écrire des composants React. Cycle de vie des composants

Le document officiel a une introduction très détaillée, je n'entrerai donc pas dans les détails ici. Veuillez cliquer ici pour consulter le document officiel du. cycle de vie des composants.

JSX

Vous pouvez utiliser expressions arbitrairement à l'intérieur de , et les expressions à l'intérieur de

doivent être placées entre accolades.

Par exemple, le code suivant : Les éléments React dans JSXjavaScriptJSX
, tels que

, seront éventuellement traduits par le compilateur et traités par certaines fonctions spécifiques en un . Par exemple, l'élément

<p className={this.state.clname} style={{ fontSize: "20px" }}>{this.state.content} forever</p>

mentionné ci-dessus deviendra à terme le suivant

 : JSXpjavascript objectReact fonctionne p en lisant ces objets et en gardant le contenu des données cohérent. Donc, en fait, vous écrivez toujours object. Par conséquent,

et

// 注意: 以下示例是简化过的（不代表在 React 源码中是这样）
const pElement = {
  type: "p",
  props: {
    // this.state.clname的值
    className: "love",
    style: {
      fontSize: "20px"
    },
    // "you"为this.state.content的值
    children: ["you", "forever"]
  }
}

doivent être écrits de la même manière que

Par exemple : DOM => js En particulier, les attributs des éléments React peuvent toujours être cités comme natifs class pour. définir des attributs avec des valeurs de chaîne, par exemple : stylejs
En plus de ce qui précède, les class Il existe également des différences grammaticales entre la liaison d'événement et le className natif :
font-size: 20px; { fontSize: "20px" }

Les noms des événements de React sont écrits en casse chameau au lieu de minuscules.

htmlclassName="my-claname"

La liaison d'événement React doit être un objet fonction, pas une chaîne.

JSXhtml

Exemple de code :

• État du composant

• est privé et entièrement contrôlé par le composant actuel . Puisqu'il s'agit d'un statut, il faudra le mettre à jour. Comment le mettre à jour ?
Exemple de code :

<p onClick={this.handleClick}>我是一个按钮</p>

// 也可以向事件回调函数传递参数
<p onClick={(params) => this.handleClick(params)}>我是一个按钮</p>

est le seul moyen de mettre à jour dynamiquement les composants dans React. Lorsqu'il est appelé, le propre composant et tous ses sous-composants déclencheront un nouveau renduPlus précisément,

peut également être transmis aux sous-composants en tant que propriétés Documentation détaillée

stateLes accessoires d'attribut de composant

// 对`this.state`或者它的属性直接`=`赋值，将永远不会触发组件渲染，必须使用`setState()`

// 在组件的生命周期钩子函数中调用this.setState()
componentDidMount() {
  this.setState({
    content: "lalalala"
  })
}

// 在组件的自定义函数中调用this.setState()
handleClick = () => {
  this.setState({
    content: "uauauaua"
  })
}

sont les données ; transmis depuis le composant parent est généralement setState() depuis le composant parent ou d'autres variables membres du composant. De plus,
state est en lecture seule et les composants ne peuvent jamais modifier le leur
setState(). Ce n'est qu'après l'appel du composant parent

que les propriétés du composant enfant peuvent être modifiées et restituées.

ne peut être téléchargé que de haut en bas, et les composants ne peuvent modifier que leur propre privé, ce qui signifie que le flux de données de l'ensemble de l'application ne peut être qu'un

flux de données unidirectionnel provenant de de haut en bas

propsstateRésumépropsprops

Cycle de vie des composants JSX État de l'état du composant Accessoires d'attribut du composant Plus un ordre descendant vers le flux de données , ce sont les fonctionnalités les plus basiques des composants React !

Recommandations associées :

Comment utiliser les composants d'ordre supérieur de React

Comment l'utiliser dans les composants 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!