React.createClass和extends Component的区别

hlcc 发布于2019-08-19 18:41 / 305人阅读

摘要：本质上是一个工厂函数，的方式更加接近最新的规范的写法。两种方式在语法上的差别主要体现在方法的定义和静态属性的声明上。和的区别主要在于语法区别和状态的区别区别语法区别后一种方法使用的语法，用构造器来构造默认的属性和状态。

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

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

语法区别

propType 和 getDefaultProps

状态的区别

this区别

Mixins

语法区别

React.createClass

import React from "react";

const Contacts = React.createClass({  
  render() {
    return (
      
    );
  }
});

export default Contacts;

React.Component

import React from "react";

class Contacts extends React.Component {  
  constructor(props) {
    super(props);
  }
  render() {
    return (
      
    );
  }
}

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 (
      
    );
  }
});

export default Contacts;

React.Component：通过设置两个属性propTypes和defaultProps

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 
    }
}

状态的区别

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

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

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 
    }
}

this区别

React.createClass：会正确绑定this

import React from "react";

const Contacts = React.createClass({  
  handleClick() {
    console.log(this); // React Component instance
  },
  render() {
    return (
      //会切换到正确的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 
    }
}

我们还可以在 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 (
      
    );
  }
}

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 
    }
})

参考文章1
参考文章2
参考文章3

混合云服务器托管宽带和专线的区别专线和宽带的区别空间和域名的区别功能和作用的区别

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79863.html

React创建组件的三种方式及其区别

摘要：是以的形式来创建的组件的，是目前极为推荐的创建有状态组件的方式，最终会取代形式相对于可以更好实现代码复用。当然，有三种手动绑定方法可以在构造函数中完成绑定，也可以在调用时使用来完成绑定，还可以使用来绑定。 React推出后，出于不同的原因先后出现三种定义react组件的方式，殊途同归；具体的三种方式：函数式定义的无状态组件 es5原生方式React.createClass定义的组件...

Towers 2019-08-23 12:41 评论0 收藏0
谈一谈创建React Component的几种方式

摘要：用这种方式创建组件时，并没有对内部的函数，进行绑定，所以如果你想让函数在回调中保持正确的，就要手动对需要的函数进行绑定，如上面的，在构造函数中对进行了绑定。当我们谈起React的时候，多半会将注意力集中在组件之上，思考如何将页面划分成一个个组件，以及如何编写可复用的组件。但对于接触React不久，还没有真正用它做一个完整项目的人来说，理解如何创建一个组件也并不那么简单。在最开始的时候...

mylxsw 2019-08-20 14:24 评论0 收藏0
React Mixin 的前世今生

摘要：但非常不幸，并不原生支持。这个单词相信都很熟悉，高阶函数在函数式编程是一个基本概念，它描述的是这样一种函数，接受函数作为输入，或是输出一个函数。比如常用的工具方法都是高阶函数。恰与的定义完全一致。这种不同很可能会导致问题的产生。在 React component 构建过程中，常常有这样的场景，有一类功能要被不同的 Component 公用，然后看得到文档经常提到 Mixin（混入） ...

姘存按 2019-08-21 10:49 评论0 收藏0
React context 丢失问题

摘要：丢失问题文本是为了说清目前的机制是而不是我们以为的机制，并说明这两者的区别。虽然明白了原理，但是问题并没有解决。上下文注意这里是，需要执行接受回调函数，回调函数中的内容为实测可以成功拿到。 React context 丢失问题文本是为了说清react context目前的机制是owner context 而不是我们以为的parent context 机制，并说明这两者的区别。...

Seay 2019-08-21 10:36 评论0 收藏0
[译]在 React.js 中使用 ES6+

摘要：如果是在中，我们也许只能这样做但是，在中，我们不仅可以在对象字面量属性的定义中使用表达式，还有使用使用字符串模板析构扩展运算符我们在编写组件的过程中，经常遇到要从父组件要把自己的很多属性多传给子组件的情况。原文地址： http://babeljs.io/blog/2015/06/07/react-on-es6-plus/ showImg(http://7xiyp1.com1.z0.g...

Enlightenment 2019-08-21 10:40 评论0 收藏0