React.createClass 、React.createElement、Component

Stella981
• 阅读 413

react里面有几个需要区别开的函数

React.createClass 、React.createElement、Component

首选看一下在浏览器的下面写法:

<div id="app">
    </div>
    <script src="../js/react.js"></script>
    <script src="../js/react-dom.js"></script>
    <script src="../js/browser.min.js"></script>
    <script type="text/babel">
     var  Info = React.createClass({  //创建一个react模板
                          render:function(){
                            return <p>createClass----{this.props.you}</p>
                          }
                    });
    var eleC = React.createClass({ //创建一个react模板
                      render:function(){
                    return <div>createElement---{this.props.name}</div>
                    }
    });
    
    var eleProps = {name:"eleC"};
    var ele = React.createElement(eleC,eleProps); //创建一个react元素;第一个参数为模板,第二个参数为模板的props    
    
    //ReactDOM.render是React的最基本方法用于将模板转为HTML语言,并插入指定的DOM节点。ReactDOM.render(template,targetDOM),该方法接收两个参数:第一个是创建的模板,多个dom元素外层需使用一个标签进行包裹
    ReactDOM.render(
      <div>
        <Info  you="createClass" />
        {ele} 
      </div>,
      document.getElementById('app')
    );
        
    </script>

React.createClass  是创建了一个react模板,使用的时候,像html标签一样,比如上面的info

React.createElement 是创建了一个react元素,相当于把模板具体化,使用的时候,是当做js变量,直接写入,比如上面的 {ele}

以上是在浏览器引入的写法,下面看看,用npm构建的写法

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class App extends Component {
 
  render() {
    return (
      <div className="App">
        这里是app
      </div>
    );
  }
}

class Info extends Comment{
    render(){
        return (
            <div>
                info
            </div>
        )
    }
}

class Ele extends Comment{
    render(){
        return (
            <div>
                ele
            </div>
        )
    }
}
var myProps ={

};
var ele = React.createElement(Ele,myProps);



ReactDOM.render(<App>
    <Info></Info>
    {ele}
</App>,document.getElementById('root'));

区别在于,使用服务启动,不再需要用 React.createClass 来创建模块,直接使用类,来继承 Component 类即可完成模板创建。。后面使用的方式基本一致。要注意的是内部 初始化 state和props等有区别

点赞
收藏
评论区
推荐文章
Jacquelyn38 Jacquelyn38
1年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。 1、使用解构获取json数据let jsonData   id: 1, status: "OK", data: ['a', 'b'] ; let  id, status, data: number   jsonData; console.log(id, status, number )
blmius blmius
1年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录 问题 用navicat导入数据时,报错: 原因这是因为当前的MySQL不支持datetime为0的情况。 解决修改sql\mode: sql\mode:SQL Mode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。 全局s
Easter79 Easter79
11个月前
swap空间的增减方法
(1)增大swap空间 去激活swap交换区: #swapoff -v /dev/vg00/lvswap 扩展交换lv: #lvextend -L 10G /dev/vg00/lvswap 重新生成swap交换区: #mkswap /dev/vg00/lvswap 激活新生成的交换区: #swapon -v /dev/vg00/lvswap
Stella981 Stella981
11个月前
MAC docker启动参数修改
启动 docker,漏加 16020 端口,怎么修改呢? 1\. Docker ps 看一下id CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS
Wesley13 Wesley13
11个月前
java将前端的json数组字符串转换为列表
记录下在前端通过ajax提交了一个json数组的字符串,在后端如何转换为列表。 **前端数据转化与请求** var contracts = [ {id: '1', name: 'yanggb合同1'}, {id: '2', name: 'yanggb合同2'}, {id: '3', name: 'yang
Stella981 Stella981
11个月前
KVM调整cpu和内存
一.修改kvm虚拟机的配置 1、virsh edit centos7 找到“memory”和“vcpu”标签,将 <name>centos7</name> <uuid>2220a6d1-a36a-4fbb-8523-e078b3dfe795</uuid>
Wesley13 Wesley13
11个月前
MySQL查询按照指定规则排序
1.按照指定(单个)字段排序 select * from table_name order id desc; 2.按照指定(多个)字段排序 select * from table_name order id desc,status desc; 3.按照指定字段和规则排序 selec
Stella981 Stella981
11个月前
Django中Admin中的一些参数配置
### **设置在列表中显示的字段,id为django模型默认的主键** list_display = ('id', 'name', 'sex', 'profession', 'email', 'qq', 'phone', 'status', 'create_time') ### **设置在列表可编辑字段** list_editable
Stella981 Stella981
11个月前
Angular material mat
Icon Icon Name mat-icon code _add\_comment_ add comment icon <mat-icon> add\_comment</mat-icon> _attach\_file_ attach file icon <mat-icon> attach\_file</mat-icon> _attach\
Wesley13 Wesley13
11个月前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
#### 背景描述 # Time: 2019-01-24T00:08:14.705724+08:00 # User@Host: **[**] @ [**] Id: ** # Schema: sentrymeta Last_errno: 0 Killed: 0 # Query_time: 0.315758 Lock_
helloworld_34035044 helloworld_34035044
2个月前
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。 uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid() 或 uuid(sep)参数说明:sep 布尔值,生成的uuid中是否包含分隔符'',缺省为