• 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的使用者,都会有所裨益。

    propTypesdefaultProps的声明方式

    在ES6的语法下,propTypesdefaultProps是以属性的形式定义(类似写一个原生对象的属性):

    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>
        );
      }
    });
    
  • 相关阅读:
    继续搞我的linux
    MySQL 开始
    我的小程序终于完工
    列表页 编辑页 删除页
    开发 记账小程序研发
    vue使用饿了么element-ui框架中的上传组件进度条无法使用,:on-progress钩子无法触发的原因
    移动端调试神器vConsole
    全栈高级web前端工程师的必经之路
    在vue中使用elementUI饿了么框架使用el-tabs,切换Tab如何实现实时加载,以及el-table表格使用总结
    GitBook的使用方式,快速创建网页文档
  • 原文地址:https://www.cnblogs.com/djtao/p/6357446.html
Copyright © 2020-2023  润新知