Exemples détaillés de l'application d'es6 dans React

Cet article présente principalement l'analyse du code d'application d'es6 dans React. Il est très bon et a une valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il pourra aider tout le monde à mieux comprendre et maîtriser l'application d'Es6 en réaction.

Qu'il s'agisse de React ou de React-native, Facebook recommande officiellement d'utiliser la syntaxe ES6. Si vous ne l'avez pas utilisé dans un projet, vous rencontrerez quelques problèmes si vous y passez soudainement si vous n'avez pas eu le temps. pour apprendre systématiquement ES6, puis Notez que certaines méthodes d'écriture courantes suffisent pour le moment, ce qui apportera une grande commodité à notre développement. Vous découvrirez la syntaxe extrêmement simple d'ES6. Laissez-moi vous présenter l'application d'es6 dans React. Le contenu spécifique est le suivant :

import React,{Component} from 'react';
class RepeatArrayextends Component{
 constructor() {  super();
 }
 render(){
  const names = ['Alice', 'Emily', 'Kate'];
  return (
   <p>
   {
    names.map((name) =>{return <p>Hello, {name}!</p>;} )
   }
   </p>
);
}
}
export default RepeatArray;

2. Implémentation de ol et li

import React,{Component} from 'react';
class RepeatLiextends Component{
 render(){
  return (
   <ol>
   {
    this.props.children.map((child)=>{return <li>{child}</li>})
   }
   </ol>
);
}
}
class RepeatArray extends Component{
constructor() {
super();
}
render(){
return (
<p>
<RepeatLi>
<span>hello</span>
    <span>world</span>
</RepeatLi>
   </p>
);
}
}
export default RepeatArray;

3. serveur

import React,{Component} from 'react';
class UserGistextends Component{
 constructor(){
  super();
  this.state={
   username:'',
   lastGistUrl:''
  }
 }
 componentWillMount(){
  $.get(this.props.source, function(result){
   var lastGist = result[0];
   //if (this.isMounted()) {
    this.setState({
     username: lastGist.owner.login,
     lastGistUrl: lastGist.html_url
    });
   //}
  }.bind(this));
 }
 render(){
  return(
   <p>
    {this.state.username} ..
    <a href={this.state.lastGistUrl} >here</a>
</p>
  );
 }
}
class RepeatArrayextends Component{
 constructor() {
  super();
 }
 render(){
  return (
   <p>
   <UserGist source="https://api.github.com/users/octocat/gists" />
   </p>
);
}
}
export default RepeatArray;

4. Initialisation STATE

class Videoextends React.Component{
  constructor(props){
    super(props);
    this.state = {
      loopsRemaining: this.props.maxLoops,
    };
  }
}

5. Opérateurs de déstructuration et d'expansion

Il est plus pratique de transmettre un lot d'attributs aux sous-composants. L'exemple suivant transmet tous les attributs sauf className à la balise p

class AutoloadingPostsGridextends React.Component{
  render() {
    var {
      className,
      ...others, // contains all properties of this.props except for className
    } = this.props;
    return (
      <p className={className}>
        <PostsGrid {...others} />
        <button onClick={this.handleLoadMoreClick}>Load more</button>
</p>
    );
  }
}

Le problème le plus courant lors du développement avec React est qu'il est gênant lorsque le composant parent a de nombreux attributs à transmettre au composant enfant

class MyComponentextends React.Component{
//假设MyComponent已经有了name和age属性
 render(){
  return (
   <SubComponent name={this.props.name} age={this.props.age}/>
   )
 }
}

L'utilisation de l'opérateur spread peut rendre les choses très simples

class MyComponentextends React.Component{
//假设MyComponent已经有了name和age属性
 render(){
  return (
   <SubComponent {...this.props}/>
   )
 }
}

La méthode ci-dessus consiste à transmettre toutes les propriétés du composant parent. Et si je n'ai pas besoin de transmettre certaines des propriétés. propriétés? C'est également très simple

class MyComponentextends React.Component{
//假设MyComponent有很多属性，而name属性不需要传递给子组件
 var {name,...MyProps}=this.props;
 render(){
  return (
   <SubComponent {...Myprops}/>
   )
 }
}

Le scénario le plus couramment utilisé pour la méthode ci-dessus est que l'attribut de classe du composant parent doit être extrait séparément en tant que classe d'un certain élément, et d'autres attributs doivent être transmis au composant enfant

6. Créer des composants

import React,{Component} from "react";
class MyComponentextends Component{
//组件内部代码
}

7. State/Props/PropTypes

es6 Autoriser les props et propTypes à être initialisés en dehors de la classe en tant que statiques. propriétés

class MyComponentextends React.Component{}
MyComponent.defaultProps={
 name:"SunnyChuan",
 age:22
};
MyComponent.propTypes={
 name:React.PropTypes.string.isRequired,
 age:React.PropTypes.number.isRequired
};

es7 Prend en charge l'utilisation d'expressions variables directement dans les classes

class MyComponentextends React.Component{
 static defaultProps={
  name:"SunnyChuan",
  age:22
 }
 static propTypes={
  name:React.PropTypes.string.isRequired,
  age:React.PropTypes.number.isRequired
 }
}

l'état est différent des deux premiers, il n'est pas statique

class MyComponentextends React.Component{
 static defaultProps={
  name:"SunnyChuan",
  age:22
 }
 state={
   isMarried:false
 }
 static propTypes={
  name:React.PropTypes.string.isRequired,
  age:React.PropTypes.number.isRequired
 }
}

7. Lorsque vous créez un conteneur universel, les attributs étendus seront très utiles

function App1(){
 return <GreetingfirstName="Ben"lastName="Hector"/>;
}
function App2() {
const props = {firstName: 'Ben', lastName: 'Hector'};
 return <Greeting {...props} />;
}

8. Utilisez les propriétés calculées es6 au lieu de

this.setState({
  [name]:value
})
//代替
var partialState = {};
partialState[name] = value;
this.setState(partialState);

Recommandations associées :

Explication détaillée de l'utilisation d'Echarts dans les composants React La posture correcte

Exemple détaillé de React transmettant le nom de la classe au composant enfant via le composant parent

Quelles sont les façons d'écrire des composants dans 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!