React.createClass:
创建一个ReactClass(组件类),参数是一个对象且必须带有 render 属性方法,该方法必须返回一个封闭的容器(容器内可以有其它不限结构的容器)或 null/false(表示啥都不渲染)

 

React.createElement:第一个参数是DOM,第二个是属性,第三个是值
创建一个指定类型的React元素,注意第三个参数children可以是任意个React元素:
React.createElement( 'p', null,
React.createElement('span', null, 'Hello,'),
React.createElement('span', null, 'world,'),
React.createElement( Component, {a : 1})
)
React.createElement(type, props, children)如:React.createElement('span', null, 'Hello,')

 

React.cloneElement:
克隆并返回一个新的 ReactElement (内部子元素也会跟着克隆),新返回的元素会保留有旧元素的 props、ref、key,也会集成新的 props(只要在第二个参数中有定义)
var newSpan = React.cloneElement(span, {b:'2'}
要注意的是,createElement 的第一个参数必须是字符串或 ReactClass,而在 cloneElement 里第一个参数应该是 ReactElement

1.React.createFactory:
返回一个某种类型的ReactElement工厂函数,可以利用返回的函数来创建一个ReactElement(配置 props 和 children
var p = React.createFactory(Component),
ReactElementP = p({a:1}),
div = React.createFactory('div'),
ReactElementDiv = div(null, ReactElementP);

 

React.render:
染一个 ReactElement 到 container 指定的 DOM 中,返回一个到该组件的引用。如果提供了可选的回调函数,则该函数将会在组件渲染或者更新之后调用.

React.PropTypes:
用于组件内部验证传入 Props 的类型,如果传入的类型不匹配,React 会打印出警告

React.Children:
1. React.Children.map(object children, function fn [, object context])

遍历子元素,映射为一个新的子元素集合(跟 ES5 的 Array.map 差不多)
2. React.Children.forEach(object children, function fn [, object context])

遍历子元素,对每一个子元素执行回调,但不像上述的 map 那样最终返回一个新的集合(跟 ES5 的 Array.forEach 差不多)
3. React.Children.count(object children)

返回子元素的总数
4. React.Children.only(object children)

返回仅有的一个子元素,否则(没有子元素或超过一个子元素)报错且不渲染任何东西:

 

5.React.initializeTouchEvents:
开启或关闭 React 的触摸事件机制,传入参数 true 使 React 能处理移动设备的触摸( touch )事件

React.DOM.tag:
常规是用于在非 JSX 下来创建 ReactElement,tag 表示相应的DOM类型(比如“div”、“p”)。另外首个参数可以定制相关的 DOM 属性(比如“name”),第二个参数表示 DOM 内的内容
ar div = React.DOM.div({name : 'div1'}, 'HELLO ', React.DOM.span(null, <em>WORLD</em>));
React.render(
div, document.body
)
生成结果:
<div name="div1" data-reactid=".0">
<span data-reactid=".0.0">HELLO</span>
<span data-reactid=".0.1">
<em data-reactid=".0.1.0">WORLD</em>
</span>
</div>

 

React.isValidElement:
判断参数是否一个合法的 ReactElement,并返回 Boolean 值
var Component = React.createClass({
render: function() {
return this.props.a==1 ? <p>123</p> : null
}
});
var com = <Component/>,
com2 = '<Component/>';
console.log(React.isValidElement(com)); //true
console.log(React.isValidElement(com2)); //false

React.renderToStaticMarkup:
类似 React.renderToString ,但只生成纯粹的HTML标记字符串,不会包含类似 data-reactid 之类的React属性,从而节省字节数
var Component = React.createClass({
render: function() {
return this.props.a==1 ? <p>123</p> : null
}
});

var com = <Component a="1" />,
comHTML = React.renderToStaticMarkup(com);
console.log(comHTML); //输出“<p>123</p>”

React.renderToString:
React为服务端提供的一个方法,可以直接输出 ReactElement 为 HTML 字符串,将这些标记发送(比如 res.write(HTMLString))给客户端,可以获得更快的页面加载速度,并且有利于搜索引擎抓取页面,方便做 SEO(主要是百度不争气,谷歌早可以从内存中去抓最终生成的HTML内容了)
var Component = React.createClass({
render: function() {
return this.props.a==1 ? <p>123</p> : null
}
});
var com = <Component a="1" />,
comHTML = React.renderToString(com);
console.log(comHTML); //输出“<p data-reactid=".0" data-react-checksum="-2122315716">123</p>”

 

react中常用的一些方法的更多相关文章

  1. jQuery中常用的函数方法

    jQuery中常用的函数方法总结 Ajax处理 load(url,[data],[callback]) url (String) : 待装入 HTML 网页网址. data (Map) : (可选) ...

  2. 2019-2-20C#开发中常用加密解密方法解析

    C#开发中常用加密解密方法解析 一.MD5加密算法 我想这是大家都常听过的算法,可能也用的比较多.那么什么是MD5算法呢?MD5全称是 message-digest algorithm 5[|ˈmes ...

  3. React中ref的使用方法

    React中ref的使用方法 在react典型的数据流中,props传递是父子组件交互的唯一方式:通过传递一个新的props值来使子组件重新re-render,从而达到父子组件通信.当然,就像reac ...

  4. VB的一些项目中常用的通用方法-一般用于验证类

    1.VB的一些项目中常用的通用方法: ' 设置校验键盘输入值,数字 Public Function kyd(key As Integer) As Integer Dim mychar mychar = ...

  5. 【Java】Java中常用的String方法

    本文转载于:java中常用的String方法 1 length()字符串的长度 String a = "Hello Word!"; System.out.println(a.len ...

  6. php面向对象类中常用的魔术方法

    php面向对象类中常用的魔术方法   1.__construct():构造方法,当类被实例化new $class时被自动调用的方法,在类的继承中可以继承与覆盖该方法,例: //__construct( ...

  7. java在acm中常用基础技巧方法

    java在acm中常用基础技巧方法 如果学到了新的技巧,本博客会更新~ input input-std @Frosero import java.util.*; public class Main { ...

  8. shell中常用的命令方法

    <1>Linux Shell 脚本中字符串的连接方法 [root@localhost company]# var1=/etc/[root@localhost company]# var3= ...

  9. react中的children使用方法

    使用过vue的小伙伴都知道vue中有个slot,也就是插槽,作用就是占位,那么再react中可以使用children来替代 父组件 render(){ return( <div> < ...

随机推荐

  1. 1084:XX开公司<回溯>

    Description 2020年,xx开了一家拥有N个员工的大公司.每天,xx都要分配N项工作给他的员工,但是,由于能力的不同,每个人对处理相同工作所需要的时间有快有慢.众所周知,xx是一个非常重视 ...

  2. 文本属性Attributes 初步

    转载自:http://www.cnblogs.com/qingche/p/3574995.html 1.NSKernAttributeName: @10 调整字句 kerning 字句调整 2.NSF ...

  3. PAT (Advanced Level) 1055. The World's Richest (25)

    排序.随便加点优化就能过. #include<iostream> #include<cstring> #include<cmath> #include<alg ...

  4. 三列布局,读《css那些事儿》

    1.两列定宽,中间自适应 要点:浮动.负边距效果.mainbox增加内容div并设置margin.:after清除浮动 原理:mainbox的浮动并将其宽度设置为100%,次要内容及侧边栏设置固定宽度 ...

  5. Python 100例(下)

    如果你坚持到这了,哪就为自己鼓掌吧!坚持,你一定可以. 实例51: 题目:学习使用按位与&. #!/usr/bin/env  python# --*--coding:utf-8 --*--'' ...

  6. process想停就停,真爽

    kill -STOP 18168 kill -STOP 18310 kill -CONT 18310 kill -CONT 18168

  7. Linux的iptables常用配置范例(3)

    编辑/etc/rc.local,加入iptables -t nat -A POSTROUTING -s 192.168.0.0/24 -o eth1 -j MASQUERADE,外网口eth1为dhc ...

  8. 如何解决找不到方法HttpServletRequest.getServletContext() ---- NoSuchMethodError

    报错 java.lang.NoSuchMethodError: javax.servlet.http.HttpServletRequest.getServletContext()Ljavax/serv ...

  9. Linux 最简单的驱动程序hello world

    图片驱动位置:kernel3-10/driver/misc/mediatek/imgsensor/src/mt8127/kd_sensorlist.c 例子:kernel-3.10/driver/mi ...

  10. STM32 的加密实现(转)

    源:STM32 的加密实现 基于STM32F103的ID号对应用程序的保护方法 目的:对运行于STM32的嵌入式代码程序进行加密 编译环境:IAR Embedded System for ARM5.5 ...