React.createClass vs extends React.Component

当我们学习ReactJS的时候, 都会通过官方Tutorial看到下面的写法.

import React from 'react';
let TodoItem = React.createClass({
    render(){
        return <div></div>
    }
})

但是, ES6实现了class. 于是, 出现了新的写法.

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

接下来, 就对比一下这两种写法的不同之处. 例子的顺序都是先写React.createClass, 再写extends React.Component

1. propTypes 和 getDefaultProps

import React from 'react';
let TodoItem = React.createClass({
    propTypes: { // as an object
        name: React.PropTypes.string
    },
    getDefaultProps(){   // return a object
        return {
            name: ''    
        }
    }
    render(){
        return <div></div>
    }
})
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>
    }
}

2. 初始状态

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

3. this

import React from 'react';
let TodoItem = React.createClass({
    handleClick(){
        console.log(this); // React Component instance
    },
    render(){
        return <div onClick={this.handleClick}></div>
    }
})
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}/>
    }
}

4.Mixin

import React from 'react';
let MyMixin = {
    doSomething(){}
}
let TodoItem = React.createClass({
    mixins: [MyMixin], // add mixin
    render(){
        return <div></div>
    }
})

extends React.Component 由于ES6的原因, 不支持Mixin. 但是有一些比较好的替代方案:

  1. core-decorators.js
  2. react-mixin

参考文章

  1. React.createClass versus extends React.Component
  2. Reusable Components

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏龙首琴剑庐

Python之多线程爬虫抓取网页图片

目标 嗯,我们知道搜索或浏览网站时会有很多精美、漂亮的图片。 我们下载的时候,得鼠标一个个下载,而且还翻页。 那么,有没有一种方法,可以使用非人工方式自动识别并...

3155
来自专栏Google Dart

为Flutter应用程序添加交互性 顶

你如何修改你的应用程序,使其对用户输入做出反应? 在本教程中,您将为仅包含非交互式小部件的应用添加交互性。 具体来说,您将通过创建一个管理两个无状态小部件的自定...

962
来自专栏Flutter入门

Flutter入门三部曲(3) - 数据传递/状态管理

这个既熟悉又陌生类可以帮助我们在Flutter中沿着树向下传递信息。这个类只是简单的保存了一个状态而已。

100
来自专栏技术小讲堂

ASP.NET Web API中的依赖注入什么是依赖注入ASP.NET Web API依赖解析器使用Unity解析依赖配置依赖解析

什么是依赖注入     依赖,就是一个对象需要的另一个对象,比如说,这是我们通常定义的一个用来处理数据访问的存储,让我们用一个例子来解释,首先,定义一个领域模型...

3348
来自专栏滕先生的博客

iOS 通讯录相关序一、介绍二、弹出系统通讯录程序三、代理方法四、不需要弹出联系人控制器就可以获取联系人信息的方法五、iOS 9 新出的点击通讯录的获取信息的办法

2716
来自专栏大内老A

为ASP.NET MVC创建一个基于Unity的ControllerFactory

谈到IoC和ASP.NET的集成,很多人会先后想到Ninject,不过我们个人还是倾向于Unity。这篇文章简单地介绍如果创建基于Unity的Controlle...

1667
来自专栏大内老A

初学ReactJS,写了一个RadioButtonList组件

 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>React Demo</title> 5 <...

1809
来自专栏移动端开发

Charts 常见使用类型实例

Charts是做什么的:        在我们平时的开发中,当使用到一些统计图表的时候,我们该怎样去做那些柱形的统计图、那些折线统计图、扇形统计图,亦或是你在做...

1928
来自专栏hotqin888的专栏

bootstrap table x-editable select2——带图标的选择

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/hotqin888/article/det...

851
来自专栏AhDung

【C#】分享带等待窗体的任务执行器一枚

-------------20150415原文(已更新)-------------

733

扫码关注云+社区