react的hooks案例

上篇文章写了我觉得常用的hooks案例，这篇文章把剩下的写完

useDebugValue

可以让我们在开发过程中方便地查看某个 Hook 的值 useDebugValue 接受一个自定义函数作为参数，这个函数可以返回任何一个我们想要展示的值，比如某个状态、某个计算结果等 安装一下react开发者工具 reactjs.bootcss.com/learn/react…

在使用 React 开发者工具进行调试时，可以看到与该 Hook 相关联的自定义值：“内容: X”（其中 X 是当前计时器值），这使得调试变得更容易。

useDeferredValue

用于对某个 state 进行延迟更新操作。它可以让 React 在性能和用户体验之间取得平衡，使高优先级更新能够立即完成，而低优先级更新则可以比较平滑地进行。

原因：版本太低 使用 useDeferredValue 需要注意以下几点：

• useDeferredValue 只能用于 React 18 及以上版本；
• useDeferredValue 返回一个新的值，需要根据具体情况进行处理；
• 需要提供 timeoutMs 选项，用于设置延迟更新的超时时间；
• useDeferredValue 只适用于那些可以被延迟更新的状态，例如用户输入、滚动事件等。对于一些需要立即更新的状态，例如计数器等，不应该使用 useDeferredValue。

• 在SearchApp组件中，使用useState定义一个value状态，用于存储输入框的值。
• 在SearchApp组件中，使用useDeferredValue定义一个deferredValue状态，用于存储延迟更新的输入框的值。这个状态会在一定时间后（由timeoutMs参数控制）同步到value状态。
• 在SearchApp组件中，定义一个handleChange函数，用于处理输入框的变化事件。这个函数会更新value状态。
• 在SearchApp组件中，渲染一个input元素和一个SearchResults组件。input元素的value属性绑定到value状态，onChange属性绑定到handleChange函数。SearchResults组件的query属性绑定到deferredValue状态。
• 在SearchResults组件中，使用useState定义一个items状态，用于存储搜索结果列表。
• 在SearchResults组件中，使用useEffect定义一个副作用函数，用于模拟从服务器获取数据。这个函数会在query状态变化时执行，并在一秒后更新items状态。它还会返回一个清理函数，用于取消定时器。
• 在SearchResults组件中，渲染一个ul元素，并根据items状态映射出多个li元素。

这样，当用户在输入框中输入时，input元素会立即反映用户的输入，而不会等待搜索结果返回。同时，SearchResults组件会在一定时间后更新搜索结果列表，而不会频繁地重新渲染。

useId

useId 是一个 React Hook，可以生成传递给无障碍属性的唯一ID。 有助于使该组件更容易访问，并避免命名冲突或多个基于相同ID的组件之间的干扰。

useInsertionEffect

在组件插入到DOM树中并进行初始渲染后执行异步操作。

与useEffect类似，useInsertionEffect接收两个参数：

1. effect: 一个副作用函数，将在组件插入到DOM树中并进行初始渲染后调用。
2. deps: 一个依赖，如果提供，则只有在依赖项更改时才会重新运行effect。

在useInsertionEffect中使用了setTimeout函数来触发一个timerId，并在2秒后将display状态设置为true。由于useInsertionEffect的依赖项是count，所以只有当count属性更改时才会重新运useInsertionEffect。

需要注意的是，useInsertionEffect仅在组件载入毕后执行一次，如果需要在组件状态发生变化时执行异步操作，则应该使用useEffect。useInsertionEffect和useEffect的主要区别是，前者只在组件插入到DOM树中后执行一次，而后者会在组件状态发生变化时重新运行。

useLayoutEffect

与useEffect类似，可以在组件渲染后执行副作用函数。不同之处在于，useLayoutEffect会在DOM更新计算之前同步调用特定effect函数，并且在此时对DOM进行同步更新，以便测量节点大小、计算样式等。

与useEffect类似，useLayoutEffect接收两个参数：

1. effect: 一个副作用函数，将在组件渲染后执行。
2. deps: 可选，一个依赖数组，只有依赖项更改时才会重新运行effect。如果没有提供依赖项，则始终会重新运行effect。

ChildComponent是一个子组件，它接收width属性并将其渲染为一段文本。MeasureNode组件使用useLayoutEffect Hook来测量子组件的宽度，并在计算完成后将宽度存储在状态变量width中。然后，通过使用React.Children.map和React.cloneElement，将width属性添加到子组件中，并显示宽度。

注意：由于useLayoutEffect是同步调用副作用函数和更新DOM的，因此它可能会导致性能问题。因此，通常情况下，useEffect是更好的选择。只有当需要同步处理DOM时，才应该使用useLayoutEffect。

useSyncExternalStore

可以让你订阅一个外部的数据源。它返回数据源的快照，你可以在组件中使用它。

它接受三个参数：

• subscribe：一个函数，它接受一个回调函数作为参数，并订阅数据源。当数据源发生变化时，它应该调用回调函数，这会导致组件重新渲染。subscribe 函数应该返回一个函数，用于取消订阅。

• getSnapshot：一个函数，它返回数据源的快照。当数据源没有变化时，多次调用 getSnapshot 必须返回相同的值。如果数据源发生变化，并且返回的值不同（使用 Object.is 比较），React 会重新渲染组件。

• getServerSnapshot：一个可选的函数，它返回数据源的初始快照。它只会在服务器渲染和客户端上对服务器渲染内容进行水合时使用。服务器快照必须在客户端和服务器之间保持一致，通常是通过序列化和传递的方式实现的。如果你省略这个参数，在服务器上渲染组件会抛出错误。

useTransition

useTransition 的作用是让你在不阻塞 UI 的情况下更新状态1。它可以让你将一些更新标记为过渡，从而优化用户体验和性能

使用场景：

1.数据加载：在数据加载过程中，你可以使用 useTransition 在更新 UI 之前显示一个加载指示器。

2.动画和过渡效果：在组件状态更新时，useTransition 可以让你更好地控制动画和过渡效果的触发时机。

3.标签页切换：在一个有多个标签页的组件中切换标签页时，useTransition 可以让标签页的切换更加平滑，而不会出现闪烁或卡顿。

以上就是react的hooks的一些案例，写上面案例的时候发现很多ts报错，案例改成js了，后面准备重新学习巩固一下ts,少写一点any