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等有区别

React.createClass 、React.createElement、Component的更多相关文章

  1. 转载 React.createClass 对决 extends React.Component

    先给出结论,这其实是殊途同归的两种方式.过去我们一般都会使用 React.createClass 方法来创建组件,但基于 ES6 的小小语法糖,我们还可以通过 extends React.Compon ...

  2. React.createClass和extends Component的区别

    React.createClass和extends Component的区别主要在于: 语法区别 propType 和 getDefaultProps 状态的区别 this区别 Mixins 语法区别 ...

  3. React.createClass vs. ES6 Class Components

    1 1 1 https://www.fullstackreact.com/articles/react-create-class-vs-es6-class-components/ React.crea ...

  4. React 的高级用法(Children、Component、createElement、cloneElement)

    React.Children props.children 代表了所有的子节点. React.Children 用于处理 props.children 的 提供了几个方法 ( map ,foreach ...

  5. React.Component 和 React.PureComponent 、React.memo 的区别

    一 结论 React.Component 是没有做任何渲染优化的,但凡调用this.setState 就会执行render的刷新操作. React.PureComponent 是继承自Componen ...

  6. 25、react入门教程

    0. React介绍 0.1 什么是React? React(有时称为React.js 或ReactJS)是一个为数据提供渲染HTML视图的开源JavaScript库. 它由FaceBook.Inst ...

  7. zepto/jQuery、AngularJS、React、Nuclear的演化

    写在前面 因为zepto.jQuery2.x.x和Nuclear都是为现代浏览器而出现,不兼容IE8,适合现代浏览器的web开发或者移动web/hybrid开发.每个框架类库被大量用户大规模使用都说明 ...

  8. React组件测试(模拟组件、函数和事件)

    一.模拟组件 1.用到的工具 (1)browerify (2)jasmine-react-helpers (3)rewireify(依赖注入) (4)命令:browserify - t reactif ...

  9. 使用webpack、babel、react、antdesign配置单页面应用开发环境

    这是Webpack+React系列配置过程记录的第一篇.其他内容请参考: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-rout ...

随机推荐

  1. Spark RDD 默认分区数量 - repartitions和coalesce异同

    RDD.getNumPartitions()方法可以获得一个RDD分区数量, 1.默认由文件读取的话,本地文件会进行shuffle,hdfs文件默认会按照dfs分片来设定. 2.计算生成后,默认会按照 ...

  2. 【绿书】 模拟,rep大坑

    https://vjudge.net/contest/229603#problem/B 绿书题 大模拟,绿书上用了个比较麻烦的输入,其实只要getchar()!='0'就行 坑: rep(i,0,s. ...

  3. 创建本地SVN版本库以及将SVN导入GIT

    创建本地SVN 通常SVN作为一种服务,是在服务器上架设,供用户通过网络访问使用.但如果只是自己日常使用,完全可以架设在本机上,不需要启动后台程序,通过文件的方式访问即可. 建立本地SVN非常简单,一 ...

  4. int 4 bytes

    http://waynewhitty.ie/blog-post.php?id=19 MySQL - INT(11) vs BIGINT(11) vs TINYINT(11) This seems to ...

  5. [daily][gnucash] 复式记账

    管理, 是成就人生的第一步. 管钱,是第一步中的第一小步. 选了又选,终于选了一个软件,gnucash, 但是, 他有点专业, 用之前需要搞懂一下会计概念. 即: 复式记账 gnucash手册的这一章 ...

  6. Copycat - configure

    Copycat server之间的configure是如何,何时被同步的?   大家可以看到,只有leader可以同步配置   1. 显式的调用LeaderState.configure Leader ...

  7. delphi 把数据库图片的存取

    procedure TForm1.Button1Click(Sender: TObject); // 插入图片过程 var Stream:TMemoryStream;begin try Stream ...

  8. python之if __name__ == '__main__'

    if __name__ == '__main__' 我们简单的理解就是: 如果模块是被直接运行的,则代码块被运行,如果模块是被导入的,则代码块不被运行.

  9. mongodb和spring的整合

    所需jar包 mongodb.xml文件代码

  10. word2vec参数理解

    之前写了对word2vec的一些简单理解,实践过程中需要对其参数有较深的了解: class gensim.models.word2vec.Word2Vec(sentences=None,size=10 ...