React中const rerender = useState(0)[1]语法含义及用法咨询

一、React.useState(0)[1]是什么意思 #

React的useState Hook调用后会返回一个数组：第一个元素是当前状态值，第二个是用来更新这个状态的setter函数。
平时我们常用解构赋值来获取这两个值，比如const [count, setCount] = useState(0)。而useState(0)[1]是直接取数组的第二个元素——也就是这个状态的更新函数，把它命名成了rerender。
这里初始状态设为0只是个占位，因为我们根本不会用到这个状态值，纯粹是借useState的更新机制来触发组件重渲染。

二、调用rerender({})的作用 #

React组件只有在状态更新、props变化或者父组件重渲染时才会重新渲染。在这个React Query的示例里，它的作用是：

• 当鼠标悬停在字符上时，代码会调用queryClient.prefetchQuery预取该字符的数据，预取完成后数据会存在React Query的缓存里。
• 但缓存的变化不会自动触发组件重渲染——因为组件自身的状态selectedChar没改，也没有相关props更新，所以组件不会主动刷新去检查缓存。
• 调用rerender({})其实就是调用那个setter函数，传一个新的空对象进去，让React以为状态变了，从而触发组件重渲染。
• 重渲染之后，组件会重新执行queryClient.getQueryData(['character', char.id])检查缓存，这时候预取的数据已经存在，对应的字符就会变成加粗样式，给用户一个“预取完成”的视觉反馈。

另外代码里加了1ms的setTimeout再调用rerender，是为了确保React Query已经把预取的数据写入缓存后，再触发重渲染，这样检查缓存时才能拿到最新的结果。

内容的提问来源于stack exchange，提问作者Vijay Sai