写点什么

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

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

关注

评论

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

专业的数据库管理工具Navicat Premium for Mac

Mac相关知识分享

数据库管理工具

神奇的css选择器

六哥是全栈

CSS 前端‘’

阿里巴巴商品详情API:1688电商发展新趋势下的数据驱动力

代码忍者

API 测试 pinduoduo API

HarmonyOS NEXT 实战输入文字转化语音

李洋-蛟龙腾飞

Sketch for mac(专业矢量绘图设计软件)

Mac相关知识分享

Cisco SD-WAN (Viptela) 20.15.1 发布,新增功能概览

sysin

Cisco SD-WAN

绘图软件AutoCAD 2024 for Mac

Mac相关知识分享

通产访谈 | 星融元副总裁胡波:功耗阻碍AI快速发展

Geek_2d6073

Mac电脑上的系统监控工具iStat Menus for Mac

Mac相关知识分享

AI西游记:企业如何闯过大模型的「火焰山」?

脑极体

AI

《Programming from the Ground Up》阅读笔记:p117-p146

codists

汇编 assembly 编程人

VMware Aria Suite 8.18 发布 - 云管理解决方案

sysin

vmware aria

望繁信科技亮相2023北京央企部委及大型企业CIO年会,为“数字化转型”注入全新想象

望繁信科技

数字化转型 流程挖掘 流程资产 流程智能 业务流程管理优化

鼠标键盘共享工具ShareMouse for mac

Mac相关知识分享

Web应用是指什么?堡垒机对Web应用进行管理有什么好处?

行云管家

Web应用 Web 应用防火墙

屏幕显示优化工具BetterDisplay Pro Mac屏幕校准软件

Mac相关知识分享

MacOS 11-14系统安装包(PKG系统安装包及IPSW固件)

Mac相关知识分享

加入极限科技(INFINI Labs),成为搜索运维工程师!

极限实验室

招聘 搜索引擎运维

Cisco Catalyst 9000 交换产品系列 IOS XE 17.15.1 发布下载,新增功能概览

sysin

Cisco 交换机

微软远程连接工具:Microsoft Remote Desktop for Mac 中文直装版

你的猪会飞吗

microsoft remote desktop Mac破解软件 mac破解软件下载

Java 性能分析

FunTester

TDengine 签约国家电投旗下四大火力发电厂,助力汽轮机振动数据的有效管理

TDengine

数据库 tdengine 时序数据库

淘宝商品详情API接口多线程调用:解锁数据分析行业的效率新篇章

代码忍者

API 接口 API 测试 pinduoduo API

【数据飞轮】驱动业务增长的高效引擎 —从数据仓库到数据中台的技术进化与实战

申公豹

数据飞轮

专访 Bitlayer 联合创始人 Charlie:探索比特币 Layer2 技术的未来

TechubNews

中小企业为什么要上MES系统?

万界星空科技

mes 中小企业 万界星空科技mes 生产管理MES系统

AI+,释放算力新价值论坛 | 超聚变联合伙伴发布FusionOne AI大模型解决方案

业界

Macs Fan Control Pro for mac电脑风扇控制软件

Mac相关知识分享

“你好BOE”重磅亮相首届上海国际光影节 打造“艺术x科技”顶级影像盛宴

爱极客侠

Java 应用程序性能分析工具JProfiler 14 for Mac

Mac相关知识分享

Java 性能分析

Beyond Compare 4 for Mac(好用的文件对比工具)

Mac相关知识分享

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