AI实践哪家强?来 AICon, 解锁技术前沿,探寻产业新机! 了解详情
写点什么

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

  • 2015-03-23
  • 本文字数:1372 字

    阅读完需:约 5 分钟

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)关注我们,并与我们的编辑和其他读者朋友交流。

2015-03-23 05:1113713
用户头像

发布了 63 篇内容, 共 135.4 次阅读, 收获喜欢 38 次。

关注

评论

发布
暂无评论
发现更多内容

一文搞懂MySQL体系架构

程序猿阿星

架构 MySQL 数据库 MySQL InnoDB

面试突击:说一下线程生命周期,以及转换过程?

CRMEB

大咖说|《商业评论》主编颜杰华:如何看待未来商业的管理趋势?

大咖说

大咖说 财经 数智化 商业评论

网络安全kali渗透学习 web渗透入门 NMAP高级使用技巧和漏洞扫描

学神来啦

剑指Offer——JVM 这些基础知识点你全掌握了吗

No Silver Bullet

JVM 垃圾回收 offer 2月月更

关于 AI 边云协同解决方案的研究与讨论 | 社区征文

liuzhen007

AI 新春征文 2月月更

Python代码阅读(第75篇):阶乘

Felix

Python 编程 阅读代码 Python初学者 阶乘

自我认为挺全面的【Web Service渗透测试总结】

H

网络安全 渗透测试

政企机构用户注意!蠕虫病毒Prometei正在针对局域网横向渗透传播

火绒安全

局域网共享 渗透 蠕虫 病毒 政企

龙蜥下游发行版 Alibaba Cloud Linux 3 安全基线正式通过 CIS 认证,云上企业安全性保障更上层楼

OpenAnolis小助手

Linux 开源 cis

罗马建立在水渠上:为什么需要优先建设绿色光网?

脑极体

Web Components 系列(十一)—— 实现 MyCard 的可复用

编程三昧

前端 组件化 2月月更 webComponents

学术论坛第七期:基于统计的预测算法

云智慧AIOps社区

统计学 预测模型

Geospatial Data 在 Nebula Graph 中的实践

NebulaGraph

图数据库 知识图谱 分布式图数据库

编译ORB-SLAM 3 出现slots_reference错误

Ayosh

slam

Flink on K8s 企业生产化实践|社区征文

张浩_house

flink 特征平台 新春征文

百年奥运的凌空之美,AI云智剪背后的新算法

阿里云CloudImagine

开源每周问答精选:PolarDB for PostgreSQL 是专门面向 OLAP 场景吗?

阿里云数据库开源

数据库 阿里云 开源 polarDB

WeOpen Good 开源公益计划正式启动!聚开源智慧·行科技向善

腾源会

开源 公益 腾源会

35款FL插件免费下载

懒得勤快

使用goby检测log4j漏洞

网络安全学海

黑客 网络安全 信息安全 渗透测试 WEB安全

一文带你使用 Python 实现Socket编程

宇宙之一粟

Python socket 2月月更

刷屏的“1620”有多难?3D+AI技术带你一秒看懂

百度开发者中心

图计算 on nLive:Nebula 的图计算实践

NebulaGraph

图数据库 知识图谱 图计算 分布式图数据库

iLogtail——一款延迟仅在毫秒级的千万实例可观测采集器利器来了 | 龙蜥技术

OpenAnolis小助手

阿里云 开源 数据采集 技术分享

腾讯音乐知识图谱搜索实践

NebulaGraph

图数据库 知识图谱 分布式图数据库

1分钟了解Prometheus的WAL机制

johncming

Prometheus WAL

netty系列之:channelHandlerContext详解

程序那些事

Java Netty nio 程序那些事 2月月更

千万级CPS的开源网络压测软件dperf

百度开发者中心

3步教你把个人应用服务部署到云服务器ECS上

阿里云弹性计算

Docker 征文投稿 玩转ECS

SQL注入如何预防?

喀拉峻

网络安全

React支持了ES6 Classes,听听他们怎么说_JavaScript_James Chesters_InfoQ精选文章