写点什么

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

2015 年 3 月 23 日

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 年 3 月 23 日 05:1112950
用户头像

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

关注

评论

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

完美兼容老项目!Dataway 4.1.6 返回结构的全面控制

哈库纳

spring Spring Boot Dataway Hasor

服务化构建-多维度的认识中台

图南日晟

软件工程 分层架构 架构设计

Rust 遇上 C/C++(二):函数传参

Coding Fatty

c c++ rust 编程语言

深入浅出Mysql索引的那些事儿

猿人谷

MySQL 性能优化 索引

Vol.9 Web前端发展历程及前端工程化

Lanpeng20

前端 前端工程

控制 Pod 内容器的启动顺序

张晓辉

Kubernetes

超简单入门MyBatis,看了就会了~

程序员的时光

mybatis

【写作群星榜】5.22~5.28写作平台优秀作者&文章排名

InfoQ写作平台官方

写作平台 排行榜

Dataway 4.1.5 以上版本升级指南

哈库纳

string StringBoot Dataway Hasor

系统服务化构建-两方OAuth

图南日晟

微服务 软件工程 身份认证 架构设计

我来聊聊模型驱动的前端开发

欧雷

软件工程 软件开发 前端开发 前端工程 前端架构

安装R语言编译器:

唯爱

在培训机构花了好几万学Java,当了程序员还常被鄙视,这是招谁惹谁了?

四猿外

Java 学习 程序员 个人成长 转行程序员

Dataway 配置数据接口时和前端进行参数对接

哈库纳

Spring Boot DataQL Dataway Hasor

小谈校招offer选择

dongh11

职场 职业规划 应届毕业 心态 招聘

XSKY发布XMotion纳管热迁移技术,OpenStack集群迁移效率提升超10倍

XSKY融合存储

Java 学习笔记(三)数据类型

杜朋

避免争执

孙苏勇

职场 随笔杂谈

绝了!Dataway让Spring Boot不再需要Controller、Service、DAO、Mapper

哈库纳

StringBoot DataQL

Dataway 整合 Swagger2,让 API 管理更顺畅

哈库纳

Spring Boot DataQL Dataway Hasor

服务化架构-状态码设计要点

图南日晟

微服务 RESTful 架构设计

磁盘挂载

唯爱

不懂送女朋友什么牌子的口红?没关系!Python 数据分析告诉你。

JackTian

Python 程序员 数据分析 python 爬虫 口红

珍藏已久的 OS 学习网站拿出来分享给大家

cxuan

操作系统

Vol.7 聊聊我热爱的陕西省图书馆

Lanpeng20

记录 生活,随想

ARTS|Week 1 第一次使用LeetCode

Puran

LeetCode ARTS活动

无需代码!通过 Dataway 配置一个带有分页查询的接口

哈库纳

spring springboot Dataway Hasor

游戏夜读 | vim,vim,vim

game1night

tput命令介绍

唯爱

金灿灿的季节 - Apache DolphinScheduler收获5位新Committer

海豚调度

Vol.8 云栖小镇游记

Lanpeng20

阿里云 随笔 数字化转型

NLP领域的2020年大事记及2021展望

NLP领域的2020年大事记及2021展望

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