コンポーネントのhtmlを保存またはキャッシュする方法は？

Question

私はあなたがコンポーネントの状態を保存し、要素が "再レンダリング"されるように変更することができますが、私の使用例では、レンダリングのスピードが上がらない状況があります。

私が探しているのは、いったんComponentがレンダリングされると、その子のhtmlを含むhtmlコードが必要だということです。

たぶんの線に沿って何か：私はこれと同様の問題を見てきました

render() { 
    return(
      <ChildComponent/> 
     ); 
} 

componentDidMount() { 
    // Get the html code of this Component here 
    // Something like: 
    // <div> 
    // <span>Child component</span> 
    // </div> 
} 

： React caching rendered components

しかし、それは1のようにHTML要素を取得することができる方法についての深さには行きません文字列

Answer 1

renderToStringon the clientへの道を探したり、DOMに直接アクセスしたりして、実際の（きれいではない）DOMノードを返します。それはおそらくですので、

class Example extends React.Component { 
 
    componentDidMount() { 
 
    console.log(
 
     ReactDOM.findDOMNode(this).outerHTML 
 
    ); 
 
    } 
 

 
    render() { 
 
    return(
 
     <div id="demo"> 
 
     Ranch it up! 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(<Example />, document.getElementById('View'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id='View'></div>

私は、これはあなたが実際にどこかにこの文字列を使用する場合はすべてではないことに有用であることを想像（それをレンダリング）：

はここfindDOMNodeとouterHTMLを使用した例です保存するとすべてのデータ（state）を保存してそこから移動してください。

Answer 2

DataGrid製品で作業中にこの同じ問題が発生しましたhttp://www.reactdatagrid.com - HTMLタグと属性値を基本的にオブジェクトに格納します。私たちのrenderメソッドは、この（実際のないコード）のようなものになります。

render(){ 
    this.reactElement = React.createElement(tagName, propertyBag, children); 
    return this.reactElement; 
} 

私たちは、かなり複雑なグリッド製品を持っているが、これは私たちのために合理的に速く動作します。