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

一 模块

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>

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

(0)

相关推荐

  • 深入理解React中es6创建组件this的方法

    首发于:https://mingjiezhang.github.io/. 在JavaScript中,this对象是运行时基于函数的执行环境(也就是上下文)绑定的. 从react中的demo说起 Facebook最近一次更新react时,将es6中的class加入了组件的创建方式当中.Facebook也推荐组件创建使用通过定义一个继承自 React.Component 的class来定义一个组件类.官方的demo: class LikeButton extends React.Component

  • 利用ES6语法重构React组件详解

    一.创建组件 ES6 class创建的组件语法更加简明,也更符合javascript.内部的方法不需要使用function关键字. React.createClass import React from 'react'; const MyComponent = React.createClass({ render: function() { return ( <div>以前的方式创建的组件</div> ); } }); export default MyComponent; Rea

  • React中ES5与ES6写法的区别总结

    前言 相信很多React的初学者都被ES6的问题迷惑:各路大神都建议我们直接学习ES6的语法(class Foo extends React.Component),然而网上搜到的很多教程和例子都是ES5版本的,所以很多人在学习的时候连照猫画虎都不知道怎么做.所以这篇文章就整理了一些ES5和ES6的写法对照表,希望大家以后读到ES5的代码,也能通过对照,在ES6下实现相同的功能.下面话不多说了,来看看详细的介绍吧. 模块 引用 在ES5里,如果使用CommonJS标准,引入React包基本通过re

  • react开发中如何使用require.ensure加载es6风格的组件

    其实用的babel,在浏览器端就应该可以加载,之前少了个default: require.ensure([],(require) => { let A = require('./a.js').default; }) 以下方式也可以,但是比较low,可以作废了: 1.问题提出:想通过require.ensure加载es6风格的模块? 2.出现问题:import方式本身就是静态设计方式.如果require进来的是commonjs模块或者amd则没问题,但项目只想es6一个书写风格,行吗? 遗憾的是:

  • 深入浅析react native es6语法

    react native是直接使用es6来编写代码,许多新语法能提高我们的工作效率 解构赋值 var { StyleSheet,Text,View } = React; 这句代码是ES6 中新增的解构(Destructuring)赋值语句.准许你获取对象的多个属性并且使用一条语句将它们赋给多个变量. 上面的代码等价于: var StyleSheet = React.StyleSheet; var Text = React.Text; var View = React.View 再看几个例子,以前

  • ES6下React组件的写法示例代码

    本文主要跟大家分享了ES6下React组件的写法示例,下面来一起看看详细的介绍: 一:定义React组件 class Hello extends React.Component { render() { return <h1>Hello, {this.props.value}</h1>; } } 二:声明prop类型与默认prop class Hello extends React.Component { // ... } Hello.propTypes = { value: Re

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

    一 模块 1 引入模块以便使用 用import实现: import '模块文件地址' import 组件 from '模块文件地址' 2 导出模块 用export default实现: export default class MyComponent extends Component{ ... } 引用: import MyComponent from './MyComponent'; 二 组件 1 定义组件 通过定义一个继承自React.Component的class来定义一个组件类: cl

  • js中常用的Tab切换效果(推荐)

    如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>tab</title> <style> *{margin:0; padding:0; list-style:none;} .box{ width: 1000px; overflow: hidden; margin:100px auto

  • 浅析JS中常用类型转换及运算符表达式

    JS中的常用类型转换(一般用强制转换): 1.强制转为整数:parseInt:写法:x = parseInt(x); 2.强制转换位小为:parseFloat:写法:x = parseFloat(x); 3.检测类型:x = parseInt(x);       alert(typeof(true)); JS中常用的运算符表达式: 1.逻辑运算符(布尔型):&& 并 :|| 或 :! 非 : 2.比较运算符:==(等于) :!=(不等于) : > :< :>=(大于等于)

  • Node.js 中常用内置模块(path 路径模块)

    目录 前言 路径拼接:join方法 获取文件名:basename方法 获取文件扩展名:extname方法 结语 前言 进行服务端开发,少不了对各种路径的处理,之前我们是简单粗暴的使用字符串的方法来对路径进行拼接或截取等操作. Node.js 官方为我们提供了一个专门用来处理路径的模块:path模块,这个模块提供了一系列的方法和属性,用来满足用户对路径的处理需求. 路径拼接:join方法 path模块中有一个join方法,能够非常智能的进行路径拼接: 使用path.join()方法,可以把多个路径

  • 浅谈react.js中实现tab吸顶效果的问题

    在react项目开发中有一个需求是,页面滚动到tab所在位置时,tab要固定在顶部. 实现的思路其实很简单,就是判断当滚动距离scrollTop大于tab距离页面顶部距离offsetTop时,将tab的position变为fixed. 在react中,我在state中设置一个navTop属性,切换这个属性的值为true或者false,然后tab标签使用classnames()这个方法来利用navTop的值添加类名fixed. 一开始我是这样写的: import cs from 'classnam

  • JS中常用的正则表达式

    以下收录一些我经常用到的正则表达式,因为工作场景中用到正则的地方几乎都跟validate插件的验证有关系,所以以下正则也是$.validator.addMethod() 的拓展: validate: http://jqueryvalidation.org/ 电话验证 /** * 手机 * */ $.validator.addMethod("isMobile", function (value, element) { var reg = /^((1[3-8][0-9])+\d{8})$/

  • Vue中foreach数组与js中遍历数组的写法说明

    Vue foreach数组与js中遍历数组的写法 场景 Vue中使用Axios发送get或者post请求,发送请求时需要在js中 对请求参数进行遍历并处理. 接收响应时需要对响应结果进行遍历和处理. 注意区分在vue和js中foreach数组的区别. 实现 在js中遍历数组 //定义班次详细数组 var bcglxiangxiList = new Array(); //定义班次详细对象 var bcxiangxi = {}; //循环传递的参数 bcglXiangXiListParam.forE

  • Vue.js 中的实用工具方法【推荐】

    收集日常开发中常用到的一些工具方法, 包含 vue 的公用过滤器.公用指令等 (PS: 懒人养成记) 公用自定义过滤器 import Vue from 'vue' import moment from 'moment' /** * @filter dateFormat 时间格式化 * @param {String, Date} value 可被 new Date 解析的字符串 * @param {String} formatStr moment 的 format 字符串 * 使用方法 {{ 20

  • 详解在React.js中使用PureComponent的重要性和使用方式

    一.介绍PureComponent React 15.3在2016.06.29发布了,这个版本最值得关注的是支持了 React.PureComponent ,它取代了之前的 pure-render-mixin .在本文中,我们将讨论 PureComponent 的重要性和使用场景. React.PureComponent最重要的一个用处就是优化React应用,这很容易快速地实现.使用 React.PureComponent 对性能的提升是非常可观的,因为它减少了应用中的渲染次数. PureCom

随机推荐