ES6+ 开发 React 组件

在这里简要的说一下这些语言新特性对 React 应用的开发有什么影响,这些 ES6+ 特性使得 React 开发更简单更有趣。

迄今为止,最能体现我们使用 ES6+ 来编写 React 组件的就是我们选择使用类定义语法。替代了使用 React.createClass 方法来定义一个组件,我们可以定义一个 bonafide ES6 类来扩展 React.Component:

1 2 3 4 5

class Photo extends React.Component {   render() {     return <img alt={this.props.caption} src={this.props.src} />;   } }

现在,你就会发现一个微妙的差异 —— 当使用定义类的时候语法更简洁:

1 2 3 4 5

// The ES5 way var Photo = React.createClass({   handleDoubleTap: function(e) { … },   render: function() { … }, });

1 2 3 4 5

// The ES6+ way class Photo extends React.Component {   handleDoubleTap(e) { … }   render() { … } }

值得关注的是,我们去掉了两个括号和一个分号,每个方法声明我们省略了一个冒号,一个关键字和一个分号。

当使用新的类定义时,所有的生命周期方法至少有一个是符合你期望的。类的 constructor 现在假设 role 之前是通过 componentWillMount 填充的:

1 2 3 4

// The ES5 way var EmbedModal = React.createClass({   componentWillMount: function() { … }, });

1 2 3 4 5 6 7

// The ES6+ way class EmbedModal extends React.Component {   constructor(props) {     super(props);     // Operations usually carried out in componentWillMount go here   } }

属性初始化程序

在 ES6+ 类的世界里,prop types 和 defaults live 在类自身作为静态属性。这些,在组件的初始化状态也是一样的,可以使用 ES7 property initializers 定义:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

// The ES5 way var Video = React.createClass({   getDefaultProps: function() {     return {       autoPlay: false,       maxLoops: 10,     };   },   getInitialState: function() {     return {       loopsRemaining: this.props.maxLoops,     };   },   propTypes: {     autoPlay: React.PropTypes.bool.isRequired,     maxLoops: React.PropTypes.number.isRequired,     posterFrameSrc: React.PropTypes.string.isRequired,     videoSrc: React.PropTypes.string.isRequired,   }, });

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

// The ES6+ way class Video extends React.Component {   static defaultProps = {     autoPlay: false,     maxLoops: 10,   }   static propTypes = {     autoPlay: React.PropTypes.bool.isRequired,     maxLoops: React.PropTypes.number.isRequired,     posterFrameSrc: React.PropTypes.string.isRequired,     videoSrc: React.PropTypes.string.isRequired,   }   state = {     loopsRemaining: this.props.maxLoops,   } }

ES7 属性初始化程序操作内部类的 constructor,this 指向 construction 的类实例,所以初始化状态可以依赖于 this.props。值得关注的是,我们不再定义 prop 默认值和使用 getter 函数初始化状态对象。

Arrow 函数

React.createClass 方法用来在你的组件实例方法中执行一些额外的绑定工作,为了确保 this 关键字会指向组件实例: 

1 2 3 4 5 6 7

// Autobinding, brought to you by React.createClass var PostInfo = React.createClass({   handleOptionsButtonClick: function(e) {     // Here, 'this' refers to the component instance.     this.setState({showOptionsModal: true});   }, });

自从我们不参与 React.createClass 方法,而是使用 ES6+ 类语法定义组件,看似需要手动绑定实例方法:

1 2 3 4 5 6 7 8 9 10 11 12

// Manually bind, wherever you need to class PostInfo extends React.Component {   constructor(props) {     super(props);     // Manually bind this method to the component instance...     this.handleOptionsButtonClick = this.handleOptionsButtonClick.bind(this);   }   handleOptionsButtonClick(e) {     // ...to ensure that 'this' refers to the component instance here.     this.setState({showOptionsModal: true});   } }

幸运的是,通过绑定两个 ES6+ 特性 – arrow functions 和属性初始化程序  – 可以选择绑定组件实例:

1 2 3 4 5

class PostInfo extends React.Component {   handleOptionsButtonClick = (e) => {     this.setState({showOptionsModal: true});   } }

ES6 的 arrow 函数体分享相同的词  this,用这来围绕他们的代码,这些可以达到我们预期的结果,也是 ES7 属性初始化程序在域内的方式。 Peek under the hood 来看看为什么能实现。

动态属性名称 & 模板字符串

其中一个对象常量增强是可以分配到一个派生属性名称。我们最初可能会像下面这样设置一些状态:

1 2 3 4 5 6 7

var Form = React.createClass({   onChange: function(inputName, e) {     var stateToSet = {};     stateToSet[inputName + 'Value'] = e.target.value;     this.setState(stateToSet);   }, });

现在,我们有能力构造通过一个运行时 JavaScript 表达式确定属性名称的对象。这里,我们使用了一个模板字符串来确定哪个属性设置状态:

1 2 3 4 5 6 7

class Form extends React.Component {   onChange(inputName, e) {     this.setState({       [`${inputName}Value`]: e.target.value,     });   } }

解构 & 传播属性

通常在编写组件的时候,我们可能想把大部分父组件的 props 传递给子组件,但不是所有。结合 ES6+ 解构和 JSX 传播属性,这个不需要多余的部分就能实现:

1 2 3 4 5 6 7 8 9 10 11 12 13 14

class AutoloadingPostsGrid extends React.Component {   render() {     var {       className,       ...others,  // contains all properties of this.props except for className     } = this.props;     return (       <div className={className}>         <PostsGrid {...others} />         <button onClick={this.handleLoadMoreClick}>Load more</button>       </div>     );   } }

我们可以结合 JSX 传播属性和常规属性,利用一个简单的优先原则实现 overrides 和 defaults。这个元素会要求 className “override” 甚至是在 this.props 存在 className 属性: 

1 2 3

<div {...this.props} className="override">    …  </div>

这个元素常规来说需要 className “base” ,除非 this.props 有 className 属性覆盖: 

1 2 3

<div className="base" {...this.props}>    …  </div>

希望大家能享受 ES6+ 语言特性给 React 开发带来的一些便利。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏hrscy

202 - Swift 的核心是什么?

不知道大家有没有看过 WWDC 2015 的视频,其中有一个编号为 408 的视频解释了这个问题,下面是视频链接:Protocol-Oriented Progr...

882
来自专栏前端知识分享

第77天:jQuery事件绑定触发

返回值不同,.height()方法返回的是 数字类型(20),.css(“height”)返回的是字符串类型(20px),因此.height()方法常用在参与数...

1013
来自专栏LIN_ZONE

css 中 zoom和transform:scale的区别(转载)

还在几年前,zoom还只是IE浏览器自己私有的玩具,但是,现在,除了FireFox浏览器,其他,尤其Chrome和移动端浏览器已经很好支持zoom属性了:

613
来自专栏魏琼东

基于DotNet构件技术的企业级敏捷软件开发平台 - AgileEAS.NET - 对象控制反转

     控制反转,即IOC(Inversion of Control),也叫反转模式,也称依赖注入DI(Dependency Injection)模式,关于此...

1888
来自专栏哈雷彗星撞地球

iOS动画三板斧(一)--UIView动画前言UIView 动画

iOS 精致的app,离不开酷炫合宜的动画。而iOS中的动画实现也有多种不同的方式。今天就来介绍一下iOS中的动画。本篇是第一篇,就讲一下最简单的动画实现方式,...

601
来自专栏web

关于border边框重叠颜色设置问题

1334
来自专栏程序员的知识天地

高大上的微信小程序中渲染html内容—技术分享

大部分Web应用的富文本内容都是以HTML字符串的形式存储的,通过HTML文档去展示HTML内容自然没有问题。但是,在微信小程序(下文简称为「小程序」)中,应当...

901
来自专栏贾鹏辉的技术专栏@CrazyCodeBoy

React Native之React速学教程(下)

React Native之React速学教程(下) 本文出自《React Native学习笔记》系列文章。 React Native是基于React的,在开发R...

2835
来自专栏互联网杂技

前端兼容性问题总结

css兼容性问题 1、标签,不加样式控制的情况下,各自的margin 和padding差异较大。 解决方案:css里 *{margin:0;pad...

3305
来自专栏肖洒的博客

前端入门学习--CSS

样式表定义如何显示 HTML 元素,就像 HTML 3.2 的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 ...

772

扫码关注云+社区