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>”