## 安装 _需要 React >=16.8.0_ #### 新公共管理 npm 安装反应俳句 #### 发髻面包添加反应俳句 #### 纱线纱线添加反应俳句 #### PNPM pnpm 安装反应俳句 ## 实用程序 * class：“Class”组件是一个实用组件，它根据布尔条件有条件地将 CSS 类应用到“div”元素。它对于动态切换样式很有用。有关详细信息，请参阅 [class.md]()。 * 类：“类”组件是一个实用程序组件，它根据多个独立条件同时有条件地应用不同的类集。有关详细信息，请参阅 [classes.md]()。 * errorBoundary：`ErrorBoundary` 组件是一个实用程序组件，它捕获其子组件树中的错误，记录错误，并通过渲染后备 UI 来防止整个应用程序崩溃。有关详细信息，请参阅 [errorBoundary.md]()。 * for：`For` 组件可以迭代数组并为每个可用项目渲染 JSX。按键是自动分配的。有关详细信息，请参阅 [for.md]()。 * if：`If`组件可用于简单的条件渲染。只要传递给“isTrue”属性的条件为真，它就会渲染其子级。对于更复杂的渲染逻辑，可以使用 Show 组件，详细信息请参阅 [if.md]()。 * 图像：图像组件为损坏的图像提供自动回退处理。使用它可以实现稳健的媒体显示和优雅的降级。有关详细信息，请参阅 [image.md]()。 * renderAfter：`RenderAfter` 组件可用于在设置的延迟后渲染组件或包装在其中的 JSX 代码。有关详细信息，请参阅 [renderAfter.md]()。 * show：`Show`组件可用于复杂的条件渲染。该组件可以通过多个“When”组件和一个“Else”组件进行扩展，以根据您提供的条件呈现其内容。有关详细信息，请参阅 [show.md]()。 * switch：`Switch`组件可用于复杂的条件渲染。组件可以通过组件的多个“cases”和一个“default”组件进行切换，以防给定的动态值与任何 case 都不匹配。使用此组件干净地渲染动态组件。有关详细信息，请参阅 [switch.md]()。 ## 钩子 * useBatteryStatus：`useBatteryStatus()`钩子提供有关设备电池电量和充电状态的实时信息，并随着这些值的变化而自动更新。有关详细信息，请参阅 [useBatteryStatus.md]()。 * useClickOutside：useClickOutside() 钩子允许您在用户点击目标元素外部时触发回调。有关详细信息，请参阅 [useClickOutside.md]()。 * useClipboard：useClipboard() 挂钩将帮助您与浏览器的 navigator.clipboard 属性进行交互，以便将文本复制到用户的剪贴板。有关详细信息，请参阅 [useClipboard.md]()。 * useConfirmExit：useConfirmExit() 挂钩允许您在用户关闭当前选项卡之前向用户显示提示，具体取决于选项卡是否被声明为脏。有关详细信息，请参阅 [useConfirmExit.md]()。 * useCookie：useCookie() 挂钩提供反应式 cookie 管理，并具有跨浏览器选项卡的自动同步功能。使用它来持久存储需要在页面重新加载后继续存在的简单数据。有关详细信息，请参阅 [useCookie.md]()。 * useCookieListener：useCookieListener() 钩子监视 cookie 更改并在指定 cookie 更新时执行回调。使用它来同步选项卡/窗口之间的状态或对身份验证更改做出反应。有关详细信息，请参阅 [useCookieListener.md]()。 * useDebounce：useDebounce() 挂钩可让您对组件内的值更改进行反跳处理。当您想要执行基于状态的繁重操作时，请使用此选项有关详细信息，请参阅 [useDebounce.md]()。 * useDeviceOS：`useDeviceOS()` 钩子检测用户的操作系统，包括移动模拟器，并使用字符串操作来识别唯一或新的操作系统版本。有关详细信息，请参阅 [useDeviceOS.md]()。 * useEventListener：useEventListener() 挂钩可让您快速将事件添加到某个“ref”或应用程序的“window”（如果未指定“ref”）请参阅 [useEventListener.md]() 了解详细信息。 * useFavicon：`useFavicon()` 挂钩可以让您的组件动态更改网站的图标！刷新时图标会变回默认图标！有关详细信息，请参阅 [useFavicon.md]()。 * useFirstRender：`useFirstRender()` 钩子可以让你检测使用它的组件是否处于初始渲染状态，它返回一个布尔值和结果。有关详细信息，请参阅 [useFirstRender.md]()。 * useFullscreen：`useFullscreen()`钩子可以在进入全屏模式和退出全屏模式之间切换。有关详细信息，请参阅 [useFullscreen.md]()。 * useGeolocation：`useGeolocation()` 挂钩使用浏览器的 Geolocation API 提供对用户当前地理位置的访问。有关详细信息，请参阅 [useGeolocation.md]()。 * useHold：“useHold()”挂钩可让您检测目标元素上的长按（按住），并在用户仍按住（单击/触摸）元素时在设定的超时时间过去后触发处理程序。有关详细信息，请参阅 [useHold.md]()。 * useHover：useHover() 钩子可以让你检测用户的鼠标是否悬停在某个元素上。有关详细信息，请参阅 [useHover.md]()。 * useIdle：`useIdle()` 挂钩可让您检测网页上当前用户的活动或不活动，返回一个布尔值，表示用户当前是否处于活动状态。当指定延迟后没有触发任何事件时，用户将被设置为非活动状态。有关详细信息，请参阅 [useIdle.md]()。 * useInputValue：useInputValue() 挂钩可让您轻松管理组件中输入的状态，请参阅 [useInputValue.md]() 了解详细信息。 * useIntersectionObserver：`useIntersectionObserver`钩子提供了一种检测元素何时进入或退出视口的方法。它提供了用于配置交叉阈值、边距和一次性动画触发器的选项。有关详细信息，请参阅 [useIntersectionObserver.md]()。 * useInterval：useInterval() 挂钩提供带有启动/停止控件的托管间隔执行。将此用于轮询、动画或延迟状态更新等重复任务。有关详细信息，请参阅 [useInterval.md]()。 * useIsomorphicLayoutEffect：`useIsomorphicLayoutEffect()`钩子允许根据执行环境在使用`useEffect`和`useLayoutEffect`之间切换。如果您的应用程序使用服务器端渲染，则挂钩将运行“useEffect”，否则它将运行“useLayoutEffect”。有关详细信息，请参阅 [useIsomorphicLayoutEffect.md]()。 * useKeyPress：`useKeyPress()` 钩子监听特定的按键组合，并在它们全部按下时运行回调。它标准化按键以进行不区分大小写的匹配，并处理按键保持或焦点丢失等情况，以确保平稳的行为。有关详细信息，请参阅 [useKeyPress.md]()。 * useLeaveDetection：useLeaveDetection() 钩子允许您检测用户光标何时离开文档边界。有关详细信息，请参阅 [useLeaveDetection.md]()。 * useLocalStorage：“useLocalStorage()”挂钩是设置、读取和管理“localStorage”值的快速方法。它具有自动 JSON 序列化/反序列化功能。有关详细信息，请参阅 [useLocalStorage.md]()。 * useMediaQuery：`useMediaQuery()` 钩子允许你对 React 组件内的媒体查询做出反应。它接受“媒体查询”参数，并在查询与当前浏览器的属性匹配或不匹配时返回“true”或“false”。有关详细信息，请参阅 [useMediaQuery.md]()。 * useMousePosition：`useMousePosition()` 钩子让您可以在将鼠标悬停在特定容器或整个页面上时跟踪鼠标位置，因此，如果未通过 `ref` 提供目标容器，它将跟踪相对于整个文档的鼠标位置。有关详细信息，请参阅 [useMousePosition.md]()。 * useNetwork：useNetwork() 挂钩跟踪网络连接状态。使用它来显示离线/在线指示器或处理应用程序中的连接更改。有关详细信息，请参阅 [useNetwork.md]()。 * useOrientation：useOrientation() 挂钩检测并跟踪设备屏幕方向的变化。当您需要根据纵向/横向模式调整 UI 布局时，请使用此选项。有关详细信息，请参阅 [useOrientation.md]()。 * usePermission： `usePermission()` 检查浏览器权限以查询各种浏览器 API 的状态，有关详细信息，请参阅 [usePermission.md]()。 * usePrefersTheme： `usePrefersTheme()` 钩子允许检测用户首选的系统主题有关详细信息，请参阅 [usePrefersTheme.md]()。 * usePreventBodyScroll：`usePreventBodyScroll()` 钩子在活动时禁用正文滚动，并在停用或卸载组件时恢复它。它提供了布尔状态、设置器和用于动态滚动控制的切换函数。有关详细信息，请参阅 [usePreventBodyScroll.md]()。 * usePrevious： `usePrevious()` 跟踪并返回给定输入的前一个值有关详细信息，请参阅 [usePrevious.md]()。 * useScreenSize：`useScreenSize()` 钩子允许在组件中进行响应式断点检测。它返回辅助方法（“equals”、“lessThan”、“greaterThan”、“greaterThanEqual”、“lessThanEqual”）和一个表示当前屏幕尺寸的字符串方法（“toString”）：“xs”、“sm”、“md”、“lg”、“xl”或“尺寸大于 1535 像素的 2xl”。有关详细信息，请参阅 [useScreenSize.md]()。 * useScript：`useScript()` 钩子允许从 React 组件内部将脚本标签附加到文档中。状态变量返回可以具有以下值之一的状态：“idle”、“loading”、“ready”、“error”。有关详细信息，请参阅 [useScript.md]()。 * useScrollDevice：useScrollDevice() 挂钩检测用户是否使用鼠标滚轮或触控板滚动。使用它来根据输入设备调整滚动行为或动画。有关详细信息，请参阅 [useScrollDevice.md]()。 * useScrollPosition：`useScrollPosition()` 钩子允许您实时获取窗口的滚动高度/宽度，并使用提供的方法以编程方式设置它们。有关详细信息，请参阅 [useScrollPosition.md]()。 * useSingleEffect：`useSingleEffect()`钩子的工作方式与useEffect完全相同，只不过它在组件安装时仅被调用一次。这有助于 React 最近对 useEffect 钩子的更新，该钩子在挂载时被调用两次。有关详细信息，请参阅 [useSingleEffect.md]()。 * useSize：`useSize` 钩子观察引用的 DOM 元素并返回其当前的宽度和高度，每当调整元素大小时更新这些值。这对于动态跟踪任何可调整大小的组件的大小变化非常有用。有关详细信息，请参阅 [useSize.md]()。 * useTImer：`useTimer` 钩子提供了一种简单的方法来管理具有启动、暂停和重置功能的计时器。它支持向上计数和向下计数，并可自定义间隔。有关详细信息，请参阅 [useTImer.md]()。 * useTabNotification：useTabNotification() 挂钩通过标题修改和图标指示器管理浏览器选项卡通知。当用户位于另一个选项卡中时，使用此功能可以提醒用户后台活动或新通知。有关详细信息，请参阅 [useTabNotification.md]()。 * useTitle：`useTitle()` 钩子允许从你的 React 组件动态更新文档的标题！传递给这个钩子的标题可以附加到一个状态，因此更新状态也会更新标题。有关详细信息，请参阅 [useTitle.md]()。 * useToggle：`useToggle()`钩子可以在一组两个可能值之间切换，并自动用新值更新状态，如果你想切换布尔值的状态，请参阅下面的`useBoolToggle()`。有关详细信息，请参阅 [useToggle.md]()。 * useUpdateEffect：`useUpdateEffect()` 钩子的工作方式与 `useEffect()` 钩子完全相同，不同之处在于它会跳过第一次渲染，并且仅对初始渲染后在其依赖项数组中传递的值的更改做出反应。有关详细信息，请参阅 [useUpdateEffect.md]()。 * useUrgentUpdate：`useUrgentUpdate()` 钩子强制组件在从组件内部的任何地方调用时重新渲染。有关详细信息，请参阅 [useUrgentUpdate.md]()。 * useWebSocket：`useWebSocket()`钩子管理WebSocket连接，提供自动重新连接和状态管理。它包括为不同的 WebSocket 事件发送消息和回调的函数。有关详细信息，请参阅 [useWebSocket.md]()。 * useWindowSize：`useWindowSize()`钩子提供当前窗口的`宽度`和`高度`尺寸。有关详细信息，请参阅 [useWindowSize.md]()。 ## 将俳句与 NextJS 结合使用由于 Haiku 使用 ES6 模块，NextJS 不会自动转译它，因为它是外部依赖项，因此您可能需要执行一些额外的步骤才能正确设置它： _注意：在接下来的 14 个项目中不应再需要这些步骤。_ 1. 将 `next-transpile-modules` 包添加到您的项目中： npm 安装 next-transpile-modules 2. 配置项目的“next.config.js”文件以转译俳句： const withTM = require('next-transpile-modules')(['react-haiku']); module.exports = withTM({}); 完成这两个步骤后，将“react-haiku”中的功能导入到您的项目中应该可以按预期工作！

反应俳句技巧

包含技能