React is very popular nowadays, and many novices may encounter the same problem as me:
var MyClass = React.createClass({… }); And class MyClass extends React.Component{… }
What’s the difference? So today I will take you to study together.
The difference in writing
There are two ways to create components in React. You can do this through React. CreateClass and extends React.ponent. The difference is whether you’re in ES6 or not.
When you use ES6, you should initialize your arguments in constructor:
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = { /* initial state, this is ES6 syntax (classes) */ };
}
}
Copy the codeWhen you use React. CreateClass you need to use getInitialState:
var MyComponent = React.createClass({
getInitialState() {
return { /* initial state */ };
},
});
Copy the code
- Both methods must begin with a capital letter
The function this is self-bound
CreateClass creates a component in which this of each function is automatically bound to React. Use this. Method whenever this is used.
const Contacts = React.createClass({
handleClick() {
console.log(this); // React Component instance
},
render() {
return (
<div onClick={this.handleClick}></div>
);
}
});
Copy the codeReact.Com ponent created component, its member function does not automatically binding this, need a developer manual binding, this won’t be able to access to current component instance objects.
class Contacts extends React.Component {
constructor(props) {
super(props);
}
handleClick() {
console.log(this);
}
render() {
return (
<div onClick={this.handleClick.bind(this)}></div>
);
}
}
Copy the codeOf course, react.componenthas three manual binding methods: you can bind in the constructor, use method.bind(this) at call time, or use the Arrow function. In the example of the handleClick function, the binding can have
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this); // bind in the constructor
}
Copy the code<div onClick={this.handleclick. bind(this)}></div
Copy the code<div onClick={()=> this.handleclick ()}></div> // use arrow function
Copy the codeThe component property type propTypes and its defaultProps property defaultProps are configured differently
When a component is created, the properties of the component props and the default properties of the component are configured as properties of the component instance. DefaultProps uses the getDefaultProps method to obtain the default properties of the component:
const TodoItem = React.createClass({
propTypes: { // as an object
name: React.PropTypes.string
},
getDefaultProps(){ // return a object
return {
name: ''
}
}
render(){
return <div></div>
}
})
Copy the codeWhen react.componentconfigures these two corresponding information when creating a component, they are configured as properties of the component class, not as properties of the component instance, which are called static properties of the class. The configuration is as follows:
class TodoItem extends React.Component {
Static propTypes = {static properties of the class
name: React.PropTypes.string
};
Static defaultProps = {// Static properties of the class
name: ''
};
/ /...
}
Copy the codeThe initial state of the component is configured differently
React.createClass creates a component whose state state is configured using the getInitialState method. React.componentcreates a component whose state state is declared in Constructor as if it were initializing the component properties.
const TodoItem = React.createClass({
// return an object
getInitialState(){
return {
isEditing: false
}
}
render(){
return <div></div>
}
})
Copy the codeclass TodoItem extends React.Component{
constructor(props){
super(props);
this.state = { // define this.state in constructor
isEditing: false
}
}
render(){
return <div></div>
}
}
Copy the codeMixins support is different
Mixins(Mixins) is an implementation of OOP. Its function is to reuse common code. The common code is extracted as an object, and then into the object through Mixins to achieve code reuse.
React. CreateClass can use the mixins attribute when creating components to mix collections of classes in the form of arrays.
var SomeMixin = {
doSomething() {
}
};
const Contacts = React.createClass({
mixins: [SomeMixin],
handleClick() {
this.doSomething(); // use mixin
},
render() {
return (
<div onClick={this.handleClick}></div>
);
}
});
Copy the codeUnfortunately, React.Component does not support Mixins, and the React team has yet to come up with an official solution for this format. But the React developer community offers a new way to replace Mixins: higher-order Components.