Maison > Article > interface Web > Premiers pas avec React : Comment créer des composants dans React

Premiers pas avec React : Comment créer des composants dans React

不言original: 2018-08-22 17:41:501463parcourir

Créer un composant

Avant de créer un composant, veuillez faire attention aux points suivants :

La première lettre du nom du composant doit être en majuscule
Le JSX renvoyé dans le composant ne peut être qu'un nœud racine, et tout le contenu doit être encadré par un élément

1.

Aucun Les composants fonctionnels avec état ne peuvent comprendre que les réalisations sont générées par une fonction, ce qui rend le code plus lisible, rationalisé, pratique et réduit la redondance. Les composants sans état ont les caractéristiques suivantes :

Le composant ne peut pas être instancié, et le rendu global est amélioré
Le composant ne peut pas accéder à cet objet car il n'est pas instancié, il ne peut donc pas accéder à cet objet
Les composants n'ont pas de cycle de vie
Les composants sans état ne peuvent accéder qu'aux accessoires d'entrée et n'ont aucun état

import React from 'react'
import { connect } from 'dva';

 function CreateComponent(props) {
   console.log(props);
   return (
     <p>
        <span>{props.name}今年{props.age}岁</span>
     </p>
   )
 }

export default connect(state => ({
  name:'小明',
  age:15
}))(CreateComponent);

2.Composant de classe React.Component

Chaque classe de composant doit implémenter une méthode de rendu. Portez une attention particulière ici. Cette méthode de rendu doit renvoyer un élément JSX, c'est-à-dire envelopper tout le contenu avec un élément le plus externe. Il est illégal de renvoyer plusieurs éléments JSX côte à côte, comme indiqué ci-dessous :

import React from 'react'

class CreateComponent extends React.Component {
     render() {
       return(
         <p>
           <h2>标题</h2>
            <ul>
              <li>首先</li>
              <li>其次</li>
              <li>最后</li>
            </ul>
         </p>
       )
     }
}

export default CreateComponent;

L'exemple ci-dessus consiste à envelopper l'élément h2 et ul avec un p

Événements de composant Listening

Ce qui précède sont des exemples de surveillance d'événements et de passage de paramètres

import React from 'react'

class CreateComponent extends React.Component {

   clickFunc = (e) => {
     console.log("监听:",e.target.innerHTML);
   }

   clickValue = (value) => {
     console.log(value);
   }
    render() {
      return (
       <p>
         <a onClick={this.clickFunc}>监听事件</a>
         <br/>
         <a onClick={this.clickValue.bind(this,123)}>this对象</a>
      </p>
      )
    }

}

export default CreateComponent;

2 L'état et setState du composant

sont généralement dans le composant, et l'état est utilisé pour. placer à l'intérieur du composant L'état des paramètres, et setState est utilisé pour modifier les paramètres dans l'état, par exemple :

3 Les accessoires du composant

import React from 'react'

class CreateComponent extends React.Component {
  state = {
    flag : true
  }
   clickValue = () => {
     this.setState({
       flag: !this.state.flag
     })
   }
    render() {
      return (
       <p>
         <span>flag的值为：{this.state.flag ? '真' : '假'}</span>
         <br/>
         <button onClick={this.clickValue}>改变flag值</button>
      </p>
      )
    }

}

export default CreateComponent;

les accessoires sont des propriétés. dans le composant et ne peut pas être utilisé à l'intérieur du composant. Modifiez vos propres accessoires, par exemple, créez un composant, puis appelez ce composant dans un autre composant, comme suit :

Créez un composant NewComponent, et puis appelez-le comme suit :

import React from 'react';

function NewComponent(props) {
  return (
    <p>
       {props.content}
    </p>
  );
}


export default NewComponent;

Comme vous pouvez le voir ici, les props sont les valeurs d'attribut apportées par le composant. Les props permettent en fait aux composants externes de se configurer eux-mêmes, tandis que l'état est l'état dans. que le composant contrôle lui-même.

import React from 'react'
import NewComponent from './newComponent.js'

class CreateComponent extends React.Component {
    render() {
      return (
       <p>
         <NewComponent content={&#39;我是内容&#39;} />
      </p>
      )
    }

}

export default CreateComponent;

4. Le cycle de vie du composant

Initialisation du composant constructeur :

le constructeur initialise certaines propriétés des paramètres, etc.

Avant le rendu du composant ComponentWillMount :

La fonction ComponentWillMount a été progressivement obsolète après React16.3.0. Utilisez plutôt ComponentDidMount. rendu :

componentDidMount est exécuté après le rendu du composant. Les données peuvent être chargées

rendu du composant de rendu :

page d'affichage du rendu du composant de rendu

componentDidMount est exécuté après le rendu du composant. 🎜>

Résultat de sortie :

import React from 'react'

class CreateComponent extends React.Component {
  constructor () {
    super()
    console.log('construct:页面初始化')
  }

  componentWillMount () {
    console.log('componentWillMount：页面将要渲染')
  }

  componentDidMount () {
    console.log('componentDidMount：页面渲染结束')
  }


    render() {
      console.log('render：页面渲染');
      return (
       <p>
         页面渲染
      </p>


      )
    }

}

export default CreateComponent;

suppression du composantcomponentWillUnmount

construct:页面初始化
componentWillMount：页面将要渲染
render：页面渲染
componentDidMount：页面渲染结束

La fonction composantWillUnmount est une fonction qui est exécutée avant que le composant ne soit supprimé. Le code suivant :

Créez un composant NewComponent, puis dans le composant CreateComponent Introduisez ce composant comme suit :

import React from 'react';

class NewComponent extends React.Component {
  componentWillUnmount() {
    console.log('componentWillUnmount:将要从页面中删除');
  }

  render() {
    return (
      <p>
         {this.props.content}
      </p>
    );
  }

}

export default NewComponent;

Lorsque l'on clique sur le bouton Supprimer, le composant NewComponent sera supprimé et la fonction composantWillUnmount sera exécutée avant la suppression

import React from 'react'
import NewComponent from "./newComponent.js";

class CreateComponent extends React.Component {
  constructor () {
    super()
    console.log('construct:页面初始化');
    this.state = {
      content:'测试组件',
      isDelete:false
    }
  }

  componentWillMount () {
    console.log('componentWillMount：页面将要渲染')
  }

  componentDidMount () {
    console.log('componentDidMount：页面渲染结束')
  }

  deleteFunc = () => {
    this.setState({
      isDelete:true
    })
  }


    render() {
      console.log('render：页面渲染');
      return (
       <p>
         页面渲染
         <input type="button" value=&#39;删除&#39; onClick={this.deleteFunc}/>
         {!this.state.isDelete?(
          <NewComponent content={this.state.content}/>
         ):(null)}

      </p>


      )
    }

}

export default CreateComponent;

Résultat de sortie :

Les cycles de vie ci-dessus sont les cycles de vie des composants que nous utilisons souvent. a également le cycle de vie de la phase de mise à jour. Cependant, ceux-ci sont moins couramment utilisés. Voici une brève introduction :

construct:页面初始化
componentWillMount：页面将要渲染
render：页面渲染
componentDidMount：页面渲染结束
componentWillUnmount:将要从页面中删除

ShouldComponentUpdate(nextProps, nextState)

Utilisez ceci. méthode pour contrôler si le composant est restitué. Si false est renvoyé, il ne sera pas restitué, comme suit

À ce stade, cliquez sur le bouton Supprimer et la page ne sera pas rendue. est dû au fait que la valeur de retour est définie sur false dans ShouldComponentUpdate. Lorsque la valeur de retour est false, la page ne peut pas être restituée. Le premier paramètre de cette fonction représente les derniers accessoires et le deuxième paramètre représente le dernier état

import React from 'react'
import NewComponent from "./newComponent.js";

class CreateComponent extends React.Component {
  constructor () {
    super()
    console.log('construct:页面初始化');
    this.state = {
      content:'测试组件',
      isDelete:false
    }
  }

  componentWillMount () {
    console.log('componentWillMount：页面将要渲染')
  }

  componentDidMount () {
    console.log('componentDidMount：页面渲染结束')
  }

  shouldComponentUpdate(nextProps, nextState){
    if(nextState.isDelete){
      return false;
    }

  }

  deleteFunc = () => {
    this.setState({
      isDelete:true
    })
  }


    render() {
      console.log('render：页面渲染');
      return (
       <p>
         页面渲染
         <input type="button" value=&#39;删除&#39; onClick={this.deleteFunc}/>
         {!this.state.isDelete?(
          <NewComponent content={this.state.content}/>
         ):(null)}

      </p>


      )
    }

}

export default CreateComponent;

componentWillReceiveProps(nextProps)

Le composant reçoit de nouveaux accessoires du composant parent Avant l'appel, le paramètre de fonction nextProps représente les données reçues

dans le composant NewComponent :

dans le composant CreateComponent :

import React from 'react';

class NewComponent extends React.Component {
  componentWillUnmount() {
    console.log('componentWillUnmount:将要从页面中删除');
  }

  componentWillReceiveProps(nextProps){
    console.log(nextProps);
  }

  render() {
    return (
      <p>
         {this.props.content}
      </p>
    );
  }

}

export default NewComponent;

Cependant, componentWillReceiveProps sera in Obsolète après le début de réagir16.3.0

import React from 'react'
import NewComponent from "./newComponent.js";

class CreateComponent extends React.Component {
  constructor () {
    super()
    console.log('construct:页面初始化');
    this.state = {
      content:'测试组件',
      isDelete:false
    }
  }

  componentWillMount () {
    console.log('componentWillMount：页面将要渲染')
  }

  componentDidMount () {
    console.log('componentDidMount：页面渲染结束')
  }

  changeFunc = () => {
    this.setState({
      content:'文字修改'
    })
  }


    render() {
      console.log('render：页面渲染');
      return (
       <p>
         页面渲染
         <input type="button" value=&#39;修改content&#39; onClick={this.changeFunc}/>
         {!this.state.isDelete?(
          <NewComponent content={this.state.content}/>
         ):(null)}

      </p>


      )
    }

}

export default CreateComponent;

componentWillUpdate :

Cette méthode est appelée avant le rendu du composant et sera obsolète après le début de réagir16. 3.0

componentDidUpdate :

Le composant restitue et modifie les modifications apportées au DOM réel, puis appelle

Remarque :

composantWillUpdate, composantWillReceiveProps, composantWillMount ont trois vies Le cycle sera obsolète après réagir116.3.0

Recommandations associées :

Analyse des instances du cycle de vie des composants React

Explication détaillée du composant React Dragact 0.1.4

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Combien de méthodes de boucle y a-t-il dans js ? Introduction à sept méthodes de boucle en js (avec code)Article suivant：Combien de méthodes de boucle y a-t-il dans js ? Introduction à sept méthodes de boucle en js (avec code)

Articles Liés

Voir plus