目前作者所知道的创建react组件的方式有三种:

  1. 函数式定义(无状态组件)

    function MyComponent(props){
      return(
    <h1>mycomponent</h1>
    )
    }
  2. es5原生方式
     const MyComponent=React.createClass({
    render:function () {
    return <h1>mycomponent</h1>
    }
    })
  3. es6中class类的方式(有状态组件)
       class MyConponent extends React.Component{
    constructor(props){
    super(props);
    }
    render() {
    return (
    <h1>mycomponent</h1>
    );
    }
    }

    注意:无论使用哪种方式创建组件,组件名称的首字母都必须大小,因为我们写的是JSX,最后是需要通过babel转义成es5的语法的,而babel在进行转义JSX语法时,是调用了 React.createElement() 这个方法,这个方法需要接收三个参数:type, config, children。第一个参数声明了这个元素的类型,当创建自定义组件时没有首字母小写时, 而 babel 在转义时把它当成了一个字符串 传递进去了;当首字母大写时,babel 在转义时传递了一个变量进去。问题就在这里,如果传递的是一个字符串,那么在创建虚拟DOM对象时,React会认为这是一个原生的HTML标签,但是这显然不是一个原生的HTML标签,因此去创建一个不存在的标签肯定是会报错的。如果首字母大写,那么就会当成一个变量传递进去,这个时候React会知道这是一个自定义组件,因此他就不会报错了。

        那么问题来了,这三种方式有啥区别呢?这里说明一个问题,很多时候同一种效果往往有很多种实现方式,所以我们在学习的过程中要避免章节化思维,要对技术进行横向比较,这样能帮你更 加深入的理解各种方式的优缺点。

    1.函数式定义和类定义的对比

       函数式定义组件没有state和生命周期函数且不能访问this,而类定义中这些都可以有。

    2.类定义和React.createClass原生定义的区别

        2.1函数this的绑定

          React.createClass创造的组件,其每一个成员函数的this都会自动由React绑定,所以使用时可以直接this.method,而通过class创建组件的成员函数则需要手动绑定,如this.method=this.method.bind(this).

        2.2Mixins特性

          使用 React.createClass 的话,我们可以在创建组件时添加一个叫做 mixins 的属性,并将可供混合的类的集合以数组的形式赋给 mixins,关于mixins不了解的同学可以参考mixins的前世今生

   3.如何选择哪种方式创建组件

      由于React团队已经声明React.createClass最终会被React.Component的类形式所取代。但是在找到Mixins替代方案之前是不会废弃掉React.createClass形式。所以:

能用React.Component创建的组件的就尽量不用React.createClass形式创建组件。

除此之外,创建组件的形式选择还应该根据下面来决定:

1、只要有可能,尽量使用无状态组件创建形式。

2、否则(如需要state、生命周期方法等),使用`React.Component`这种es6形式创建组件

 

  

            

React中创建组件的3种方式的更多相关文章

  1. react中的ref的3种方式

    2020-03-31 react中的ref的3种方式 react中ref的3种绑定方式 方式1: string类型绑定 类似于vue中的ref绑定方式,可以通过this.refs.绑定的ref的名字获 ...

  2. 【java并发】传统线程技术中创建线程的两种方式

    传统的线程技术中有两种创建线程的方式:一是继承Thread类,并重写run()方法:二是实现Runnable接口,覆盖接口中的run()方法,并把Runnable接口的实现扔给Thread.这两种方式 ...

  3. Java中创建线程的两种方式

    创建线程的第一种方式: 创建一个类继承Thread 重写Thread中的run方法 (创建线程是为了执行任务 任务代码必须有存储位置,run方法就是任务代码的存储位置.) 创建子类对象,其实就是在创建 ...

  4. Java并发基础01. 传统线程技术中创建线程的两种方式

    传统的线程技术中有两种创建线程的方式:一是继承Thread类,并重写run()方法:二是实现Runnable接口,覆盖接口中的run()方法,并把Runnable接口的实现扔给Thread.这两种方式 ...

  5. react创建组件的几种方式及其区别

    react创建组件有如下几种方式 ①.函数式定义的无状态组件 ②.es5原生方式React.createClass定义的组件   ③.es6形式的extends React.Component定义的组 ...

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

    内容转载于http://www.cnblogs.com/wonyun/p/5930333.html React推出后,出于不同的原因先后出现三种定义react组件的方式,殊途同归; 具体的三种方式: ...

  7. React创建组件的三种方式比较

    推荐文章: https://www.cnblogs.com/wonyun/p/5930333.html 创建组件的方式主要有: 1.function 方式 2.class App extends Re ...

  8. React创建组件的三种方式比较和入门实例

    推荐文章: https://www.cnblogs.com/wonyun/p/5930333.html 创建组件的方式主要有: 1.function 方式 2.class App extends Re ...

  9. react中创建组件

    第1种 - 创建组件的方式 > 使用构造函数来创建组件,如果要接收外界传递的数据,需要在 构造函数的参数列表中使用`props`来接收:> 必须要向外return一个合法的JSX创建的虚拟 ...

随机推荐

  1. python集合的内建函数

    s.issubset(t) 如果s 是t 的子集,则返回True,否则返回False s.issuperset(t) 如果t 是s 的超集,则返回True,否则返回False s.union(t) 返 ...

  2. 共识协议——RAFT&PBFT

    区块链是一个没有中央权威的分布式对等系统.虽然权力下放可以防止各方的腐败行为,但是它必需要有一个可靠的共识协议来作出决策,让分散在世界各地的节点可以形成一致的意见.常见的共识算法有比特币采用的POW, ...

  3. hgoi#20190519

    更好的阅读体验 来我的博客观看 T1-求余问题 Abu Tahun很喜欢回文. 一个数组若是回文的,那么它从前往后读和从后往前读都是一样的,比如数组{1},{1,1,1},{1,2,1},{1,3,2 ...

  4. MySQL的登录与退出以及MySQL的目录结构

    一.MySQL的登录 1.利用语句mysql -uroot -proot 同时如果密码不想让别人看到,可以在-p处直接回车,再输入密码就是加密的了 2.远程登录 以连接本地为例 此处涉及到localh ...

  5. CI框架使用(一)

    CI框架的使用是很简单,也 是mvc模式.其中有好多类直接调用.   在使用帮助函数的时候,都需要手动加载,或者是在配置文件中加一个自动加载 $this->load->helper('ur ...

  6. Linux htop 使用

    引言 一般大家查看进程相关信息常用的命令是 top,之前接触并使用 htop,觉得比较好用,它算是 top 的增强版,这里重新记录下. htop 简介 NAME htop - interactive ...

  7. vSphere克隆虚机重启网卡报错

    使用VMware vSphere克隆虚机,修改IP重启网卡报错: 解决报错: 修改 /etc/udev/rules.d/70-persistent-net.rules 文件,克隆后会多出eth2和et ...

  8. 学习 GitHub 有什么好处?

    layout: post title: "学习 GitHub 有什么好处?" date: 2018-04-15 19:20:20 +0800 --- 鸣谢:王顶 老师(河北经贸大学 ...

  9. Arrays工具类常用方法演示

    java.util.Arrays是JDK中操作数组的工具类,包含了用来操作数组(比如排序和搜索)的各种方法. 下面我们以int类型数组为例,学习下常用的方法,其他类型数组都差不多. 1.equals( ...

  10. 并发编程-concurrent指南-原子操作类-AtomicInteger

    在java并发编程中,会出现++,--等操作,但是这些不是原子性操作,这在线程安全上面就会出现相应的问题.因此java提供了相应类的原子性操作类. 1.AtomicInteger