发布在即!企业 AIGC 应用程度测评,3 步定制专属评估报告。抢首批测评权益>>> 了解详情
写点什么

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:1113354
用户头像

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

关注

评论

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

在线问题反馈模块实战(十八):实现excel台账文件记录批量导入功能

bug菌

springboot 项目实战 10月月更

【高并发】深度解析ScheduledThreadPoolExecutor类的源代码

冰河

并发编程 多线程 高并发 协程 异步编程

科兴未来:产业创新和人才服务为一体化的双创体系

科兴未来News

#双创赛事# #双招双引# #人才政策# #创业大赛#

八大排序(下)

lovevivi

c 数据结构 10月月更

Vue_cli2和Vue_cli3

Studying_swz

前端 10月月更

Vue_Webpack详解

Studying_swz

前端 10月月更

JNI中实现类似C++回调的方法(1)

中国好公民st

c++ jni 10月月更

基于Ernie-3.0 CAIL2019法研杯要素识别多标签分类任务

汀丶人工智能

nlp

JavaScript基础知识-JS数据类型

木偶

JavaScript 前端 10月月更

你应该知道的数仓安全:都是同名Schema惹的祸

华为云开发者联盟

数据库 后端 华为云 企业号十月 PK 榜

如何实现一个SQL解析器

vivo互联网技术

sql 解析 SQL解析

浅析HTML页面的生命周期

CoderBin

html 前端 10月月更

算法 | 详解斐波那契数列问题

甜点cc

JavaScript 算法 10月月更 斐波那契数列

记一个“奇葩”需求的实现

甜点cc

JavaScript 前端 Element UI 10月月更

Python高阶语法---函数

木偶

Python 函数 10月月更

堆排序详解(含对时间复杂度的分析)

lovevivi

c 数据结构 10月月更

一种基于柔性事务的分布式事务解决方案设计探究

京东科技开发者

编程 分布式事务 事务 事务回滚 柔性事务

八大排序 (上)

lovevivi

c 数据结构 10月月更

在线问题反馈模块实战(十六)​:实现查详情功能

bug菌

springboot 项目实战 10月月更

在线问题反馈模块实战(十七):实现excel模板在线下载功能

bug菌

springboot 项目实战 10月月更

Hybrid app本地开发如何调用JSBridge

甜点cc

JavaScript 前端 Hybrid 10月月更

uniapp H5端精准定位

源字节1号

软件开发 小程序开发

vue-router学习-1

Studying_swz

前端 10月月更

HashMap源码分析(六)

知识浅谈

hashmap 10月月更

“程”风破浪的开发者 | 踉踉跄跄的Java之路

游坦之

Java 学习方法 “程”风破浪的开发者

Gartner发布2023年十大战略技术趋势播

雨果

Gartner

规律跑步,让生活更有掌控感

BY林子

跑步 掌控

数据湖(九):Iceberg特点详述和数据类型

Lansonli

数据湖 10月月更

“程”风破浪的开发者|我的js学习小技巧

国服第二切图仔

JavaScript 学习方法 “程”风破浪的开发者

如何实现图像人脸融合?

夏夜许游

人工智能 AI 融合 图像人脸

详解Native Memory Tracking 追踪区域分析

华为云开发者联盟

开发 华为云 企业号十月 PK 榜

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