React.createClass和extends Component的区别

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

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

文章来自:https://segmentfault.com/a/1190000005863630

 

时间: 2024-10-09 14:15:24

React.createClass和extends Component的区别的相关文章

React 的 PureComponent Vs Component

一.它们几乎完全相同,但是PureComponent通过prop和state的浅比较来实现shouldComponentUpdate,某些情况下可以用PureComponent提升性能 1.所谓浅比较(shallowEqual),即react源码中的一个函数,然后根据下面的方法进行是不是PureComponent的判断,帮我们做了本来应该我们在shouldComponentUpdate中做的事情 if (this._compositeType === CompositeTypes.PureCla

关于React的Container&amp;Presentational Component模型结构分析

react.js javascript 3 之前翻译了两篇关于Container&Presentational Component模型的文章,一篇是基础的Container和Component的定义,另外一篇是进阶版,因为翻译的太烂,感觉有很多错误,所以只放原文链接. 在这里我想讨论一下我自己对这个模型的一些想法. 注:便于书写,下面统一把Container&Presentational Components模型翻译为容器&展示组件模型 注:下面图片中的components文件夹指

[React] Refactor a Class Component with React hooks to a Function

We have a render prop based class component that allows us to make a GraphQL request with a given query string and variables and uses a GitHub graphql client that is in React context to make the request. Let's refactor this to a function component th

react组件 -- React.createClass()方法--同时创建多个组件类

<!DOCTYPE html><html> <head> <script src="../build/react.js"></script> <script src="../build/react-dom.js"></script> <script src="../build/browser.min.js"></script> </h

JAVA中extends 与implements区别

JAVA中extends 与implements区别 JAVA中extends 与implements有啥区别?1. 在类的声明中,通过关键字extends来创建一个类的子类.一个类通过关键字implements声明自己使用一个或者多个接口.extends 是继承某个类, 继承之后可以使用父类的方法, 也可以重写父类的方法; implements 是实现多个接口, 接口的方法一般为空的, 必须重写才能使用2.extends是继承父类,只要那个类不是声明为final或者那个类定义为abstract

React.render和reactDom.render的区别

刚开始学习react.js.发现网上的资料,有些是写着react.render,有些写着reactDom.render.觉得很奇怪就查阅了一下资料.解释如下: 这个是react最新版api,也就是0.14版本做出的改变.主要是为了使React能在更多的不同环境下更快.更容易构建.于是把react分成了react和react-dom两个部分.这样就为web版的react和移动端的React Native共享组件铺平了道路.也就是说我们可以跨平台使用相同的react组件. 新的react包包含了Re

[React] Close the menu component when click outside the menu

Most of the time, your components respond to events that occur within the component tree by defining their own handler or by accepting a handler defined by a parent component via props. Sometimes, this isn't enough. In this lesson, we'll rely on life

[React Router v4] Use the React Router v4 Link Component for Navigation Between Routes

If you’ve created several Routes within your application, you will also want to be able to navigate between them. React Router supplies a Link component that you will use to make this happen. Import Link: import { BrowserRouter as Router, Route, Link

泛型中? super T和? extends T的区别

来源:并发编程网 链接:http://ifeve.com/difference-between-super-t-and-extends-t-in-java/ 经常发现有List<? super T>.Set<? extends T>的声明,是什么意思呢?<? super T>表示包括T在内的任何T的父类,<? extends T>表示包括T在内的任何T的子类,下面我们详细分析一下两种通配符具体的区别. extends List<? extends Nu