Detailed examples of the application of es6 in react

This article mainly introduces the application code analysis of es6 in react. It is very good and has reference value. Friends in need can refer to it. I hope it can help everyone better understand and master the application of es6 in react.

Whether it is React or React-native, Facebook officially recommends using ES6 syntax. If you have not used it in a project, you will encounter some problems if you suddenly switch to it. If you have not had time to systematically learn ES6, then Note that some common writing methods are enough for the time being, which will bring great convenience to our development. You will experience the extremely simple syntax of ES6. Let me introduce to you the application of es6 in react. The specific content is as follows:

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. Implementation of ol and 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. Obtaining data from the server

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. Initialization STATE

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

5. Destructuring and expansion operators

It is more convenient to pass a batch of attributes to sub-components. The following example passes all attributes except className to the p tag

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

The most common problem when using react development is that it is troublesome when the parent component wants to pass many attributes to the child component

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

Use extensions The operator can be very simple

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

The above method is to pass all the properties of the parent component. What if I don’t need to pass some of the properties? It’s also very simple

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

The most commonly used scenario for the above method is that the class attribute of the parent component needs to be extracted separately as the class of a certain element, and other attributes need to be passed to the child component

6. Create components

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

7. State/Props/PropTypes

es6 allows props and propTypes to be initialized outside the class as static properties

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

es7 supports direct use in the class Variable expression

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

state is different from the first two, it is not static

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. When you build a general container, extended attributes will be very useful

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

8 , Use the calculated properties of es6 instead

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

Related recommendations:

Detailed explanation of the correct posture of using Echarts in React components

Detailed example of React passing the class name to the child component through the parent component

What are the ways to write components in React

The above is the detailed content of Detailed examples of the application of es6 in react. For more information, please follow other related articles on the PHP Chinese website!