通过 WordPress WP-API 在客户端呈现 React 组件

Question

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

好奇，使用 React 在客户端呈现 API 数据与在 PHP 中允许 WP 在服务器上像往常一样呈现数据有什么性能影响？

<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

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

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

通过 WordPress WP-API 在客户端呈现 React 组件

Rendering React Components Client-side via WordPress WP-API

php

wordpress

reactjs

wp-api