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 条评论
登录 后参与评论

相关文章

来自专栏一个默默无闻的工程师的日常

nova boot vm with '--nic net-id=xxxx, v4-fixed-ip=xxx' failed

973
来自专栏十月梦想

js鼠标事件

PS:鼠标移动(onmousemove)和鼠标移入(onmouseover)区别:移动事件指鼠标只要移动就产生事件,移入事件需要移入到指定的对象内才执行事件

654
来自专栏前端知识分享

第49天:封装自己的scrollTop

scrollTop和scrollLeft scrollTop 被卷去的头部 当滑动滚轮浏览网页的时候,网页隐藏在屏幕上方的距离 二、页面滚动效果事件 windo...

801
来自专栏运维一切

正向代理访问腾讯云cos时http405的问题

当使用正向代理请求cos资源的时候,cos对http协议的支持会比较严谨,“宽容性”不够。可能对http协议更加谨慎一点反而更好吧

943
来自专栏运维一切

正向代理访问腾讯云cos时http405的问题

当使用正向代理请求cos资源的时候,cos对http协议的支持会比较严谨,“宽容性”不够。可能对http协议更加谨慎一点反而更好吧

1987
来自专栏Python自动化测试

Jmeter4.0接口测试之HTTP的请求(五)

下面来看使用Jmeter怎么来做HTTP的接口请求,在请求中使用浏览器的network获取请求的信息,见获取到的请求信息:

1063
来自专栏web前端-

JQ事件和事件对象

  //mouseover()/mouseout()和mouseenter()/mouseleave()的区别

1292
来自专栏杨龙飞前端

scrollto 到指定位置

1724
来自专栏云端架构

【云端架构】前端jQuery鼠标事件精选

鼠标事件是指用户在移动鼠标光标或者点击任意鼠标键时触发的事件,jQuery中封装了基本上所有的鼠标事件包括点击,双击,移动等鼠标事件,下面我们就来看下这些事件的...

3276
来自专栏前端知识分享

第53天:鼠标事件、event事件对象

-->鼠标事件 -->event事件对象 -->默认事件 -->键盘事件(keyCode) -->拖拽效果

732

扫码关注云+社区