Detaillierte Beispiele für die Anwendung von es6 in React

Dieser Artikel stellt hauptsächlich die Anwendungscode-Analyse von es6 in React vor. Er ist sehr gut und hat Referenzwert. Ich hoffe, er kann jedem helfen, die Anwendung von es6 in React besser zu verstehen.

Facebook empfiehlt offiziell die Verwendung der ES6-Syntax, wenn Sie plötzlich dazu wechseln Um ES6 systematisch zu lernen, beachten Sie, dass einige gängige Schreibmethoden vorerst ausreichen, was unserer Entwicklung große Erleichterung bringt. Sie werden die äußerst einfache Syntax von ES6 erleben. Lassen Sie mich Ihnen die Anwendung von es6 in React vorstellen:

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. Erhalten von Daten aus dem Server

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;

4. Initialisierungsstatus

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;

5. Destrukturierungs- und Erweiterungsoperatoren

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

Es ist bequemer, einen Stapel von Attributen an Unterkomponenten zu übergeben. Das folgende Beispiel übergibt alle Attribute außer className an das p-Tag

Das häufigste Problem bei der Entwicklung mit React besteht darin, dass es problematisch ist, wenn die übergeordnete Komponente viele Attribute hat, die an die untergeordnete Komponente übergeben werden müssen

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

Die Verwendung des Spread-Operators kann es sehr einfach machen

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

Die obige Methode besteht darin, alle Eigenschaften der übergeordneten Komponente zu übergeben. Was ist, wenn ich einige davon nicht übergeben muss? Eigenschaften? Es ist auch sehr einfach

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

Das am häufigsten verwendete Szenario für die obige Methode besteht darin, dass das Klassenattribut der übergeordneten Komponente separat als Klasse eines bestimmten Elements extrahiert werden muss und andere Attribute ebenfalls extrahiert werden müssen an die untergeordnete Komponente übergeben

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

6. Komponenten erstellen

7. State/Props/PropTypes

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

es6 Ermöglicht die Initialisierung von Props und PropTypes außerhalb der Klasse als statisch Eigenschaften

es7 Unterstützt die Verwendung von Variablenausdrücken direkt in Klassen

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

Zustand unterscheidet sich von den ersten beiden, er ist nicht statisch

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

7. Wenn Sie einen universellen Container erstellen, sind erweiterte Attribute sehr nützlich

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

8. Verwenden Sie es6-berechnete Eigenschaften anstelle von

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

Verwandte Empfehlungen:

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

Detaillierte Erklärung der Verwendung von Echarts in React-Komponenten. Die richtige Haltung

Detailliertes Beispiel für die Übergabe des Klassennamens an die untergeordnete Komponente durch React über die übergeordnete Komponente

Wie kann man Komponenten in React schreiben?

Das obige ist der detaillierte Inhalt vonDetaillierte Beispiele für die Anwendung von es6 in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!