【问题标题】:How correctly suspend react routing process in SPA?如何正确暂停 SPA 中的反应路由过程?
【发布时间】:2020-04-24 16:10:21
【问题描述】:

有一个网站,前面是ReactJS写的。为了CEO的正确操作,使用了SSR。 算法是这样的:

1 页加载

  1. 浏览器打开/foo;
  2. SSR 检查是否在缓存中 /foo 没有找到;
  3. SSR 在服务器上呈现并根据请求/foo 执行 react 应用程序;
  4. SSR 放入缓存 HTML,结果是渲染过程 / foo 的结果;
  5. SSR 给浏览器一个 HTMLL,它是渲染过程 / foo 的结果;
  6. 浏览器执行异步请求,都是HTML,是/foo渲染的结果(CSS、JS、favicon ...);
  7. 加载的应用程序反应“知道页面已经被绘制并且不需要执行路由等”;
  8. react 处理用户的进一步操作(如在常规 SPA 中)。

后续更新

  1. 浏览器打开/foo;
  2. SSR 检查是否在缓存中 /foo 没有找到;
  3. SSR 在服务器上呈现并根据请求/foo 执行 react 应用程序;
  4. SSR 放入缓存 HTML,结果是渲染过程 / foo 的结果;
  5. 给浏览器一个 HTMLL,它是渲染过程 / foo 的结果;
  6. 浏览器执行异步请求,都是HTML,是/foo渲染的结果(CSS、JS、favicon ...);
  7. 加载的应用程序反应“知道页面已经被绘制并且不需要执行路由等”;

react 处理用户的进一步操作(如在常规 SPA 中)。 问题就在前面,每次刷新页面时,都会启动路由,重新绘制整个应用程序,从而出现“闪烁”,即第7点不起作用。

问题:是否可以在某个时刻停止此渲染?告诉路线现在不需要绘制它。也许有什么流行的解决方案?

【问题讨论】:

    标签: javascript reactjs server-side-rendering react-ssr


    【解决方案1】:

    您可以使用生命周期方法 shouldComponentUpdate。您可以在方法中设置自己的逻辑,以便重新渲染或不重新渲染组件。 shouldComponentUpdate 类方法在运行组件的重新渲染之前可以访问下一个道具和状态。在这里,您可以决定通过从此方法返回 false 来阻止重新渲染。如果返回 true,则组件重新渲染。

    【讨论】:

    • 方法 shouldComponentUpdate 在道具或状态更改时启动,但我需要能够在页面重新加载时停止路由
    • 您是否尝试将当前路由路径存储在本地存储中?
    • 你能解释一下你的意思吗?
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2017-05-07
    • 2019-08-09
    • 2020-07-29
    • 1970-01-01
    • 1970-01-01
    • 2012-07-29
    • 1970-01-01
    相关资源
    最近更新 更多