@artsy/反应响应-媒体

安装

  yarn add @artsy/react-responsive-media

概览

在写入响应组件时,通常使用媒体查询来调整 当满足某些条件时显示。 历史上发生过这种事 直接在CSS/HTML中:

@media screen and (max-width: 767px) {
  .my-container {
    width: 100%;
  }
}
@media screen and (min-width: 768px) {
  .my-container {
    width: 50%;
  }
}

<div class="my-container" />

通过钩入断点定义, @artsy/react-responsive-media 带 并宣布:

import React from "react"
import { Style } from "react-head"
import { createMedia } from '@artsy/react-responsive-media'

const { MediaContextProvider, Media, createMediaStyle } = createMedia({
  breakpoints: {
    sm: 0,
    md: 768
    lg: 1024,
    xl: 1192,
  },
})

const App = () => (
  <>
    <Style>{createMediaStyle()}</Style>
    <MediaContextProvider>
      <Media at='sm'>
        <MobileApp />
      </Media>
      <Media at='md'>
        <TabletApp />
      </Media>
      <Media greaterThanOrEqual='lg'>
        <DesktopApp />
      </Media>
    </MediaContextProvider>
  </>
)

演示

您可以在这个寄存器中找到一个实例, 并像这样在本地运行 :

git clone https://github.com/artsy/react-responsive-media.git
cd react-responsive-media
yarn install
yarn example
open http://localhost:8080

为什么不有条件地做呢?

其他现有解决办法采取有条件的办法,例如: react-responsive 或者说 react-media,所以在哪里 这种做法是否不同?

服务器侧渲染!

但首先,什么是有条件的渲染?

在 " 反应生态系统 " 中,采用共同方法撰写声明性回应 组件是使用浏览器 matchMedia api 密码数字 :

<Responsive>
  {({ xs }) => {
    if (xs) {
      return <MobileApp />
    } else {
      return <DesktopApp />
    }
  }}
</Responsive>

在客户端上,当给定的断点匹配时 有条件地反应 树.

然而,在与《公约》和《京都议定书》一起使用时,这种做法有一些缺陷 服务器侧渲染( SSR) :

• 无法可靠地知道用户当前在 服务器渲染相, 因为需要浏览器 .

• 基于用户代理嗅探设置断点大小容易出错 无法精确匹配设备容量 。 一个手机 设备的像素密度可能大于另一个,移动设备可能适合 考虑设备取向时的多个断点,以及 桌面客户端根本不可能知道。 最好的Devs可以做的是猜测 当前断点并填充 <Responsive> 假设状态.

Artsy决定了什么是最佳的取舍 我们接近了 问题如下:

1. 给服务器上的所有断点加注并发送下接线.

2. 浏览器收到带有适当媒体查询样式的标记并会 立即开始渲染预期 视觉 不管结果如何 浏览器所在的视图口宽度 .

3. 当所有的JS已经加载和反应 开始再水化阶段,我们询问 浏览器显示它目前处于什么断点,然后限制输出 的组件。 防止生命周期方法 从隐藏组件中开火和未使用的html写入 DOM.

4. 此外,我们用浏览器登记事件听众,以通知 MediaContextProvider 当一个不同的断点匹配,然后 使用新值对 onlyMatch 道具 (英语).

让我们比较一下组件树使用什么 matchMedia 看起来像我们的 办法:

<Responsive>
  {({ xs }) => {
    if (xs) return <SmallArticleItem {...props} />
    else return <LargeArticleItem {...props} />
  }}
</Responsive>

<>
  <Media at="xs">
    <SmallArticleItem {...props} />
  </Media>
  <Media greaterThan="xs">
    <LargeArticleItem {...props} />
  </Media>
</>

完整的例子见[#server-side-refersing][].

API 密码

创建媒体

先为事. 您需要定义所需要的断点和互动 用来制作您可以全程使用的一套媒体组件 你的申请.

例如,考虑具有下列断点的应用程序:

• 1至768分之间的取景口宽度, 命名为 sm。 。 。 .
• 宽度介于768至1024分之间, 命名为 md。 。 。 .
• 1024至1192分之间的取景口宽度,命名 lg。 。 。 .
• 1192分及以上的取景口宽度,命名 xl。 。 。 .

以及下列相互作用:

• 支持徘徊指针设备的设备,命名为 hover。 。 。 .
• 不支持在指针设备上徘徊的设备,命名 notHover。 。 。 .

然后,您将制作这样的一套媒体组件:

const MyAppMediaComponents = createMedia({
  breakpoints: {
    sm: 0,
    md: 768
    lg: 1024,
    xl: 1192,
  },
  interactions: {
    hover: "(hover: hover)",
    notHover: "(hover: none)",
  },
})

如你所见,断点由它们定义 开始 乘以第一个 一个预计在0开始.

再说 Media 财务报告和审定财务报表 MediaContextProvider 构成部分,a MediaStyle 函数,用于所有可能的媒体查询 Media 实例可以加以利用。 确定插入此选项为 <style> 文档中的元素 <head> 键.

import { Style } from "react-head"
import { MediaContextProvider } from "./Responsive"
import { Home } from "./Home"

const App = () => (
  <>
    <Style>{MediaStyle()}</Style>
    <MediaContextProvider>
      <Home />
    </MediaContextProvider>
  </>
)

最好用自己的模块来设置 在您的应用程序中导入 :

export const { MediaContextProvider, Media, MediaStyle } = MyAppMediaComponents

介质连接器

这个 MediaContextProvider 组件如何影响 Media 组件将是: 已经完成.

只匹配

通过具体说明,可限制特定断点/相互作用 要匹配的媒体查询列表。 默认 全部 {\fn黑体\fs22\bord1\shad0\3ahbe\4ah00\fscx67\fscy66\2chffffff\3ch808080}会送来的.

禁用 Dynamic 媒体查询

默认情况下,当提供客户端时,浏览器的 matchMedia api 密码 将用来 进一步 限制 onlyMatch 列表中仅包含当前匹配的媒体查询。 这样做是为了 避免触发隐藏组件的相关生命周期钩.

阻止这种行为主要是为了调试目的.

媒体

这个 Media 为您的应用程序创建的组件有几种相互排斥 表示您应答的布局。 这些 道具都根据您提供的指定断点运行 创建了媒体组件.

为每个道具使用断点定义提供的例子,定义如下: " 设置 " 部分.

时间

使用它来宣告儿童只应在特定的 断点,指取景口宽度大于或等于 开始抵消断点,但小于下一个断点,如果一个 已存在.

例如,儿童 Media 声明只有在 取景口宽度为0至768分:

<Media at="sm">...</Media>

小谭

使用此功能来声明儿童只应在取景口时可见 宽度小于指定的断点的起始相冲.

例如,儿童 Media 声明只有在 取景口宽度为0至1024分:

<Media lessThan="lg">...</Media>

大调

使用此功能来声明儿童只应在取景口时可见 宽度大于起始相抵 下一个 断点.

例如,儿童 Media 声明只有在 视图宽度大于1024分 :

<Media greaterThan="md">...</Media>

大塔诺平方

使用此功能来声明儿童只应在取景口时可见 宽度等于指定的断点的起始相抵 或者说 更强.

例如,儿童 Media 声明只有在 取景口宽度为768分或上:

<Media greaterThanOrEqual="md">...</Media>

介于

使用此功能来声明儿童只应在取景口时可见 宽度等于第一个指定断点的起始相冲,但小于 而不是第二个指定断点的起始相冲.

例如,儿童 Media 声明只有在 取景口宽度为768至1192分:

<Media between={["md", "xl"]}>...</Media>

服务器侧渲染

开始

客户端渲染

开始

Pros对Cons

职业:

• 由简单,被证明的技术之上所建:HTML和CSS媒体查询.
• 用户在设备的正确断点上看到渲染标记, 甚至 在装入反应前 .

计数 :

• 现在的页面包括标记 全部 断点,可以增加页面大小.
• 当前媒体查询已不再是组件可以访问的;它是 仅由道具决定 <Media> 他们发现自己 进去.

最后一个骗局是个有趣的问题 我们怎么代表一个 在不同断点上不同样式的组件? (让我们想象一下) (单位:千美元) matchMedia 实例。 )

<Sans size={xs ? 2 : 3}>

<>
  <Media at="xs">
    {this.getComponent('xs')
  </Media>
  <Media greaterThan="xs">
    {this.getComponent()
  </Media>
</>

getComponent(breakpoint?: string) {
  const xs = breakpoint === 'xs'
  return <Sans size={xs ? 2 : 3} />
}

我们还在想这个模式,所以请 告诉我们 如果你有建议的话.

发展