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 相关文章推荐
jquery 学习笔记 传智博客佟老师附详细注释
Sep 12 Javascript
从js向Action传中文参数出现乱码问题的解决方法
Dec 29 Javascript
21个JavaScript事件(Events)属性汇总
Dec 02 Javascript
JS实现进入页面时渐变背景色的方法
Feb 25 Javascript
浅谈JavaScript 浏览器对象
Jun 03 Javascript
jQuery web 组件 后台日历价格、库存设置的代码
Oct 14 Javascript
原生javascript实现的全屏滚动功能示例
Sep 19 Javascript
AngularJS自定义表单验证功能实例详解
Aug 24 Javascript
从Vuex中取出数组赋值给新的数组,新数组push时报错的解决方法
Sep 18 Javascript
详解如何创建并发布一个 vue 组件
Nov 08 Javascript
js实现跟随鼠标移动的小球
Aug 26 Javascript
React Native登录之指纹登录篇的示例代码
Nov 03 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文件下载类
2006/12/06 PHP
PHP session有效期session.gc_maxlifetime
2011/04/20 PHP
给初学者的30条PHP最佳实践(荒野无灯)
2011/08/02 PHP
隐性调用php程序的方法
2015/06/13 PHP
PHP提高编程效率的20个要点
2015/09/23 PHP
laravel框架使用FormRequest进行表单验证,验证异常返回JSON操作示例
2020/02/18 PHP
js prototype 格式化数字 By shawl.qiu
2007/04/02 Javascript
javascript中利用数组实现的循环队列代码
2010/01/24 Javascript
JavaScript Event学习第五章 高级事件注册模型
2010/02/07 Javascript
javascript中的关于类型转换的性能优化
2010/12/14 Javascript
Javascript调用C#代码
2011/01/17 Javascript
计算世界完全对称日的js代码,粗糙版
2011/11/04 Javascript
jQuery选择器中含有空格的使用示例及注意事项
2013/08/25 Javascript
js函数定时器实现定时读取系统实时连接数
2014/04/30 Javascript
jQuery动画与特效详解
2015/02/01 Javascript
分享一则JavaScript滚动条插件源码
2015/03/03 Javascript
jQuery插件简单实现方法
2015/07/18 Javascript
Bootstrap每天必学之缩略图与警示窗
2015/11/29 Javascript
javascript HTML+CSS实现经典橙色导航菜单
2016/02/16 Javascript
解决BootStrap Fileinput手机图片上传显示旋转问题
2017/06/01 Javascript
vue中实现移动端的scroll滚动方法
2018/03/03 Javascript
JavaScript栈和队列相关操作与实现方法详解
2018/12/07 Javascript
React组件设计模式之组合组件应用实例分析
2020/04/29 Javascript
Python3 加密(hashlib和hmac)模块的实现
2017/11/23 Python
python 魔法函数实例及解析
2019/09/25 Python
python中的selenium安装的步骤(浏览器自动化测试框架)
2020/03/17 Python
完美解决IE8下不兼容rgba()的问题
2017/03/31 HTML / CSS
Super-Pharm波兰:药房和香水在一个地方
2020/08/18 全球购物
校园环保标语
2014/06/13 职场文书
国庆横幅标语
2014/10/08 职场文书
运动会广播稿200米(5篇)
2014/10/15 职场文书
颐和园的导游词
2015/01/30 职场文书
个人优缺点总结
2015/02/28 职场文书
班级管理经验交流材料
2015/11/02 职场文书
springboot入门 之profile设置方式
2022/04/04 Java/Android
python和C/C++混合编程之使用ctypes调用 C/C++的dll
2022/04/29 Python