在 React.js 中将状态管理与 UX 集成

2020-10-21 08:00飞浪

介绍

在与用户沟通时，用户体验非常重要，它可以告诉用户应用中正在发生什么。一个常见的用例是在显示实际界面之前向用户显示加载界面。这样做通常是为了让一些长时间运行的后台进程在更新主组件的状态值之前完成其工作。在本指南中，我们将介绍一种实现此效果的简单方法。

语境

首先，您必须以从某些第三方 API 获取数据的形式模拟长时间运行的过程。为此，请使用此端点，它会随机吐出热门电视剧《绝命毒师》中的一句台词（有关此上下文中的更多 API 端点，请参阅https://github.com/shevabam/breaking-bad-quotes）。响应的内容将是一个具有以下结构的 JSON 数组：

      
  {
    "quote": "I am not in danger

设置

创建一个如下所示的 React.js 组件：

      import React from 'react';
import $ from 'jquery';

export default class BBQuoteGenerator extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      quote: false
    }
  }

  render() {
    return (
      <div>
        <h1>
          Breaking Bad Quote of the Day
        </h1>
      </div>
    );
  }
}
    

quotes状态属性将保存要在应用中呈现的当前引言。请注意，即使您期望的值数组与上一节中显示的示例类似，其初始值也是false。这背后的逻辑是，您首先要检查该值是否为false才能显示实际内容，这表明数据确实已加载。

创建加载 UI

现在，您可以通过创建以下实用方法来扩展组件的渲染部分，该方法返回显示引言的 UI 元素（如果state.quote不为 false）。否则，向用户显示一些加载消息，表明应用仍在获取数据。

      renderQuote() {
  if(this.state.quote) {
    return (
      <div>
        <h2>
          <i>
            "{this.state.quote.quote}"
          </i>
        </h2>
        <h3>
          - {this.state.quote.author}
        </h3>
      </div>
    );
  } else {
    return (
      <div>
        Loading...
      </div>
    );
  }
}
    

该函数仅返回一个包含界面的jsx元素。 else部分表示quote为false值，因此会呈现一些加载消息。只要return语句返回单个元素，您可以轻松地用自己的加载启动消息替换它。目前，它只是返回的简单文本以指示加载。

然后您可以在主渲染调用中调用该函数：

      render() {
  return (
    <div>
      <h1>
        Breaking Bad Quote of the Day
      </h1>
      {this.renderQuote()}
    </div>
  );
}
    

获取数据

为了使quote不为false，即用实际数据填充它，您必须创建一个执行两件事的函数：

从 API 获取数据
更新组件的state.quote值以强制重新渲染 UI

创建一个名为fetch()的函数，执行以下操作：

      fetch() {
  var context = this;

  $.ajax({
    url: "https://github.com/shevabam/breaking-bad-quotes",
    dataType: "json",
    method: "GET",
    success: function(response) {
      var q = response[0];

      context.setState({
        quote: q
      });
    }
  });
}
    

需要 context 变量来创建对此的引用并表示组件的实例。这将允许在AJAX 调用的成功回调中调用setState 。由于预期的响应是一个数组，因此您必须获取第一个元素 ( 0 ) ，而不是将整个响应存储在quote中。将数据设置为quote现在将使数据不为false并呈现它要显示的实际 UI。

组件加载时调用 Fetch

现在，您必须确保在第一次加载组件时立即触发fetch。为此，请重写组件的componentDidMount函数并在其中调用fetch 。

      componentDidMount() {
  this.fetch();
}
    

总体代码

最终代码如下：

      import React from 'react';
import $ from 'jquery';

export default class BBQuoteGenerator extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      quote: false
    }
  }

  componentDidMount() {
    this.fetch();
  }

  fetch() {
    var context = this;

    $.ajax({
      url: "https://github.com/shevabam/breaking-bad-quotes",
      dataType: "json",
      method: "GET",
      success: function(response) {
        var q = response[0];

        context.setState({
          quote: q
        });
      }
    });
  }

  renderQuote() {
    if(this.state.quote) {
      return (
        <div>
          <h2>
            <i>
              "{this.state.quote.quote}"
            </i>
          </h2>
          <h3>
            - {this.state.quote.author}
          </h3>
        </div>
      );
    } else {
      return (
        <div>
          Loading...
        </div>
      );
    }
  }

  render() {
    return (
      <div>
        <h1>
          Breaking Bad Quote of the Day
        </h1>
        {this.renderQuote()}
      </div>
    );
  }
}
    

结论

首先向用户显示加载消息是一种很好的用户体验方法，可以表明幕后仍在发生一些事情。使用 React.js 的状态管理机制，您可以使用数据的值来确定何时显示加载或何时应显示实际 UI。这可以包装在组件内的实用函数中，并在主渲染函数中调用。如本例所示，主渲染 UI 不必包含任何逻辑，因为 UI 根据renderQuote逻辑中实现的状态值quote从加载切换到显示。

如果您有任何问题/疑虑，或者只是想聊聊编程方面的一般问题，请联系我@happyalampay！

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

曝光28520浏览1543