BT

如何利用碎片时间提升技术认知与能力? 点击获取答案

React支持了ES6 Classes,听听他们怎么说

| 作者 James Chesters 关注 1 他的粉丝 ,译者 刘振涛 关注 22 他的粉丝 发布于 2015年3月24日. 估计阅读时间: 6 分钟 | Google、Facebook、Pinterest、阿里、腾讯 等顶尖技术团队的上百个可供参考的架构实例!

React是Facebook开源的构建反应式用户界面的JavaScript库,Facebook用它构建了Instagram app以及Facebook自身的一部分功能。

React v0.13的声明中,Facebook的开发者Ben Alpert介绍了ES6 classes的新特性,这些特性可以协助开发者编写更有弹性的组件,与此同时,他们也打算用这些新特性代替React.createClass

Sebastian Markbåge在React v0.13.0 Beta 1的声明中提供了更多有关ES6的信息。

Markbåge 说:

JavaScript原本没有内建的类系统,包括我们在内的每一个流行的框架都构建了自己的类系统。这意味着你需要对每一个框架语法上细微差异都要了如指掌。

我们认为我们的职责并不是设计一个类系统,我们只想使用符合JavaScript标准的方式去创造类。

使用React 0.13.0意味着你不再需要使用React.createClass来创建React组件,如果你有一个转译器,那么你现在就可以上手ES6 classes,你可以使用我们在react-tools里提供的转译器,不过你需要启用使用harmony的选项:jsx --harmony。

class HelloMessage extends React.Component {
  render() {
    return <div>Hello {this.props.name}</div>;
  }
}

React.render(<HelloMessage name="Sebastian" />, mountNode);

虽然getInitialState还不尽如人意,但其它大多数的API应该可以满足你的期望,我们认为,只使用简单的实例属性是标明一个类的特定状态的惯用手法。同样的,getDefaultProps和getDefaultProps也只是构造器的属性而已。

export class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {count: props.initialCount};
  }
  tick() {
    this.setState({count: this.state.count + 1});
  }
  render() {
    return (
        <div onClick={this.tick.bind(this)}>
        Clicks: {this.state.count} 
    );
  }
}
Counter.propTypes = { initialCount: React.PropTypes.number };
Counter.defaultProps = { initialCount: 0 };
        

React v0.13的其它部分也有翻天覆地的变化,包括React Core、React Tools和JSX。

React Core中的新特性有:新的顶级API、React.findDOMNode(component)和React.cloneElement(el, props)。值得注意的是现在用React.findDOMNode(component)代替了component.getDOMNode(),在未来会启用更多的模式。根据声明的介绍,React.cloneElement被用以拷贝React的元素(elements),这与React.addons.cloneWithProps相似,但是它保持key和ref不变,并且不会自动合并style和className。

对于React Tools来说,在jsx命令行中新加入了--target选项,可以允许用户指定React所使用的ECMAScript的版本。

React 0.13给JSX带来了突破性的改变,以前在一个元素内使用>或者}会被识别为一个字符串,由于JSX变更了解析的方式,现在会将其视为语法错误。Alpert指出:“npm中有一个名为jsx_orphaned_brackets_transformer的包,你可以用它来寻找、修复JSX代码中潜在的问题”。

React 0.13现在可以下载了。

查看英文原文:React Introduces Support for ES6 Classes


感谢夏雪对本文的审校。

给InfoQ中文站投稿或者参与内容翻译工作,请邮件至editors@cn.infoq.com。也欢迎大家通过新浪微博(@InfoQ@丁晓昀),微信(InfoQ)关注我们,并与我们的编辑和其他读者朋友交流。

评价本文

专业度
风格

您好,朋友!

您需要 注册一个InfoQ账号 或者 才能进行评论。在您完成注册后还需要进行一些设置。

获得来自InfoQ的更多体验。

告诉我们您的想法

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我
社区评论

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

讨论

登陆InfoQ,与你最关心的话题互动。


找回密码....

Follow

关注你最喜爱的话题和作者

快速浏览网站内你所感兴趣话题的精选内容。

Like

内容自由定制

选择想要阅读的主题和喜爱的作者定制自己的新闻源。

Notifications

获取更新

设置通知机制以获取内容更新对您而言是否重要

BT