React高级指南(六)【React Without ES6】

前端之家收集整理的这篇文章主要介绍了React高级指南(六)【React Without ES6】前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
@H_301_0@

React Without ES6

通常情况下你可以用纯JavaScript类定义一个组件:

  1. class Greeting extends React.Component {
  2. render() {
  3. return <h1>Hello,{this.props.name}</h1>;
  4. }
  5. }

如果你不使用ES6,你可以使用React.createClass来定义:

  1. var Greeting = React.createClass({
  2. render: function() {
  3. return <h1>Hello,{this.props.name}</h1>;
  4. }
  5. });

除了部分特性,ES6中类的API非常类似于函数React.createClass

声明属性类型和默认属性

函数和class类中,propTypesdefaultProps被定义为组件内部的属性:

  1. class Greeting extends React.Component {
  2. // ...
  3. }
  4.  
  5. Greeting.propTypes = {
  6. name: React.PropTypes.string
  7. };
  8.  
  9. Greeting.defaultProps = {
  10. name: 'Mary'
  11. };

React.createClass()函数中,你需要在所传递的对象中定义propTypes属性getDefaultProps()方法:

  1. var Greeting = React.createClass({
  2. propTypes: {
  3. name: React.PropTypes.string
  4. },getDefaultProps: function() {
  5. return {
  6. name: 'Mary'
  7. };
  8. },// ...
  9.  
  10. });

设置初始化状态

在ES6类中,你可以在构造函数通过给this.state辅助定义初始状态:

  1. class Counter extends React.Component {
  2. constructor(props) {
  3. super(props);
  4. this.state = {count: props.initialCount};
  5. }
  6. // ...
  7. }

React.createClass()函数中,你可以使用getInitialState方法返回初始状态:

  1. var Counter = React.createClass({
  2. getInitialState: function() {
  3. return {count: this.props.initialCount};
  4. },// ...
  5. });

自动绑定

在以ES6 class方式声明的React组件中,方法遵循与普通ES6的class中相同的语义。也就是说方法不会自动绑定到实例中,你必须在构造函数中显式的使用.bind(this):

  1. class SayHello extends React.Component {
  2. constructor(props) {
  3. super(props);
  4. this.state = {message: 'Hello!'};
  5. // This line is important!
  6. this.handleClick = this.handleClick.bind(this);
  7. }
  8.  
  9. handleClick() {
  10. alert(this.state.message);
  11. }
  12.  
  13. render() {
  14. // Because `this.handleClick` is bound,we can use it as an event handler.
  15. return (
  16. <button onClick={this.handleClick}> Say hello </button> ); } }

React.createClass()方式中,并不需要这么做,因为方法可以自动绑定。

  1. var SayHello = React.createClass({
  2. getInitialState: function() {
  3. return {message: 'Hello!'};
  4. },handleClick: function() {
  5. alert(this.state.message);
  6. },render: function() {
  7. return (
  8. <button onClick={this.handleClick}> Say hello </button> ); } });

这意味着在使用ES6 class方式下对于事件处理函数你需要编写更多的样本代码,但是在大型应用中具有更好的性能

如果你不想使用样本代码,你可以使用Babel中实验性*提案

  1. class SayHello extends React.Component {
  2. constructor(props) {
  3. super(props);
  4. this.state = {message: 'Hello!'};
  5. }
  6. // WARNING: this Syntax is experimental!
  7. // Using an arrow here binds the method:
  8. handleClick = () => {
  9. alert(this.state.message);
  10. }
  11.  
  12. render() {
  13. return (
  14. <button onClick={this.handleClick}> Say hello </button> ); } }

请注意,上述语法是实验性的,可能将来会发生改变,或者这个提案可能不会纳入语言范畴。

如果你想更稳妥的方法,你有一下的选择:

  • 在构造函数中绑定方法
  • 使用箭头函数 onClick={(e) => this.handleClick(e)}.
  • 使用 React.createClass().

Mixins

注意:

ES6是不支持mixin的,因此,当你用ES6 class编写React程序时是不支持mixins的

我们也在使用mixins的情况下发现了部分问题,所以我们不推荐目前使用

以下部分仅用来参考

有时不同的组件可能会共用部分方法,这些方法会被称为横切关注点(cross-cutting concerns)

React.createClass 可以允许你使用mixins。

一个常见的使用场景是组件间隔一段时间自我更新。使用setInterval()很容易实现,但是为了节省内存空间必须在不使用时取消。React提供了生命周期方法,可以通知你组件创建和销毁。我们编写一个简单的mixin,执行方法可以提供setInterval()方法,并且在组件销毁时可以自动被清除。

  1. var SetIntervalMixin = {
  2. componentWillMount: function() {
  3. this.intervals = [];
  4. },setInterval: function() {
  5. this.intervals.push(setInterval.apply(null,arguments));
  6. },componentWillUnmount: function() {
  7. this.intervals.forEach(clearInterval);
  8. }
  9. };
  10.  
  11. var TickTock = React.createClass({
  12. mixins: [SetIntervalMixin],// Use the mixin
  13. getInitialState: function() {
  14. return {seconds: 0};
  15. },componentDidMount: function() {
  16. this.setInterval(this.tick,1000); // Call a method on the mixin
  17. },tick: function() {
  18. this.setState({seconds: this.state.seconds + 1});
  19. },render: function() {
  20. return (
  21. <p> React has been running for {this.state.seconds} seconds. </p> ); } }); ReactDOM.render( <TickTock />,document.getElementById('example') );

如果一个组件使用多个mixin,不同的mixin中定义了相同的生命周期方法(例如,不容的mixin中都想要在组件销毁时做相应的清理),这些生命周期函数都会被调用。在组件内部的生命周期方法执行完毕后,mixin中的方法将会按照mixin的顺序依次执行。

猜你在找的React相关文章