React.js中常用的ES6写法总结(推荐)


Posted in Javascript onMay 09, 2017

一 模块

1 引入模块以便使用

用import实现:

import '模块文件地址'
import 组件 from '模块文件地址'

2 导出模块

用export default实现:

export default class MyComponent extends Component{
  ...
}

引用:

import MyComponent from './MyComponent';

二 组件

1 定义组件

通过定义一个继承自React.Component的class来定义一个组件类:

class Photo extends React.Component {
  render() {
    ...
  }
}

2 定义组件方法

直接用名字(){},很像Java定义类方法的写法:

class Photo extends React.Component {
  componentWillMount() {

  }
  render() {
    return (
      <Image source={this.props.source} />
    );
  }
}

3 定义组件的属性类型和默认属性

统一使用static成员来实现:

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,
  }; // 注意这里有分号
  render() {
    return (
      <View />
    );
  } // 注意这里既没有分号也没有逗号
}

注意: 对React而言,static成员在IE10及之前版本不能被继承,而在IE11和其它浏览器上可以,有时会带来一些问题。React Native则不用担心这个问题。

4 初始化STATE

在构造函数中初始化(这样可以根据需要做一些计算):

class Video extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      loopsRemaining: this.props.maxLoops,
    };
  }
}

5 把方法作为回调提供并使用

ES5下可以这么做:

//ES5
var PostInfo = React.createClass({
  handleOptionsButtonClick: function(e) {
    // Here, 'this' refers to the component instance.
    this.setState({showOptionsModal: true});
  },
  render: function(){
    return (
      <TouchableHighlight onPress={this.handleOptionsButtonClick}>
        <Text>{this.props.label}</Text>
      </TouchableHighlight>
    )
  },
});

在ES5下,React.createClass会把所有的方法都bind一遍,这样可以提交到任意的地方作为回调函数,而this不会变化。但官方现在认为这是不标准、不易理解的。

ES6下,需要通过bind来绑定this引用,或者使用箭头函数(它会绑定当前scope的this引用)来调用:

//ES6
class PostInfo extends React.Component
{
  handleOptionsButtonClick(e){
    this.setState({showOptionsModal: true});
  }
  render(){
    return (
      <TouchableHighlight 
        onPress={this.handleOptionsButtonClick.bind(this)}
        onPress={e=>this.handleOptionsButtonClick(e)}
        >
        <Text>{this.props.label}</Text>
      </TouchableHighlight>
    )
  },
}

箭头函数是在这里定义了一个临时的函数,箭头函数的箭头=>之前是一个空括号、单个的参数名、或用括号括起的多个参数名,而箭头之后可以是一个表达式(作为函数的返回值),或者是用花括号括起的函数体(需要自行通过return来返回值,否则返回的是undefined)。

即:箭头函数箭头前是参数,箭头后是函数体或返回值。

注意:

不论是bind还是箭头函数,每次被执行都返回的是一个新的函数引用,因此如果你还需要函数的引用去做一些别的事情(譬如卸载监听器),那么必须自己保存这个引用:

// 错误的做法
class PauseMenu extends React.Component{
  componentWillMount(){
    AppStateIOS.addEventListener('change', this.onAppPaused.bind(this));
  }
  componentDidUnmount(){
    AppStateIOS.removeEventListener('change', this.onAppPaused.bind(this));
  }
  onAppPaused(event){
  }
}
// 正确的做法
class PauseMenu extends React.Component{
  constructor(props){
    super(props);
    this._onAppPaused = this.onAppPaused.bind(this);//注意这里
  }
  componentWillMount(){
    AppStateIOS.addEventListener('change', this._onAppPaused); //还有这里
  }
  componentDidUnmount(){
    AppStateIOS.removeEventListener('change', this._onAppPaused);
  }
  onAppPaused(event){
  }
}

三 Mixins

ES5下,经常使用mixin来为类添加一些新的方法,如PureRenderMixin:

var PureRenderMixin = require('react-addons-pure-render-mixin');
React.createClass({
 mixins: [PureRenderMixin],

 render: function() {
  return <div className={this.props.className}>foo</div>;
 }
});

但React官方已经不再打算在ES6里继续推行Mixin,官方推荐,对于库编写者而言,应尽快放弃Mixin的编写方式,推荐一种新的编码方式:

//Enhance.js
import { Component } from "React";

export var Enhance = ComposedComponent => class extends Component {
  constructor() {
    this.state = { data: null };
  }
  componentDidMount() {
    this.setState({ data: 'Hello' });
  }
  render() {
    return <ComposedComponent {...this.props} data={this.state.data} />;
  }
};
//HigherOrderComponent.js
import { Enhance } from "./Enhance";

class MyComponent {
  render() {
    if (!this.data) return <div>Waiting...</div>;
    return <div>{this.data}</div>;
  }
}

export default Enhance(MyComponent); // Enhanced component

用一个“增强函数”,来为某个类增加一些方法,并且返回一个新类,这无疑能实现mixin所实现的大部分需求。

四 解构与属性延展

结合使用ES6+的解构和属性延展,在给子组件传递一批属性更为方便了。下面的例子把className以外的所有属性传递给div标签:

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>
    );
  }
}

下面这种写法,则是传递所有属性的同时,用新的className值进行覆盖({…this.props}写在前边):

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

这个例子则相反,如果属性中没有包含className,则提供默认的值,而如果属性中已经包含了,则使用属性中的值({…this.props}写在后边)

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript里的条件判断
Feb 27 Javascript
JavaScript 常见对象类创建代码与优缺点分析
Dec 07 Javascript
javascript函数中参数传递问题示例探讨
Jul 31 Javascript
node中socket.io的事件使用详解
Dec 15 Javascript
基于jquery实现图片放大功能
May 07 Javascript
卸载安装Node.js与npm过程详解
Aug 15 Javascript
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
Jan 21 jQuery
基于Fixed定位的框选功能的实现代码
May 13 Javascript
vue-resourc发起异步请求的方法
Feb 11 Javascript
解决vue项目router切换太慢问题
Jul 19 Javascript
在vue中axios设置timeout超时的操作
Sep 04 Javascript
js实现点击烟花特效
Oct 14 Javascript
js上传图片预览的实现方法
May 09 #Javascript
react开发中如何使用require.ensure加载es6风格的组件
May 09 #Javascript
Vue2单一事件管理组件通信
May 09 #Javascript
react-router实现按需加载
May 09 #Javascript
BootStrap表单时间选择器详解
May 09 #Javascript
兼容浏览器的js事件绑定函数(详解)
May 09 #Javascript
JS触摸与手势事件详解
May 09 #Javascript
You might like
支持中文的php加密解密类代码
2011/11/27 PHP
PHP与javascript实现变量交互的示例代码
2013/07/23 PHP
WordPress后台中实现图片上传功能的实例讲解
2016/01/11 PHP
PHP实现Markdown文章上传到七牛图床的实例内容
2020/02/11 PHP
popdiv
2006/07/14 Javascript
js简单实现删除记录时的提示效果
2013/12/05 Javascript
谷歌浏览器不支持showModalDialog模态对话框的解决方法
2014/09/22 Javascript
jQuery模拟新浪微博首页滚动效果的方法
2015/03/11 Javascript
jquery实现可关闭的倒计时广告特效代码
2015/09/02 Javascript
AngularJS 依赖注入详解及示例代码
2016/08/17 Javascript
jquery点击切换背景色的简单实例
2016/08/25 Javascript
详解jQuery选择器
2016/12/21 Javascript
如何用Node写页面爬虫的工具集
2018/10/26 Javascript
vue项目中使用vue-i18n报错的解决方法
2019/01/13 Javascript
JS实现横向跑马灯效果代码
2020/04/20 Javascript
python实现定制交互式命令行的方法
2014/07/03 Python
Python实现从url中提取域名的几种方法
2014/09/26 Python
Python回调函数用法实例详解
2015/07/02 Python
python实现闹钟定时播放音乐功能
2018/01/25 Python
Python实现利用163邮箱远程关电脑脚本
2018/02/22 Python
Pandas之Dropna滤除缺失数据的实现方法
2019/06/25 Python
python库matplotlib绘制坐标图
2019/10/18 Python
如何使用Python抓取网页tag操作
2020/02/14 Python
7款设计巧妙的css3飘带状3D立体效果的导航菜单和表单窗口
2013/02/04 HTML / CSS
购买大码女装:Lane Bryant
2016/09/07 全球购物
Gap工厂店:Gap Factory
2017/11/02 全球购物
澳大利亚手表品牌:Time IV Change
2018/10/06 全球购物
css animation配合SVG制作能量流动效果
2021/03/24 HTML / CSS
五一劳动节活动记录
2014/03/23 职场文书
自我鉴定总结
2014/03/24 职场文书
授权收款委托书范本
2014/10/10 职场文书
群众路线自查自纠工作情况报告
2014/10/28 职场文书
2014年前台个人工作总结
2014/11/14 职场文书
2014年勤工助学工作总结
2014/11/24 职场文书
oracle索引总结
2021/09/25 Oracle
使用 Koa + TS + ESLlint 搭建node服务器的过程详解
2022/05/30 NodeJs