Question

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

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

<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或session中存储一些内容以提高效率和减少API调用。（或者可能使用Flux？）

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

1 个答案: