作者:元彦
链接:https://www.zhihu.com/question/27602269/answer/40168594
来源:知乎
著作权归作者所有,转载请联系作者获得授权。

三者用途稍有不同,按依赖关系调整下顺序:
1. createClass,如其名就是创建React组件对应的类,描述你将要创建组件的各种行为,其中只有当组件被渲染时需要输出的内容的render接口是必须实现的,其他都是可选:

var Hello = React.createClass({
render: function() {
return <div>Hello Taobao, Hello UED</div>;
}
});

2. createElement,创建React组件实例,支持type,config,children三个参数:

ReactElement.createElement = function(type, config, children) {
...
}

如我们在jsx中描述的 < Hello /> ,编译后就是 React.createElement(Hello)

3. createFactory,通过工厂方法创建React组件实例,在js里要实现工厂方法只需创建一个带type参数的createElement的绑定函数:

ReactElement.createFactory = function(type) {
var factory = ReactElement.createElement.bind(null, type);
return factory;
};

创建模式目的是隔离与简化创建组件的过程,模式的东西自然是可用可不用,如果需要批量创建某个组件时,可以通过工厂方法来实现:

var h = React.createFactory(Hello);
h({x:1})
h({x:2})
h({x:3})

react中createFactory, createClass, createElement分别在什么场景下使用,为什么要这么定义?的更多相关文章

  1. .NET Core 中的 Swagger 应用与微服务场景下的Swagger Api 集成显示

    Swagger 与 OpenAPI 的历史来源: Swagger 项目于 2015 年捐赠给 OpenAPI Initiative,此后被称为 OpenAPI.这两个名称可以互换使用.但是," ...

  2. 在react中实现CSS模块化

    react中使用普通的css样式表会造成作用域的冲突,css定义的样式的作用域是全局,在Vue 中我们还可以使用scope来定义作用域,但是在react中并没有指令一说,所以只能另辟蹊径了.下面我将简 ...

  3. 理解React中es6方法创建组件的this

    首发于:https://mingjiezhang.github.io/(转载请说明此出处). 在JavaScript中,this对象是运行时基于函数的执行环境(也就是上下文)绑定的. 从react中的 ...

  4. 【原】React中,map出来的元素添加事件无法使用

    在使用react中,经常用到react的map函数,用法和jquery里中的map一样,但是,如果你在每个map出来的元素中添加,你会发觉添加的事件无法关联, 比如,我们很多的评论,我需要在每个评论下 ...

  5. Immutable 详解及 React 中实践

    本文转自:https://github.com/camsong/blog/issues/3 Shared mutable state is the root of all evil(共享的可变状态是万 ...

  6. React 深入系列1:React 中的元素、组件、实例和节点

    文:徐超,<React进阶之路>作者 授权发布,转载请注明作者及出处 React 深入系列,深入讲解了React中的重点概念.特性和模式等,旨在帮助大家加深对React的理解,以及在项目中 ...

  7. React 中的 Component、PureComponent、无状态组件 之间的比较

    React 中的 Component.PureComponent.无状态组件之间的比较 table th:first-of-type { width: 150px; } 组件类型 说明 React.c ...

  8. 深入理解react中的虚拟DOM、diff算法

    文章结构: React中的虚拟DOM是什么? 虚拟DOM的简单实现(diff算法) 虚拟DOM的内部工作原理 React中的虚拟DOM与Vue中的虚拟DOM比较 React中的虚拟DOM是什么?   ...

  9. React中的高阶组件,无状态组件,PureComponent

    1. 高阶组件 React中的高阶组件是一个函数,不是一个组件. 函数的入参有一个React组件和一些参数,返回值是一个包装后的React组件.相当于将输入的React组件进行了一些增强.React的 ...

随机推荐

  1. web.py安装

    web.py 是python的一个web插件,用于发布web服务安装下载web.py https://github.com/webpy/webpy 安装 解压下载的rar 打开控制台并定位到此文件夹输 ...

  2. 三维地图(BFS)

    亡命逃窜 时间限制:1000 ms  |  内存限制:65535 KB 难度:4   描述 从前有个叫hck的骑士,为了救我们美丽的公主,潜入魔王的老巢,够英雄吧.不过英雄不是这么好当的.这个可怜的娃 ...

  3. C语言基础10

    栈区间:在函数内部声明的变量都存放在栈区间,比如int char 数组 结构体 指针,只管申请,系统会自动帮我们回收,收回的时间是作用域结束之后,遵循的原则是"先进后出". int ...

  4. c#POST请求和接收post请求

    c# post请求发送数据 /// <summary> /// POST请求 /// </summary> /// <param name="url" ...

  5. php设置和获取变量类型

    1. 获取变量类型 gettype($a); 2. 设置变量类型 settype($a,'int'); 3. 测试函数 is_array();是否数组 is_string();是否字符串 is_obj ...

  6. http cookie

    一.cookie的大小 cookie只能存储最大4kb的数据.cookie的名/值中的值不允许包含分号.逗号和空白符.因此可以采用encodeURIComponent()编码,读取的时候先采用deco ...

  7. Mybatis的连接池

    先总结一个原则:mytatis的连接池最大值poolMaximumActiveConnections尽量跟服务器的并发访问量持平以至于大于并发访问量. 原因:在org.apache.ibatis.da ...

  8. 2015第10周五CSS—2

    经常遇到的浏览器兼容性有哪些?如何解决? 1.浏览器默认的margin和padding不同.解决方案是加一个全局的*{margin:0;padding:0;}来统一. 2.IE6双边距bug:块属性标 ...

  9. 剑指offer-面试题8.旋转数组的最小数字

    题目:把一个数组最开始的若干个元素搬到数据的末尾,我们称之为 数组的旋转.输入一个递增排序的数组的一个旋转,输出旋转数组 的最小元素.例如数组{3,4,5,1,2}为{1,2,3,4,5}的一个旋转, ...

  10. Oracle使用NLSSORT函数实现汉字的排序

    1).按拼音首字母排序 SELECT * FROM T_TABLE ORDER BY NLSSORT(NAME, 'NLS_SORT=SCHINESE_PINYIN_M'); 2).按笔画排序SELE ...