zoukankan      html  css  js  c++  java
  • React.createClass和extends Component的区别

    createClass本质上是一个工厂函数,extends的方式更加接近最新的ES6规范的class写法。两种方式在语法上的差别主要体现在方法的定义和静态属性的声明上。createClass方式的方法定义使用逗号,隔开,因为creatClass本质上是一个函数,传递给它的是一个Object;而class的方式定义方法时务必谨记不要使用逗号隔开,这是ES6 class的语法规范。

    React.createClass和extends Component的区别主要在于:

    1. 语法区别

    2. propType 和 getDefaultProps

    3. 状态的区别

    4. this区别

    5. Mixins

    语法区别

    React.createClass

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

    React.Component

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

    后一种方法使用ES6的语法,用constructor构造器来构造默认的属性和状态。

    propType 和 getDefaultProps

    React.createClass:通过proTypes对象和getDefaultProps()方法来设置和获取props.

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

    React.Component:通过设置两个属性propTypesdefaultProps

    import React form 'react';
    class TodoItem extends React.Component{
        static propTypes = { // as static property
            name: React.PropTypes.string
        };
        static defaultProps = { // as static property
            name: ''
        };
        constructor(props){
            super(props)
        }
        render(){
            return <div></div>
        }
    }

    状态的区别

    React.createClass:通过getInitialState()方法返回一个包含初始值的对象

    import React from 'react';
    let TodoItem = React.createClass({
        // return an object
        getInitialState(){ 
            return {
                isEditing: false
            }
        }
        render(){
            return <div></div>
        }
    })

    React.Component:通过constructor设置初始状态

    import React from 'react';
    class TodoItem extends React.Component{
        constructor(props){
            super(props);
            this.state = { // define this.state in constructor
                isEditing: false
            } 
        }
        render(){
            return <div></div>
        }
    }

    this区别

    React.createClass:会正确绑定this

    import React from 'react';
    
    const Contacts = React.createClass({  
      handleClick() {
        console.log(this); // React Component instance
      },
      render() {
        return (
          <div onClick={this.handleClick}></div>//会切换到正确的this上下文
        );
      }
    });
    
    export default Contacts;  

    React.Component:由于使用了 ES6,这里会有些微不同,属性并不会自动绑定到 React 类的实例上。

    import React from 'react';
    class TodoItem extends React.Component{
        constructor(props){
            super(props);
        }
        handleClick(){
            console.log(this); // null
        }
        handleFocus(){  // manually bind this
            console.log(this); // React Component Instance
        }
        handleBlur: ()=>{  // use arrow function
            console.log(this); // React Component Instance
        }
        render(){
            return <input onClick={this.handleClick} 
                                  onFocus={this.handleFocus.bind(this)}  
                                  onBlur={this.handleBlur}/>
        }
    }

    我们还可以在 constructor 中来改变 this.handleClick 执行的上下文,这应该是相对上面一种来说更好的办法,万一我们需要改变语法结构,这种方式完全不需要去改动 JSX 的部分:

    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

    如果我们使用 ES6 的方式来创建组件,那么 React mixins 的特性将不能被使用了。

    React.createClass:使用 React.createClass 的话,我们可以在创建组件时添加一个叫做 mixins 的属性,并将可供混合的类的集合以数组的形式赋给 mixins

    import React from 'react';
    let MyMixin = {
        doSomething(){}
    }
    let TodoItem = React.createClass({
        mixins: [MyMixin], // add mixin
        render(){
            return <div></div>
        }
    })
  • 相关阅读:
    彻底卸载MySql
    MySql和SQL Server数据类型 对比
    easyui combobox 中实现 checkbox
    浅谈研发项目经理
    软件公司项目经理岗位职责
    input text 的事件及方法
    c#解析HTML
    SQL SERVER 数据库查询表和字段信息语句
    Silverlight动态载入调用XAML资源
    几种设计模式简介(转载)
  • 原文地址:https://www.cnblogs.com/-Steven/p/8241072.html
Copyright © 2011-2022 走看看