如何在初始服务器端渲染后立即使用 React + NextJS 重新渲染客户端？

IT技术 css reactjs responsive-design media-queries next.js
2021-05-13 15:53:46

我使用 Next.js 和 React 创建了一个网站，并且非常喜欢声明一个 js 变量来定义这样的组件样式：

const foo = {
  fontSize: '12px',
};

在渲染方法中，我这样做：

render() {
  return (
    <div style={foo}>bar</div>
  );
}

使用 ESLint，我可以快速找到未使用的样式/变量（如果引用已消失）并保持代码整洁。因此，我不会像这样使用<style>或样式化 jsx：

render() {
  return (
    <div>
      <style>
        .foo {
          font-size: '12px';
        }
      </style>
      <div className="foo">bar</div>
    </div>
  );
}

问题

仅使用 js 变量而不是使用 js 变量的问题<style>是我无法应用媒体查询来定位不同的屏幕尺寸，所以我想我可以使用 javascript 解决这个问题：

render() {
  // Bigger font size for smaller devices
  if (windowWidth < 768) foo.fontSize = '24px';

  return (
    <div style={foo}>bar</div>
  );
}

我解决windowWidth了这个解决方法：在 ReactJS 中获取视口/窗口高度。只要渲染发生在客户端，这就会很好地工作。这种方法的问题在于 Next.js 将首先在服务器端呈现视图。此时，窗口/屏幕大小未知，因此windowWidth = 0. 因此，我认为客户端在从服务器接收到初始呈现的页面后必须重新呈现。

问题）：

  1. 如何强制客户端在服务器初始渲染后立即重新渲染以确定 的值windowWidth？

  2. 这是一个好的做法/解决方案还是会导致性能问题或元素闪烁？

2个回答

找到了解决方案。服务端渲染后，NextJS 会自动重新渲染客户端。添加一些控制台输出显示：

const foo = {
  fontSize: '12px',
};

渲染方法：

render() {
  if (windowWidth < 768) {
    foo.fontSize = '24px';
    console.log('24px');
  } else {
    console.log('12px');
  }

  return (
    <div style={foo}>bar</div>
  );
}

在小屏幕上查看，这将打印：

12px
24px

但是，按下浏览器的重新加载按钮，尽管样式变量的值明显改变了，但字体大小并没有改变。

解决方案是创建原始对象的副本并对其进行操作：

render() {
  let foo2;
  if (windowWidth < 768) {
    foo2 = Object.assign({}, foo, { fontSize: '24px' });
  } else {
    foo2 = Object.assign({}, foo);
  }

  return (
    <div style={foo2}>bar</div>
  );
}

这将在运行时更改字体大小。但是，当页面加载时，您将在几分之一秒内看到旧的 12px 字体大小，当客户端渲染完成时，它将跳转到新的 24px 字体大小。不确定我是否会从 UX 的角度采用此方法，但从技术上讲，这是一个可行的解决方案。不过不是很喜欢:-(

在 reactjs 中随时触发渲染的最佳方法是创建具有该属性的 react 元素。在您的情况下，我会先计算要使用的字体大小，然后创建具有该属性的元素。
字体大小似乎不会改变，但如果改变了，您可能必须将此状态放在使用它的元素的公共父元素中。这个父级会将这个状态作为props提供给它的子级。

正如评论者所建议的那样，有多种触发更新的方法，但最好通过正常的react方法重新组织您的元素以执行此操作。不要害怕制作更多更小的react元素！

其它你可能感兴趣的问题
上一篇如何在 react.js 中使用 Google Cloud Storage？ 下一篇使用自定义组件时不会触发 onChange 处理程序