如何使用ES6语法重构React

这篇文章主要为大家展示了“如何使用ES6语法重构React”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何使用ES6语法重构React”这篇文章吧。

让客户满意是我们工作的目标,不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户,将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴,公司提供的服务项目有:域名申请网站空间、营销软件、网站建设、慈利网站维护、网站推广。

使用ES6语法重构React组件

在Airbnb React/JSX Style Guide中,推荐使用ES6语法来编写react组件。下面总结一下使用ES6 class语法创建组件和以前使用React.createClass方法来创建组件的不同。

创建组件

ES6 class创建的组件语法更加简明,也更符合javascript。内部的方法不需要使用function关键字。

React.createClass

import React from 'react';

const MyComponent = React.createClass({
 render: function() {
  return (
   
以前的方式创建的组件
  );  } }); export default MyComponent;

React.Component(ES6)

import React,{ Component } from 'react';

class MyComponent extends Component {
 render() {
  return (
   
ES6方式创建的组件
  );  } } export default MyComponent;

props propTypes and getDefaultProps

1.使用React.Component创建组件,需要通过在constructor中调用super()将props传递给React.Component。另外react 0.13之后props必须是不可变的。

2.由于是用ES6 class语法创建组件,其内部只允许定义方法,而不能定义属性,class的属性只能定义在class之外。所以propTypes要写在组件外部。

3.对于之前的getDefaultProps方法,由于props不可变,所以现在被定义为一个属性,和propTypes一样,要定义在class外部。

React.createClass

import React from 'react';

const MyComponent = React.createClass({
 propTypes: {
  nameProp: React.PropTypes.string
 },
 getDefaultProps() {
  return {
   nameProp: ''
  };
 },
 render: function() {
  return (
   
以前的方式创建的组件
  );  } }); export default MyComponent;

React.Component(ES6)

import React,{ Component } from 'react';

class MyComponent extends Component {
 constructor(props) {
  super(props);
 }
 
 render() {
  return (
   
ES6方式创建的组件
  );  } } MyComponent.propTypes = {  nameProp: React.PropTypes.string }; MyComponent.defaultProps = {  nameProp: '' }; export default MyComponent;

State

使用ES6 class语法创建组件,初始化state的工作要在constructor中完成。不需要再调用getInitialState方法。这种语法更加的符合JavaScript语言习惯。

React.createClass

import React from 'react';

const MyComponent = React.createClass({
 getInitialState: function() {
  return { data: [] };
 },
 
 render: function() {
  return (
   
以前的方式创建的组件
  );  } }); export default MyComponent;

React.Component(ES6)

import React,{ Component } from 'react';

class MyComponent extends Component {
 constructor(props) {
  super(props);
  this.state = { data: [] };
 }
 
 render() {
  return (
   
ES6方式创建的组件
  );  } } export default MyComponent;

this

使用ES6 class语法创建组件, class中的方法不会自动将this绑定到实例中。必须使用 .bind(this)或者 箭头函数 =>来进行手动绑定。

React.createClass

import React from 'react';

const MyComponent = React.createClass({
 handleClick: function() {
  console.log(this);
 },
 render: function() {
  return (
   以前的方式创建的组件
  );  } }); export default MyComponent;

React.Component(ES6)

import React,{ Component } from 'react';

class MyComponent extends Component {
 handleClick() {
  console.log(this);
 }
 
 render() {
  return (
   ES6方式创建的组件
  );  } } export default MyComponent;

也可以将绑定方法写到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 (
   ES6方式创建的组件
  );  } } export default MyComponent;

或者使用箭头函数 =>

import React,{ Component } from 'react';

class MyComponent extends Component {
 handleClick = () => {
  console.log(this);
 }
 
 render() {
  return (
   ES6方式创建的组件
  );  } } export default MyComponent;

Mixins

使用ES6语法来创建组件是不支持React mixins的,如果一定要使用React mixins就只能使用React.createClass方法来创建组件了。

import React,{ Component } from 'react';

var SetIntervalMixin = {
 doSomething: function() {
  console.log('do somethis...');
 },
};
const Contacts = React.createClass({
 mixins: [SetIntervalMixin],
 
 handleClick() {
  this.doSomething(); //使用mixin
 },
 render() {
  return (
   
  );
 }
});

export default Contacts;

以上是“如何使用ES6语法重构React”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


当前名称:如何使用ES6语法重构React
网站地址:http://scyanting.com/article/ghpchj.html

其他资讯