レンダリング反応コンポーネントWordPress WP-API経由のクライアントサイド

Question

私はReactとWordPress WP-APIを試してみたいと思っています。

奇妙なことに、PHPでサーバー上で通常通りにWPをレンダリングできるように、Reactを使用してクライアントにAPIデータを表示するとパフォーマンスにどのような影響がありますか？私はと考えて

<div id="react"></div> 

<script type="text/babel"> 

var WpPage = React.createClass({ 
    getInitialState: function() { 
    return { 
     id: '', 
     date: '' 
    }; 
    }, 

    componentDidMount: function() { 
    this.serverRequest = $.get(this.props.source, function (result) { 
     var pageObj = result; 
     this.setState({ 
     id: pageObj.id, 
     date: pageObj.date 
     }); 
    }.bind(this)); 
    }, 

    componentWillUnmount: function() { 
    this.serverRequest.abort(); 
    }, 

    render: function() { 
    return (
     <div> 
     <p>{this.state.id} :: ID</p> 
     <p>{this.state.date} :: DATE</p> 
     </div> 
    ); 
    } 
}); 

ReactDOM.render(
    <WpPage source="/wp-json/wp/v2/pages/{id}" />, 
    document.getElementById('react') 
); 
</script> 

Answer 1

あなたは、静的なメニューとフッターと負荷 AJAXを介してコンテンツを持つとベースのレイアウトを定義することができますが、いくつかのmethods-

• に従うことによって、ユーザーのための優れたパフォーマンスと経験を持つことができますリアクト反応ルータCSSTransitionGroupここに はよい例（codepen.io/luisrudge/pen/QbEeOR/）、この方法ユーザはシームレスなウェブ 経験を持つことができます。
• あなたは、wordpressとのコミュニケーションのためのWebソケットをより速く持つことができます。
• すべてのコンテンツコンポーネントの結果についてAPIを常に呼び出すので、効率性とAPI呼び出しのために、ローカルストレージまたはセッションにコンテンツを保存することを検討してください。 （またはFluxを使用するかもしれません）