Preface
I believe that many beginners of React are confused by the ES6 problem: all the masters suggest that we directly learn the ES6 grammar (class Foo extends). However, many tutorials and examples found on the Internet are ES5 versions, so many people don’t even know how to do it when they are learning. So this article has compiled some writing comparison tables for ES5 and ES6. I hope that when you read the ES5 code in the future, you can also realize the same functions under ES6 through comparison. I won’t say much below, let’s take a look at the detailed introduction.
Module
Quote
In ES5, if you use the CommonJS standard, the React package is basically carried out through require, and the code is similar to this:
//ES5
var React = require("react");
var {
Component,
PropTypes
} = React; //Reference React abstract component
var ReactNative = require("react-native");
var {
Image,
Text,
} = ReactNative; //Quote specificReact NativeComponents
In ES6, import writing is more standard
//ES6
import React, {
Component,
PropTypes,
} from 'react';
import {
Image,
Text
} from 'react-native'
Export a single class
In ES5, you need to export a class for other modules, usually throughTo export
//ES5
var MyComponent = ({
...
});
= MyComponent;
In ES6, usuallyexport defaultTo achieve the same function:
//ES6
export default class MyComponent extends Component{
...
}
Quote is similar:
//ES5
var MyComponent = require('./MyComponent');
//ES6
import MyComponent from './MyComponent';
Notice:The writing methods of import and export must be matched and cannot be mixed!
Define components
In ES5, usuallyTo define a component class, like this:
//ES5
var Photo = ({
render: function() {
return (
<Image source={} />
);
},
});
In ES6, we define an inheritance fromclass to define a component class, like this:
//ES6
class Photo extends {
render() {
return (
<Image source={} />
);
}
}
Define methods for components
As can be seen from the example above, the definition method for component is no longer used with the name: function()The way to write , instead of using the name (), there should be no commas at the end of the method.
//ES5
var Photo = ({
componentWillMount: function(){
},
render: function() {
return (
<Image source={} />
);
},
});
//ES6
class Photo extends {
componentWillMount() {
}
render() {
return (
<Image source={} />
);
}
}
Define the component's attribute type and default attributes
In ES5, the attribute type and default attribute are implemented by the propTypes member and getDefaultProps method respectively
//ES5
var Video = ({
getDefaultProps: function() {
return {
autoPlay: false,
maxLoops: 10,
};
},
propTypes: {
autoPlay: ,
maxLoops: ,
posterFrameSrc: ,
videoSrc: ,
},
render: function() {
return (
<View />
);
},
});
In ES6, static members can be used uniformly to implement
//ES6
class Video extends {
static defaultProps = {
autoPlay: false,
maxLoops: 10,
}; // Note that there is a semicolon here static propTypes = {
autoPlay: ,
maxLoops: ,
posterFrameSrc: ,
videoSrc: ,
}; // Note that there is a semicolon here render() {
return (
<View />
);
} // Note that there are neither semicolons nor commas here}
Some people write this way, although it is not recommended, you should understand what it means when you read the code:
//ES6
class Video extends {
render() {
return (
<View />
);
}
}
= {
autoPlay: false,
maxLoops: 10,
};
= {
autoPlay: ,
maxLoops: ,
posterFrameSrc: ,
videoSrc: ,
};
Notice:For React developers, static members cannot be inherited in IE10 and previous versions, but can be used on IE11 and other browsers, which can sometimes cause some problems. React Native developers don't have to worry about this problem.
Initialize STATE
The situation is similar under ES5.
//ES5
var Video = ({
getInitialState: function() {
return {
loopsRemaining: ,
};
},
})
Under ES6, there are two ways to write:
//ES6
class Video extends {
state = {
loopsRemaining: ,
}
}
However, we recommend an easier to understand initialization in the constructor (so that you can also do some calculations as needed):
//ES6
class Video extends {
constructor(props){
super(props);
= {
loopsRemaining: ,
};
}
}
Provide methods as callbacks
Many users who are accustomed to ES6 do not understand that this can be done under ES5:
//ES5
var PostInfo = ({
handleOptionsButtonClick: function(e) {
// Here, 'this' refers to the component instance.
({showOptionsModal: true});
},
render: function(){
return (
<TouchableHighlight onPress={}>
<Text>{}</Text>
</TouchableHighlight>
)
},
});
Under ES5,All methods will be bound, so that they can be submitted to any place as callback function, and this will not change. But the authorities are now gradually thinking that this is not standard and difficult to understand.
In ES6, you need to bind this reference through bind, or use the arrow function (it will bind this reference of the current scope) to call it
//ES6
class PostInfo extends
{
handleOptionsButtonClick(e){
({showOptionsModal: true});
}
render(){
return (
<TouchableHighlight
onPress={(this)}
onPress={e=>(e)}
>
<Text>{}</Text>
</TouchableHighlight>
)
},
}
The arrow function actually defines a temporary function here. The arrow => of the arrow function is before an empty bracket, a single parameter name, or multiple parameter names enclosed in brackets, and the arrow can be followed by an expression (as the return value of the function), or a function body enclosed in curly braces (the value needs to be returned by return, otherwise the return is undefined).
// Example of arrow function()=>1
v=>v+1
(a,b)=>a+b
()=>{
alert("foo");
}
e=>{
if (e == 0){
return 0;
}
return 1000/e;
}
It should be noted that whether it is a bind or an arrow function, each time it is executed, it returns a new function reference. Therefore, if you also need a function reference to do something else (such as uninstalling the listener), then you must save the reference yourself.
// Wrong wayclass PauseMenu extends {
componentWillMount(){
('change', (this));
}
componentDidUnmount(){
('change', (this));
}
onAppPaused(event){
}
}
// The correct way to do itclass PauseMenu extends {
constructor(props){
super(props);
this._onAppPaused = (this);
}
componentWillMount(){
('change', this._onAppPaused);
}
componentDidUnmount(){
('change', this._onAppPaused);
}
onAppPaused(event){
}
}
We also learned a new approach from the Internet:
// The correct way to do itclass PauseMenu extends {
componentWillMount(){
('change', );
}
componentDidUnmount(){
('change', );
}
onAppPaused = (event) => {
//Define the method directly as an attribute of an arrow function, and bind this pointer when initializing it }
}
Mixins
Under ES5, we often use mixin to add some new methods to our class, such as PureRenderMixin
var PureRenderMixin = require('react-addons-pure-render-mixin');
({
mixins: [PureRenderMixin],
render: function() {
return <div className={}>foo</div>;
}
});
However, the official no longer intends to continue to promote Mixin in ES6, they said:Mixins Are Dead. Long Live Composition。
Although you want to continue using mixin, there are still some third-party solutions that can be used, such asThis plan
However, the official recommendation is that for library writers, they should give up the writing method of Mixin as soon as possible. The above mentioned code from Sebastian Markbåge recommends a new encoding method:
//
import { Component } from "React";
export var Enhance = ComposedComponent => class extends Component {
constructor() {
= { data: null };
}
componentDidMount() {
({ data: 'Hello' });
}
render() {
return <ComposedComponent {...} data={} />;
}
};
//
import { Enhance } from "./Enhance";
class MyComponent {
render() {
if (!) return <div>Waiting...</div>;
return <div>{}</div>;
}
}
export default Enhance(MyComponent); // Enhanced component
Using an "enhanced function" to add some methods to a certain class and return a new class, this undoubtedly can realize most of the requirements implemented by mixin.
Other benefits of ES6+
Deconstruction & Attribute Extension
Combining the deconstruction and attribute extension of ES6+, it is more convenient for us to pass on a batch of attributes to our children. This example passes all attributes except className to the div tag:
class AutoloadingPostsGrid extends {
render() {
var {
className,
...others, // contains all properties of except for className
} = ;
return (
<div className={className}>
<PostsGrid {...others} />
<button onClick={}>Load more</button>
</div>
);
}
}
The following writing method is to use the new className value to pass all attributes while overwriting all the attributes:
<div {...} className="override">
…
</div>
In contrast, if the property does not contain className, the default value is provided, and if the property already contains, the value in the property is used
<div className="base" {...}>
…
</div>
Summarize
The above is the entire content of this article. I hope the content of this article will be of some help to your study or work. If you have any questions, you can leave a message to communicate. Thank you for your support.