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 IE中的DOM ready应用技巧
Jul 23 Javascript
javascript实现修改微信分享的标题内容等
Dec 11 Javascript
javascript中setTimeout使用指南
Jul 26 Javascript
基于javascript html5实现3D翻书特效
Mar 14 Javascript
AngularJS 实现JavaScript 动画效果详解
Sep 08 Javascript
微信小程序 闭包写法详细介绍
Dec 14 Javascript
setTimeout函数的神奇使用
Feb 26 Javascript
基于JavaScript实现微信抢红包功能
Jul 20 Javascript
AngularJS实现的锚点楼层跳转功能示例
Jan 02 Javascript
Webpack devServer中的 proxy 实现跨域的解决
Jun 15 Javascript
vue.js实现三级菜单效果
Oct 19 Javascript
vue配置型表格基于el-table拓展之table-plus组件
Apr 12 Vue.js
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 URL地址获取函数代码(端口等) 推荐
2010/05/15 PHP
php程序的国际化实现方法(利用gettext)
2011/08/14 PHP
Yaf框架封装的MySQL数据库操作示例
2019/03/06 PHP
phpstudy隐藏index.php的方法
2020/09/21 PHP
鼠标移动到一张图片时变为另一张图片
2006/12/05 Javascript
JavaScript中void(0)的具体含义解释
2007/02/27 Javascript
JQuery 风格的HTML文本转义
2009/07/01 Javascript
JavaScript/jQuery 表单美化插件小结
2012/02/14 Javascript
JS分页控件 可用于无刷新分页
2013/07/23 Javascript
jquery+json实现数据二级联动的方法
2015/11/28 Javascript
jQuery实现form表单基于ajax无刷新提交方法详解
2015/12/08 Javascript
jQuery EasyUI菜单与按钮详解
2016/07/13 Javascript
three.js快速入门【推荐】
2017/01/21 Javascript
利用vueJs实现图片轮播实例代码
2017/06/03 Javascript
vue实现前进刷新后退不刷新效果
2018/01/26 Javascript
JavaScript中click和onclick本质区别与用法分析
2018/06/07 Javascript
vue-router重定向不刷新问题的解决
2018/06/25 Javascript
JS无限级导航菜单实现方法
2019/01/05 Javascript
Ant Design Vue 添加区分中英文的长度校验功能
2020/01/21 Javascript
详解vue-router的导航钩子(导航守卫)
2020/11/02 Javascript
[01:09:24]Ti4开幕式
2014/07/19 DOTA
python字符串替换示例
2014/04/24 Python
深入讲解Python编程中的字符串
2015/10/14 Python
Python中time模块与datetime模块在使用中的不同之处
2015/11/24 Python
使用50行Python代码从零开始实现一个AI平衡小游戏
2018/11/21 Python
Win10里python3创建虚拟环境的步骤
2020/01/31 Python
Python基于数列实现购物车程序过程详解
2020/06/09 Python
Python命令行参数定义及需要注意的地方
2020/11/30 Python
Python实现一个论文下载器的过程
2021/01/18 Python
css3 box-shadow阴影(外阴影与外发光)图示讲解
2017/08/11 HTML / CSS
精美的手工家居和生活用品:Nkuku
2019/11/01 全球购物
金额转换,阿拉伯数字的金额转换成中国传统的形式如:(¥1011)-> (一千零一拾一元整)输出
2015/05/29 面试题
爱心捐款倡议书
2014/04/14 职场文书
小学教师节活动总结
2015/03/20 职场文书
红色经典观后感
2015/06/18 职场文书
Python绘制散乱的点构成的图的方法
2022/04/21 Python