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 开发带来的一些便利。

时间: 2024-11-09 04:34:49

ES6+ 开发 React 组件的相关文章

结合 ES6+ 开发 React 组件

这是 Steven Luscher 写的一篇关于 React 的文章,Steven Luscher 擅长使用 React 和 GraphQL 构建应用. 原文地址:http://babeljs.io/blog/2015/06/07/react-on-es6-plus/ 当重新设计 Instagram Web 的时候,使用了一些 ES6+ 的特性来编写 React 组件.在这里简要的说一下这些语言新特性对 React 应用的开发有什么影响,这些 ES6+ 特性使得 React 开发更简单更有趣.

react组件化开发发布到npm

1.项目目录 build:webpack打包用(开发环境.发布环境) example:开发环境的模板页 lib:打包好的文件夹(用于发布到npm上) src:想要封装的公共组件 .babelrc:处理es6语法 package.json:打包的依赖文件,管理项目模块包 开发环境配置(webpack.dev.config.js) const path = require('path') const htmlWebpackPlugin = require('html-webpack-plugin')

sublime +react+es6开发环境

Babel Sublime3才有的插件,支持ES6.JSX语法高亮. 菜单->View->Syntax->Open all with current extension as...->Babel->JavaScript(Babel) 高亮了有木有.   Babel Babel-Sublime插件很好的支持了JSX语法的高亮显示,连包裹在组件中的HTML标签都能实现高亮显示,具体的插件安装以及设置方法就不多说了,自行看GitHub上的介绍吧,很简单. //支持的代码片段如下 c

webpack+react+redux+es6开发模式

一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入门教程   redux middleware 详解   Redux研究 React 入门实例教程 webpack学习demo NPM 使用介绍 三.工程搭建 之前有写过 webpack+react+es6开发模式 ,文章里介绍了一些简单的配置,欢迎访问. 1.可以npm init, 创建一个新的工程

Electron + React + Node.js + ES6 开发本地 App

Electron + React + Node.js + ES6 开发本地 App 1.概述 近来工作上需要做一款 PC 上的软件,这款软件大体来讲是类似 PPT 的一款课件制作软件.由于我最近几年专注于移动 App 的开发,对 PC 端开发的了解有些滞后.所以我首先需要看看,在 PC 上采用什么框架能够顺利完成我的工作. 我的目标是,在完成这款软件的同时能够顺便学习一下比较流行的技术.在经过前期技术调研后,我明确了实现这款软件所需要的技术条件: 不采用 C++ 方面的类库,比如 MFC.Qt.

React组件开发注意事项

0.state的设定原则,如果render里用不到,则就不应该是一个state. 1.数组遍历时,用每一条数据的唯一标识作为key,尽量不要使用遍历的索引值作为key,如果它们从不重新排序,它们工作也很好,但是如果存在重新排序,性能将会很差. 2.处理事件,推荐使用属性初始化语法,如下: class LoggingButton extends React.Component { // 这个语法确保 `this` 绑定在 handleClick 中. // 警告:这是 *实验性的* 语法. han

react组件开发规范(一)

这是通过修改项目运行在Google上时的警告,总结的的部分react组件开发规范: (1)编写组件时,一定要写PropTypes,切莫为了省事儿而不写! 如果一个Props不是required,一定在getDefaultProps中设置它: React.PropTypes主要用来验证组件接收到的props是否为正确的数据类型,如果不正确,控制台(console)中就会出现对应的警告(warning). 所以,为了规范我们开发,减少不必要的警告,这个要注意写上,而且保证类型写对. (2)map遍历

React使用ES6语法重构组件代码

首次使用react,要注意react不同版本库,是ES5还是ES6的写法,如何做到统一.下面对于ES6语法重构组件的代码如下:(1)原始代码: <script type="text/babel">var destination=document.querySelector("#root");var LightningCounter=React.createClass({getInitialState:function(){return {strickes

React组件开发

目录: 属性:props 内联样式 状态记忆 : state 生命周期 访问DOM 表单输入 承接快速入门篇:http://www.cnblogs.com/jasonnode/p/4444504.html 属性 : props 组件应该提供一些属性供开发者在不同的场景下可以对组件实例元素的行为 外观进行调整,这样可以提高组件的利用效率. 在React中,使用props字段访问实例元素的属性. 例如,在下面的JSX片段中,EzLampComp组件的实例元素有一个属性onoff: React.ren