react中createFactory, createClass, createElement分别在什么场景下使用,为什么要这么定义?
链接: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分别在什么场景下使用,为什么要这么定义?的更多相关文章
- .NET Core 中的 Swagger 应用与微服务场景下的Swagger Api 集成显示
Swagger 与 OpenAPI 的历史来源: Swagger 项目于 2015 年捐赠给 OpenAPI Initiative,此后被称为 OpenAPI.这两个名称可以互换使用.但是," ...
- 在react中实现CSS模块化
react中使用普通的css样式表会造成作用域的冲突,css定义的样式的作用域是全局,在Vue 中我们还可以使用scope来定义作用域,但是在react中并没有指令一说,所以只能另辟蹊径了.下面我将简 ...
- 理解React中es6方法创建组件的this
首发于:https://mingjiezhang.github.io/(转载请说明此出处). 在JavaScript中,this对象是运行时基于函数的执行环境(也就是上下文)绑定的. 从react中的 ...
- 【原】React中,map出来的元素添加事件无法使用
在使用react中,经常用到react的map函数,用法和jquery里中的map一样,但是,如果你在每个map出来的元素中添加,你会发觉添加的事件无法关联, 比如,我们很多的评论,我需要在每个评论下 ...
- Immutable 详解及 React 中实践
本文转自:https://github.com/camsong/blog/issues/3 Shared mutable state is the root of all evil(共享的可变状态是万 ...
- React 深入系列1:React 中的元素、组件、实例和节点
文:徐超,<React进阶之路>作者 授权发布,转载请注明作者及出处 React 深入系列,深入讲解了React中的重点概念.特性和模式等,旨在帮助大家加深对React的理解,以及在项目中 ...
- React 中的 Component、PureComponent、无状态组件 之间的比较
React 中的 Component.PureComponent.无状态组件之间的比较 table th:first-of-type { width: 150px; } 组件类型 说明 React.c ...
- 深入理解react中的虚拟DOM、diff算法
文章结构: React中的虚拟DOM是什么? 虚拟DOM的简单实现(diff算法) 虚拟DOM的内部工作原理 React中的虚拟DOM与Vue中的虚拟DOM比较 React中的虚拟DOM是什么? ...
- React中的高阶组件,无状态组件,PureComponent
1. 高阶组件 React中的高阶组件是一个函数,不是一个组件. 函数的入参有一个React组件和一些参数,返回值是一个包装后的React组件.相当于将输入的React组件进行了一些增强.React的 ...
随机推荐
- LFS,编译自己的Linux系统 - 完成准备工作
$LFS 确保环境变量$LFS已被定义. 定义:export LFS=/mnt/lfs 检查:echo $LFS 建立目录 $LFS/tools $LFS/tools目录用于存放和编译一些临时使用的工 ...
- [Errno 11004] getaddrinfo failed
该程序是在用python发送邮件的时候出现的 出现这个错误的时候,证明连不上你的帐号,或者登录不上服务器~超时连接 检查下自己的帐号或者服务器的编写有没有正确
- C# ref_out_params方法的参数_4种类型的参数
之前学习C#没有做笔记的习惯,因此有些基础上的东西并没有很好地整理起来,虽然这些东西比较常用,因此也没什么影响,但总觉得不整理一下感觉老是有种陌生感.今天特别整理一下C#4种类型的参数. 一.按值传递 ...
- nginx监听端口和反向代理端口的权限问题
Linux的SELinux安全性控制除作用于文件系统外还作用于端口,这使得那些作为服务启动的进程只能在规定的几个端口上监听.为叙述方便我们称之为受控端口. nginx监听端口 要查看当前有哪些受控端口 ...
- HDOJ-1010 Tempter of the Bone(dfs+剪枝)
http://acm.hdu.edu.cn/showproblem.php?pid=1010 给出一个n*m的迷宫 X为墙 .为空地 S为起点 D为终点 给出时间T 每走一步花费一单位的时间 走过的空 ...
- 哈希表原理及hashmap简单实现
哈希表也叫做散列表.在各种语言中都有hashmap的实现.其最突出的优点是查找和插入以及删除具有常数的时间复杂度 我们可以把哈希表理解为数组+链表 数组具有常数复杂度的查找,为什么呢,因为数组是在内存 ...
- Unity 角色复活和重新开始游戏
作者写游戏完成的时候,还需要从新想下如何把游戏设置重新开始,角色如何复活. 一般大多数都会采用这种方式来代替游戏重新开始 Application.LoadLevel("xxx场景" ...
- Eclipse/IDEA中使用Maven创建Web项目报错
Eclipse中的错误:Could not resolve archetype org.apache.maven.archetypes:maven-archetype-webapp-1.0.jar:R ...
- poj1080--Human Gene Functions(dp:LCS变形)
Human Gene Functions Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 17206 Accepted: ...
- 巧用DISPLAY_AWR函数与dba_hist_sqlstat结合查询SQL语句在指定节点指定时间范围内的历史执行计划
1.问题 通过调用dbms_xplan包中DISPLAY_AWR函数(DBMS_XPLAN.DISPLAY_AWR)可以从AWR数据中查看到SQL语句的历史执行计划,但是,DISPLAY ...