react on es6+

转载 2016年08月28日 21:50:04

原文:React on ES6+
[译]在 React.js 中使用 ES6+

在今年对 Instagram Web 进行全新的设计的时候,我喜欢在写 React 组件的时候,用上一些 ES6+ 的新特性。请允许我列举这些能够改变你写 React 应用方式的新特性。比起以往,这些特性能够使你撸起码来更加容易、有趣!

类(Class)

使用 ES6+ 来编写 React 组件最明显的变化就是我们定义组件(类)的语法的方式。我们可以用定义一个继承了 React.Component 的ES6 类来代替原本使用 React.createClass 的来创建类的方式:

class Photo extends React.Component {
  render() {
    return <img alt={this.props.caption} src={this.props.src} />;
  }
}

我们可以发现这种写法使得定义组件的方式变得更加简洁:

// The ES5 way
var Photo = React.createClass({
  handleDoubleTap: function(e) { … },
  render: function() { … },
});
// The ES6+ way
class Photo extends React.Component {
  handleDoubleTap(e) { … }
  render() { … }
}

这样我们可以少写一对圆括号、一个分号、每个方法的冒号和 function 关键字。

所有生命周期方法都可以采用这种方式来定义。 但是 componentWillMount 还可以用 constructor 来代替:

// The ES5 way
var EmbedModal = React.createClass({
  componentWillMount: function() { … },
});
// The ES6+ way
class EmbedModal extends React.Component {
  constructor(props) {
    super(props);
    // Operations usually carried out in componentWillMount go here
  }
}

属性初始化(property initializers)

在 ES6+ 类中,属性类型 prop type 和默认属性 default prop 可以通过类中的 static 来声明。同时,组件的初始状态( initial state )可以通过 ES7 的属性初始化(property initializers)来完成:

// The ES5 way
var Video = React.createClass({
  getDefaultProps: function() {
    return {
      autoPlay: false,
      maxLoops: 10,
    };
  },
  getInitialState: function() {
    return {
      loopsRemaining: this.props.maxLoops,
    };
  },
  propTypes: {
    autoPlay: React.PropTypes.bool.isRequired,
    maxLoops: React.PropTypes.number.isRequired,
    posterFrameSrc: React.PropTypes.string.isRequired,
    videoSrc: React.PropTypes.string.isRequired,
  },
});
// The ES6+ way
class Video extends React.Component {
  static defaultProps = {
    autoPlay: false,
    maxLoops: 10,
  }
  static propTypes = {
    autoPlay: React.PropTypes.bool.isRequired,
    maxLoops: React.PropTypes.number.isRequired,
    posterFrameSrc: React.PropTypes.string.isRequired,
    videoSrc: React.PropTypes.string.isRequired,
  }
  state = {
    loopsRemaining: this.props.maxLoops,
  }
}

ES7 中在构造函数( constructor )下的属性初始化操作中的 this 指向的是类的实例,所以初始状态( initial state )可以通过 this.prop (即传入的参数)来设定。

箭头函数(Arrow function)

React.createClass 方法在你的组件上做了一些额外的绑定工作,以确保在组件实实例的方法内部, this 指向的是组件实例自身。

// Autobinding, brought to you by React.createClass
var PostInfo = React.createClass({
  handleOptionsButtonClick: function(e) {
    // Here, 'this' refers to the component instance.
    this.setState({showOptionsModal: true});
  },
});

由于我们使用 ES6+ 的语法定义类的时候没有采用 React.createClass 的方式,所以,这样看来我们不得不手动来绑定这些方法中 this 的指向:

// Manually bind, wherever you need to
class PostInfo extends React.Component {
  constructor(props) {
    super(props);
    // Manually bind this method to the component instance...
    this.handleOptionsButtonClick = this.handleOptionsButtonClick.bind(this);
  }
  handleOptionsButtonClick(e) {
    // ...to ensure that 'this' refers to the component instance here.
    this.setState({showOptionsModal: true});
  }
}

幸运的是,通过 ES6+ 的箭头函数( Arrow functions )和属性初始化( property initializers )这两个特性使得把函数的 this 指向绑定为组件的实例变得非常的简单:

class PostInfo extends React.Component {
  handleOptionsButtonClick = (e) => {
    this.setState({showOptionsModal: true});
  }
}

函数体内的 this 对象,绑定定义时所在的对象,而不是使用时所在的对象。而恰好属性初始化( property initializers )刚好在这个作用域内。

动态属性名 & 字符串模板

在 ES6+ 中对 对象字面量的扩展 使得我们可以在对象字面量中使用表达式来对属性命名。如果是在 ES5 中,我们也许只能这样做:

var Form = React.createClass({
  onChange: function(inputName, e) {
    var stateToSet = {};
    stateToSet[inputName + 'Value'] = e.target.value;
    this.setState(stateToSet);
  },
});

但是,在 ES6+ 中,我们不仅可以在对象字面量属性的定义中使用表达式,还有使用字符串模板 :

class Form extends React.Component {
  onChange(inputName, e) {
    this.setState({
      [`${inputName}Value`]: e.target.value,
    });
  }
}

析构 & 扩展运算符

我们在编写组件的过程中,经常遇到要从父组件要把自己的很多属性多传给子组件的情况。有了 ES6+ 的 析构 和 扩展运算符 特性,这变得非常的方便:

class AutoloadingPostsGrid extends React.Component {
  render() {
    var {
      className,
      ...others,  // contains all properties of this.props except for className
    } = this.props;
    return (
      <div className={className}>
        <PostsGrid {...others} />
        <button onClick={this.handleLoadMoreClick}>Load more</button>
      </div>
    );
  }
}

我们可以把 扩展运算符 属性和普通的属性结合起来使用,这样使得我们可以利用优先级来使用属性的默认值和属性的覆盖。下面这个元素会获得一个 override 的类( class ),及时 this.props 中有传递 className 属性。

<div {...this.props} className="override">
  …
</div>

下面这种写法,可以给元素设定默认的 className:

<div className="base" {...this.props}>
  …
</div>

最后

我希望你能够享受 ES6+ 的这些特性给你在编写 React.js 中带来的好处。感谢我的同事他们为这篇文章作出的贡献,还有,特别的感谢 Babel 团队,使得我们可以随意的使用这些特性。

react-native ES5与ES6写法对照表

转载链接:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/react-native-es5-and-es6-writing-tabl...
  • qwe1134502476
  • qwe1134502476
  • 2016年03月18日 09:30
  • 1101

[译]使用 ES6+ 写 react

原文 : React on ES6+ :http://babeljs.io/blog/2015/06/07/react-on-es6-plus/ (英文不好,见谅哈) Posted Jun 7, 2...
  • canglingyue
  • canglingyue
  • 2016年12月16日 16:59
  • 269

ES6特性简述

1、箭头操作符 如果你会C#或者Java,你肯定知道lambda表达式,ES6中新增的箭头操作符=>便有异曲同工之妙。它简化了函数的书写。操作符左边为输入的参数,而右边则是进行的操作以及返回的值In...
  • gongzhuxiaoxin
  • gongzhuxiaoxin
  • 2016年08月31日 10:56
  • 242

React Native 中 ES6+ 和 ES5 语法比较

React Native 中 ES6+ 和 ES5 语法比较JS 更新快,所以基于 JS 的 RN 语法更新也挺大。在阅读别人代码或项目开发时经常会碰到 EMACScript 新旧格式语法写的程序,给...
  • wangzengdi
  • wangzengdi
  • 2016年02月22日 22:21
  • 6214

JavaScript 代码片段

以YYYY-MM-DD的格式输出今天的日期 function Today () { var d = new Date(); var year = d.getFullYear(); /...
  • cxl444905143
  • cxl444905143
  • 2015年07月13日 11:06
  • 349

在 React.js 中使用 ES6+

在今年对 Instagram Web 进行全新的设计的时候,我喜欢在写 React 组件的时候,用上一些 ES6+ 的新特性。请允许我列举这些能够改变你写 React 应用方式的新特性。比起以往,这些...
  • u013287870
  • u013287870
  • 2016年12月14日 21:32
  • 348

React源码分析7 — React合成事件系统

1 React合成事件特点React自己实现了一套高效的事件注册,存储,分发和重用逻辑,在DOM事件体系基础上做了很大改进,减少了内存消耗,简化了事件逻辑,并最大化的解决了IE等浏览器的不兼容问题。与...
  • u013510838
  • u013510838
  • 2017年03月10日 23:36
  • 1788

React-架构模式

React主要功能在于渲染HTML。可以将其看成是MVC中的V,它不会影响到组件中直接调用AJAX请求之类的操作: var TakeSurvey= React.CreateClass({ getIni...
  • limm33
  • limm33
  • 2016年03月27日 13:14
  • 2473

基于react实现无限分级菜单

在开发CMS(内容管理系统)系统时,一般都会用到一个侧边栏或者顶部的二级或者三级菜单,当点击或者鼠标悬浮时,菜单能够随之展开或收起。 本文纯粹为了练习一下react,因此我会在react环境下实...
  • qq120848369
  • qq120848369
  • 2016年11月17日 18:27
  • 3328

FB 妥协了,下周把 React 协议改成 MIT

(点击上方蓝字,快速关注我们)React 协议修改风波开始,Facebook 就饱受开发者和开源社区的吐槽。FB 没有料到大家的反应如此激烈。Apache、WordPress 等组织陆续宣布封杀或弃用...
  • VhWfR2u02Q
  • VhWfR2u02Q
  • 2017年09月23日 00:00
  • 696
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:react on es6+
举报原因:
原因补充:

(最多只允许输入30个字)