Mar 9

使用ES6开发React 不指定

chirs , 20:19 , 歪布天地 » REACT , 评论(0) , 引用(0) , 阅读(569) , Via 本站原创 | |
开发React项目使用ES6的语法会带来很多便利。

Class

使用ES6语法,定义React组件时候使用class关键字代替ES5中的React.createClass方法,可以通过继承React.Component定义一个React组件。
class MyReact extends React.Component {
  render() {
    return (
      <h2>Hello React!</h2>
    );
  }
}

现在定义React组件的时候,你有多了一种选择,ES5或ES6写法

对于同一个组件,不同写法如下。
//ES5定义React组件
var MyReact = React.createClass({
  handleChange: function() {

  },
  render: function() {

  }
});

//ES6定义React组件
class MyReact extends React.Component {
  handleChange() {

  }

  render() {

  }
}

通过ES6语法定义React组件,我们可以少写两个括号,一个后分号,省略了方法声明时的冒号及function关键字等。

当使用class定义React组件时,所有的生命周期方法都可以使用,class的constructor方法可以替代componentWillMount方法。
//ES5定义React组件
var MyReact = React.createClass({
  componentWillMount: function() {

  }
});

//ES6定义React组件
class MyReact extends React.Component {
  constructor(props) {
    super(props);
  }
}

属性初始化

在ES6的class里面,prop types和props的默认值是作为其静态属性的。prop types,默认props及组件的初始state可以使用ES7的属性初始化(property initializers)定义。
//ES5
var MyReact = React.createClass({
  getDefaultProps: function() {
    return {
      name: 'React'
    }
  },
  getInitialState: function() {
    return {
      loading: false
    }
  },
  propTypes: {
    name: React.PropTypes.string.isRequired,
    loading: React.PropTypes.bool.isRequired
  }
});

//ES6
class MyReact extends React.Component {
  static defaultProps = {
    name: 'React'
  }

  static propTypes = {
    name: React.PropTypes.string.isRequired,
    loading: React.PropTypes.string.isRequired
  }

  state = {
    loading: this.props.name
  }
}

ES7的初始化操作是在构造函数中,即引用的是类的构造函数中的实例。因此state的初始值仍可以依赖this.props。不在需要在getter方法中定义默认props和state对象了。

箭头函数

使用React.createClass方法定义组件的时候,组件的实例方法完成一些额外的绑定工作,在它们内部,this关键字引用的组件实例会有问题。
//this自动绑定
var MyReact = React.crateClass({
  handleChange: function() {
    //this引用的组件实例
    this.setState({
      loading: true
    })
  }
})[code]
不使用React.createClass方法,使用ES6的class语法定义组件时候,当需要时候我们可以手动绑定实例方法。
[code]//需要时候手动绑定
class MyReact extends React.Component {
  constructor(props) {
    super(props);
    //onChange与组件实例手动绑定
    this.onChange = this.onChange.bind(this);
  }
  onChange(state) {
    //this引用的是组件实例
    this.setState(state);
  }
}

幸运的是通过结合ES6的两个功能:箭头函数和属性初始化,绑定到组件实例变得轻而易举。
  onChange = (state) => {
    //this引用的是组件实例
    this.setState(state);
  }
}

ES6箭头函数和其代码体共享同一个this,ES7的属性初始化在同一作用域。

动态属性名和模板字符串

给一个对象动态添加属性。
var MyReact = React.createClass({
  onChange: function(inputName, e) {
    var stateToSet = {};
    stateToSet[inputName + 'value'] = e.target.value;
    this.setState(stateToSet);
  }
});

当我们要动态添加的对象属性名称由运行时JavaScript表达式决定时候,我们使用模板字符串来设置属性。
class MyReact extends React.Component {
  onChange(inputName, e) {
    this.setState({
      [`${inputName}value`]: e.target.value
    });
  }
}

解构与传播属性

通常,在编写组件的时候,我们可能都会想着把父组件的props传递给子组件,但并不是所有的props。结合ES6的解构和JSX传播属性,很容易实现该功能。
class MyReact extends React.Component {
  render() {
    //...others表示除cname外的其它属性
    const { cname, ...others} = this.props;

    return (
      <div className={cname}>
        <Children {...others} />
      </div>
    );
  }
}
Tags: , , ,
发表评论
表情
emotemotemotemotemot
emotemotemotemotemot
emotemotemotemotemot
emotemotemotemotemot
emotemotemotemotemot
打开HTML
打开UBB
打开表情
隐藏
记住我
昵称   密码   游客无需密码
网址   电邮   [注册]