Detailed explanation of reconstructing React component by ES6 syntax

1. Create a component

ES6 class creates a more concise component syntax and is more javascript compliant. The internal method does not need to use the function keyword.

React.createClass

import React from 'react';
const MyComponent = React.createClass({
 render: function() {
 return (
  <div> Components created in the previous way </div>
 );
 }
});
export default MyComponent;

React.Component(ES6)

import React,{ Component } from 'react';
class MyComponent extends Component {
 render() {
 return (
  <div>ES6 Components created in the </div>
 );
 }
}
export default MyComponent;

2. Attributes

props propTypes and getDefaultProps

. use React.Component To create a component, you need to call it in constructor super() Pass props to React.Component . In addition, props must be immutable after react 0.13.

Since the component is created using ES6 class syntax, it is allowed to define only methods, but not properties, and the properties of class can only be defined outside class. So propTypes should be written outside the component.

For the previous getDefaultProps method, since props is immutable, it is now defined as a property, like propTypes1, to be defined outside class.

React.createClass

import React from 'react';
const MyComponent = React.createClass({
 propTypes: {
 nameProp: React.PropTypes.string
 },
 getDefaultProps() {
 return {
  nameProp: ''
 };
 },
 render: function() {
 return (
  <div> Components created in the previous way </div>
 );
 }
});
export default MyComponent;

React.Component(ES6)

import React,{ Component } from 'react';
class MyComponent extends Component {
 constructor(props) {
 super(props);
 }
 
 render() {
 return (
  <div>ES6 Components created in the </div>
 );
 }
}
MyComponent.propTypes = {
 nameProp: React.PropTypes.string
};
MyComponent.defaultProps = {
 nameProp: ''
};
export default MyComponent;

3. Status

Create components using the ES6 class syntax, and initialize state in constructor. There is no need to call the getInitialState method. This grammar is more in line with JavaScript language habits.

React.createClass

import React from 'react';
const MyComponent = React.createClass({
 getInitialState: function() {
 return { data: [] };
 },
 
 render: function() {
 return (
  <div> Components created in the previous way </div>
 );
 }
});
export default MyComponent;

React.Component(ES6)

import React,{ Component } from 'react';
class MyComponent extends Component {
 constructor(props) {
 super(props);
 this.state = { data: [] };
 }
 
 render() {
 return (
  <div>ES6 Components created in the </div>
 );
 }
}
export default MyComponent;

4. this

A component is created using the ES6 class syntax, and the methods in class do not automatically bind this to an instance. You must use the .bind(this) Or the arrow function = > To do manual binding.

React.createClass

import React from 'react';
const MyComponent = React.createClass({
 handleClick: function() {
 console.log(this);
 },
 render: function() {
 return (
  <div onClick={this.handleClick}> Components created in the previous way </div>
 );
 }
});
export default MyComponent;

React.Component(ES6)

import React,{ Component } from 'react';
class MyComponent extends Component {
 handleClick() {
 console.log(this);
 }
 
 render() {
 return (
  <div onClick={this.handleClick.bind(this)}>ES6 Components created in the </div>
 );
 }
}
export default MyComponent;

You can also write the binding method to constructor:

import React,{ Component } from 'react';
class MyComponent extends Component {
 constructor(props) {
 super(props);
 this.handleClick = this.handleClick.bind(this);
 }
 handleClick() {
 console.log(this);
 }
 
 render() {
 return (
  <div onClick={this.handleClick}>ES6 Components created in the </div>
 );
 }
}
export default MyComponent;

Or use the arrow function = > :

import React,{ Component } from 'react';
class MyComponent extends Component {
 handleClick = () => {
 console.log(this);
 }
 
 render() {
 return (
  <div onClick={this.handleClick}>ES6 Components created in the </div>
 );
 }
}
export default MyComponent;

5. Mixins

React mixins is not supported for creating components using ES 6 syntax. If 1 must use React mixins, it can only use React React.createClass Method to create a component.

import React,{ Component } from 'react';
class MyComponent extends Component {
 render() {
 return (
  <div>ES6 Components created in the </div>
 );
 }
}
export default MyComponent;

0

Summarize

The above is the whole content of this article. I hope the content of this article can bring 1 certain help to everyone's study or work. If you have any questions, you can leave a message for communication. If you have any questions, you can leave a message for communication.