Skip to content

Files

Latest commit

 

History

History
120 lines (63 loc) · 2.82 KB

README.md

File metadata and controls

120 lines (63 loc) · 2.82 KB

Reactsyntax dom

it is as a factory to create html element instance

React DOM

虛擬節點

HTML DOM

底層節點,如要透過 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);
 
 }

superSelect()

https://www.itdaan.com/tw/8a848e11d6efc7edca2c1930db78a1b4 (元素過濾器)

DOMNode ID

如使用不受控元件,則經過序列化,react 元素的名稱識別極為重要。

see reactDOMnode.js code

ES5, HTML

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>

ES6, JSX

    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>