在前端开发中，响应式设计已经变成了不可缺少的技术。而在 React 开发中，我们经常需要在不同的屏幕尺寸下进行不同的布局和渲染。这时候，我们就需要一个能够帮助我们根据屏幕尺寸自动调整 React 元素的工具，就是 react-element-breakpoints。
介绍
react-element-breakpoints 是一个用于 React 的轻量级响应式断点库。它可以帮助开发者处理当窗口大小发生变化时对组件的自动更新和渲染。
安装
使用 npm 进行安装：
$ npm install react-element-breakpoints
使用
在你的 React 组件中，首先需要引入 react-element-breakpoints：
import React, { useRef, useState } from 'react'; import { useBreakpoints, BreakpointProvider } from 'react-element-breakpoints';
BreakpointProvider
接着，在组件中添加 BreakpointProvider 包裹其他组件，将提供断点信息：
function MyComponent() { return ( <BreakpointProvider> <MyBreakpointDependentContent /> </BreakpointProvider> ); }
useBreakpoints
在需要响应变化的组件中使用 useBreakpoints 钩子，配合断点信息：
-- -------------------- ---- ------- -------- ------------------------------ - ----- ------- --------- - -------------- ----- - ----------- - - ----------------- ------ - ---- -------- ---------------- ------ --- ---------- ----- ------------- ------- ----------- -- -------------- - ----- -------- ------------- ------ -- - -------- ----- --------- ---- -------- ---------------- --------- ------- ---- ------ ----------- ------ --- -- -- ------------------- ---- -------- ---------------- ------- -------- ------- ----------- ---------- -- - ---------------------------- ----- --- ------ ------ -- -展开代码
这里将宽度设置为 useState 状态，通过构建页面中的一个可控宽度的元素，当用户拖动窗口使得元素的 width 属性跨越某个断点时，即可触发断点更新事件。在更新的同时，来自 useBreakpoints 钩子的 { breakpoints } 属性也会得到更新，我们可以将其输出到预处理组件中。
断点
一般，我们只需要使用三个预定义的断点：小于 600px 的 "xs"，600px 到 960px 的 "sm"，以及大于 960px 的 "lg"。如果需要重新定义断点，请嵌套调用 BreakpointProvider 组件，其中 BreakpointProvider 描述了范围的断点。
-- -------------------- ---- ------- -------------------- ------------------- ------------ -------- ---- ---- ---- ---- -- -------------------------- --------- - ----------------------------- -- --------------------- ---------------------展开代码
上面的代码定义了两个断点：小于 500px 高度和宽度分别在 500px 和 1000px 之间的 "small" 断点和大于 500px 高度和大于 1000px 宽度的 "large" 断点。
常见问题
钩子的重复调用
如果多次使用 useBreakpoints 钩子，则会在窗口大小更改时多次调用，可以使用 useRef 解决（下面这种是 hooks 的解决方案）：
-- -------------------- ---- ------- -------- ------------------ - ----- --- - --------- ------------ -- - ----------- - ------ --- ------ ------------ - -------- ------------------ - ----- --------------- - ------------------------- -- --- -展开代码
请求动画帧
当窗口重绘时，应该使用请求动画帧来追踪样式的更改。使用 useAnimationFrame 钩子（也称为 useRender）：
-- -------------------- ---- ------- ------ ------ - -------- - ---- -------- ------ - -------------- - ---- ---------------------------- ------ - ----------------- - ---- ------------ -------- ------------------------------ - ----- ------- --------- - -------------- ----- - ----------- - - ----------------- -------------------- -- - ---------------------------- --- ------ - ---- -------- ---------------- ------ --- --- ----- --- -- --- ------ -- -展开代码
进阶
更进一步了解和扩展 react-element-breakpoints 的更多功能和可能性，请访问官方文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005570d81e8991b448d3f75
