it is as a factory to create html element instance
虛擬節點
底層節點,如要透過 react 與底層溝通,可在元件中添加 ref,一個元件中的所有 ref 都會自動添加到 this.refs 以存取特定元素。 並在 react 生命週期的 componentDidMount()內執行,透過 getDOMNode 可修改底層節點。 抑或是在生命週期的 componentWillUnmount() 內執行,透過 getDOMNode 可取消底層節點,避免記憶體洩漏。
render: function(){
return <div ref="autoK"/>
}
//
componentDidMount: function(){ //可能有功能仍然存,即便移除節點上元件後,仍然存活的生命週期,造成記憶體洩漏
var kkk = this.refs.autoK.getDOMNode();
alert(kkk);
var ele = this.el = document.createElement('div');
this.getDOMNode().appendChild(ele);
$(ele).superSelect(this.state);
$(ele).on('事件', 方法名稱); // 建立監聽器
}
//
componentWillUnmount: function(){ //解決記憶體洩漏問題,在此生命週期中,將其DOM Node直接移除,可清理元件。
this.refs.autoK.getDOMNode().clear();
// this.res.autoK.getDOMNode().removeChild();
this.getDomNode().removeChild(this.ele);
$(this.ele).off(); // 移除監聽器
}
compoentDidUpdate: function(){ // 重新載入
this.componentWillUnmount();
this.componentDidMount();
}
componentWillReceiveProps: function(anotherParam){
$(this.ele).superSelect('update', anotherParam);
}
https://www.itdaan.com/tw/8a848e11d6efc7edca2c1930db78a1b4 (元素過濾器)
如使用不受控元件,則經過序列化,react 元素的名稱識別極為重要。
see reactDOMnode.js code
render: function(){
// return React.createElement(type, prop, child);
// type is htm tag, prop is component, 3rd param is value of props
return (
<div className="">
<h1> time now is {this.props.day} </h1>
</div>
);
}
<nod tag class=""> value </node tag>
render(){
return(
React.createElement(node, class, value),
React.createElement("h1", null, this.props.children)
);
}
用 {} 取代 “” 可利用全域變數設定屬性如類別名稱
var classV = 'a_class';
<node tag className={classV}> value </node tag>
{} 可以封裝物件也可以封裝函式結果
<node tag id={this.getID()} className={classV}> {this.props.children} </node tag>