写点什么

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

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

关注

评论

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

Serverless Desktop 上手

刘宇

Serverless Serverless Devs

Custom Container的CI/CD最佳实践案例

刘宇

Serverless cicd 容器镜像 Serverless Devs

Serverless架构下如何上传文件与持久化文件

刘宇

Serverless 架构开发/优化案例

刘宇

如何没话找话,聊得不那么尬?(15/28)

赵新龙

28天写作

跟小海一起看下雪——用HTML、CSS和JS实现简单的下雪特效

海拥(haiyong.site)

大前端 js 28天写作 签约计划第二季 12月日更

模型升级在 Serverless 架构下的实现与应用

刘宇

人工智能 Serverless PyTorch Serverless Devs

Serverless User Model

刘宇

Vim 编辑器|批量注释与批量取消注释

AlwaysBeta

vim Linux

Spring Boot 2 教程:WebFlux 集成测试及部署(十)

程序员泥瓦匠

从工具看函数资源评估

刘宇

Serverless 函数计算 Serverless Devs

Spring Boot 2 WebFlux 系列教程分享| 内容合集

程序员泥瓦匠

内容合集 签约计划第二季

Serverless Devs 与 CI/CD 平台/工具集成

刘宇

Serverless cicd Serverless Devs

Serverless Devs Model 与模型简介

刘宇

大数据开发之常用命令大全

@零度

大数据

虎符重磅启动迎新活动:新用户注册即送VIP2和200USDT 合约体验金

区块链前沿News

Hoo虎符 虎符交易所 虎符送VIP

初章

阿丞

Serverless架构下如何对应用进行调试

刘宇

Serverless 代码调试

Golang 问题排查指南

得物技术

Go golang 后端 root

Prometheus Exporter (二十七)Memcached Exporter

耳东@Erdong

memcached Prometheus 28天写作 exporter 12月日更

低代码助力直播带货走进制造业,冲击工厂传统供应链模式

优秀

低代码 直播带货

Serverless架构下PaddleOCR项目开发与部署

刘宇

人工智能 paddle Serverless Serverless Devs

基于Gitee Go的函数代码更新与版本发布

刘宇

Serverless cicd gitee Serverless Devs

在线JSON转typescript工具

入门小站

工具

Serverless架构下传统框架迁移方案与策略

刘宇

Serverless Serverless Devs 传统框架

Serverless Registry Model

刘宇

Serverless 研发效能的变革:Serverless Devs | 引航计划|云原生

刘宇

Serverless 云原生 内容合集 签约计划第二季 Serverless Devs

Serverless架构下Tensorflow与目标检测系统

刘宇

tensorflow Serverless 目标检测 Serverless Devs

6 款开源 Web 性能优化辅助工具推荐

编程江湖

前端

通过 Serverless Devs 部署静态网站

刘宇

云计算 Serverless cicd Serverless Devs

基于Github Action的SAE自动化流程案例

刘宇

Serverless SAE Serverless Devs

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