ES5下的React

按照官方推荐的思路，React使用标准的ES6标准的语法。比如说创建一个类：

class Greeting extends React.Component {

  render() {

    return <h1>Hello, {this.props.name}</h1>;

  }

}

但是ES5依然深入人心。用的是React.creatCalss();方法。

    var Greeting=React.createClass({

        render:function(){

          return (

            <h1>Hello,{this.props.name}</h1>

          );

        }

      });

二者是如此的相似，但是还是有若干差别。现将官网内容翻译如下，相信无论是ES5或是ES6的使用者，都会有所裨益。

`propTypes`和`defaultProps`的声明方式

在ES6的语法下，propTypes和defaultProps是以属性的形式定义（类似写一个原生对象的属性）：

class Greeting extends React.Component {

  // ...

}

Greeting.propTypes = {

  name: React.PropTypes.string//定义为属性的数据类型

};

Greeting.defaultProps = {

  name: 'Mary'//定义属性内容

};

但是你用React.creatClass(),它的参数是一个类似json的对象，所以应该这么写：

var Greeting = React.createClass({

  propTypes: {

    name: React.PropTypes.string

  },

  getDefaultProps: function() {

    return {

      name: 'Mary'

    };

  },

  // ...

});

设置初始状态：

ES6的初始状态可以使用constructor函数：

class Counter extends React.Component {

  constructor(props) {

    super(props);//绑定

    this.state = {count: props.initialCount};

  }

  // ...

}

但是如果你使用ES5，操作应该是setInitialState方法,props都得有this：

React.createClass({

    getInitialState:function(){

        return {

            count:this.props.initialCount

        };

    }

});

自动绑定

在Es6声明的React组件中，方法都符合ES6类的规则，这意味着它不会自动绑定this关键字。因此你需要在constructor函数的方法加.bind(this)。

class SayHello extends React.Component {

  constructor(props) {

    super(props);

    this.state = {message: 'Hello!'};

    // 关键语句！

    this.handleClick = this.handleClick.bind(this);

  }

  handleClick() {

    alert(this.state.message);

  }

  render() {

    // 由于 `this.handleClick` 已经被绑定, 所以可以作为事件处理方法了！

    return (

      <button onClick={this.handleClick}>

        Say hello

      </button>

    );

  }

}

而在ES5语法下，就不必绑定了，因为它给所有的方法都绑定了this：

var SayHello = React.createClass({

  getInitialState: function() {

    return {message: 'Hello!'};

  },

  handleClick: function() {

    alert(this.state.message);

  },

  render: function() {

    return (

      <button onClick={this.handleClick}>

        Say hello

      </button>

    );

  }

});

注：类似定时器，函数套函数这样的方法，this指向window，还是需要注意一下。

尽管ES6的this弄起来比较麻烦，但对于大型应用构建时，这是一个明显的优势——this就不容易出错。

当然，如果你实在是不爽那些冗余bind(this)，可以采用Babel语法——Class Properties ，也不必写在constructor函数里面了。

  // 注意，此语法还不成熟！

  // 用箭头绑定方法的this

  handleClick = () => {

    alert(this.state.message);

  }

以后有可能不支持这种写法。

如果你想百分百安全，省的去维护，可以：

继续使用React.createClass();
老老实实地把方法写在constructor函数里面，再绑定this;
在渲染中使用箭头函数, e比如：onClick={(e) => this.handleClick(e)}

Mixins

ES6运行不支持任何mixin，所以，放弃吧。

同时，在codebase使用mixin，已经发现相当多的问题。因此不建议在新的代码中使用mixin。

有时候会遇到多个组件共享一个方法的情况(术语叫横切关注点)，React.createClass允许你使用mixins机制。

最常见的情况是一个组件想通过定时器更新自身的状态，定时器setInteval用起来是非常容易，但是一旦你不用，记得关掉它节省内存。React的生命周期方法可以让你知道组件何时生成和销毁。现在基于生命周期的方法创建一个简单的mixin：

当你的定时器组件销毁时，自动清理掉它：

// 通用的定时器功能。

var SetIntervalMixin = {

  componentWillMount: function() {

    this.intervals = [];

  },

  setInterval: function() {

    this.intervals.push(setInterval.apply(null, arguments));

  },

  componentWillUnmount: function() {

    this.intervals.forEach(clearInterval);

  }

};

var TickTock = React.createClass({

  mixins: [SetIntervalMixin], // Use the mixin

  getInitialState: function() {

    return {seconds: 0};

  },

  componentDidMount: function() {

    this.setInterval(this.tick, 1000); // Call a method on the mixin

  },

  tick: function() {

    this.setState({seconds: this.state.seconds + 1});

  },

  render: function() {

    return (

      <p>

        React has been running for {this.state.seconds} seconds.

      </p>

    );

  }

});

巴特西

ES5下的React

`propTypes`和`defaultProps`的声明方式

设置初始状态：

自动绑定

Mixins

最新文章

热门文章

巴特西

ES5下的React

propTypes和defaultProps的声明方式

设置初始状态：

自动绑定

Mixins

最新文章

热门文章

`propTypes`和`defaultProps`的声明方式