通过 WordPress WP-API 在客户端渲染 React 组件答案

【问题标题】：Rendering React Components Client-side via WordPress WP-API通过 WordPress WP-API 在客户端渲染 React 组件
【发布时间】：2016-05-05 20:57:01
【问题描述】：

我对试验 React 和 WordPress WP-API 很感兴趣，我在下面快速整理了一个概念验证页面模板。

很好奇，使用 React 在客户端渲染 API 数据与使用 PHP 在服务器上像往常一样渲染 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>

【问题讨论】：

标签： php wordpress reactjs wp-api

【解决方案1】：

我认为使用 React 可以通过以下一些方法为用户提供更好的性能和体验-

您可以使用静态菜单和页脚定义基本布局并加载通过 AJAX 与 react-router CSSTransitionGroup 的内容在这里是一个很好的例子（codepen.io/luisrudge/pen/QbEeOR/），这样用户就可以拥有无缝的网络经验。
您可以使用 websocket 更快地与 wordpress 通信。
由于您将始终为每个内容组件的结果调用 API，因此您可能需要考虑将一些内容存储在 localStorage 或 session 中以提高效率并减少 API 调用。（或者也许使用 Flux？）

【讨论】：