2

我有兴趣尝试使用 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>
4

1 回答 1

1

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

  • 您可以使用静态菜单和页脚定义基本布局，并使用 react-router CSSTransitionGroup 通过 AJAX 加载内容，这是一个很好的示例 (codepen.io/luisrudge/pen/QbEeOR/)，这样用户可以获得无缝的 Web 体验。
  • 您可以使用 websockets 更快地与 wordpress 进行通信。
  • 由于您总是会为每个内容组件上的结果调用 API，因此您可能需要考虑将一些内容存储在 localStorage 或 session 中以提高效率并减少 API 调用。（或者也许使用通量？）
于 2016-05-31T06:18:51.287 回答