React+ES6的语法坑

组件定义propTypes and getDefaultPropsgetInitialStatethisMixins

组件定义

最早的时候我们使用 React.createClass 来进行组建的构建。

import React from 'react'; const Contacts = React.createClass({ render() { return ( <div></div> ); } }); export default Contacts;

现在我们可以用ES6中的继承 extend 来写。

import React from 'react'; class Contacts extends React.Component { constructor(props) { super(props); } render() { return ( <div></div> ); } } export default Contacts;

propTypes and getDefaultProps

这里有很多重要的变化包括默认属性，设置初试状态。在 React.createClass 中，我们可以通过propTypes 来定义属性，通过 getDefaultProps 来返回我们需要默认设置的值。

import React from 'react'; const Contacts = React.createClass({ propTypes: { }, getDefaultProps() { return { }; }, render() { return ( <div></div> ); } }); export default Contacts;

而使用React.Component则可以使用 propTypes 作为一个类的基本属性，这样的改变更加有助于清晰的API设计，同样的设置默认值也变成了一个属性 defaultProps.

import React from 'react'; class Contacts extends React.Component { constructor(props) { super(props); } render() { return ( <div></div> ); } } Contacts.propTypes = { }; Contacts.defaultProps = { }; export default Contacts;

getInitialState

在老版本的react中我们通过使用 getInitialState 来设置一些初试状态。 而在使用新的继承来做的话，我们可以直接在 constructor 中来进行赋值声明。

import React from 'react'; class Contacts extends React.Component { constructor(props) { super(props); this.state = { }; } render() { return ( <div></div> ); } } export default Contacts;

this

使用 React.createClass会正确的自动绑定this到当前执行的函数中去。但是这个在ES6中会有些不一样。我们需要在contructor中执行bind函数或者使用ES6箭头函数。

import React from 'react'; class Contacts extends React.Component { constructor(props) { super(props); this.handleClick = this.handleClick.bind(this); } handleClick() { console.log(this); // React Component instance } render() { return ( <div onClick={this.handleClick}></div> ); } } export default Contacts;

Mixins

在老版本中我们可以这样使用 mixins ，

import React from 'react'; var SomeMixin = { doSomething() { } }; const Contacts = React.createClass({ mixins: [SomeMixin], handleClick() { this.doSomething(); // use mixin }, render() { return ( <div onClick={this.handleClick}></div> ); } }); export default Contacts;

而在使用ES6创建类的时候，不再支持 minxins。