自定义React钩子，异步呈现一个ReactNode

Question

我正在实现一个文本编辑器，它的JSX计算起来可能有点慢。当JSX加载时，整个页面冻结。我正在尝试开发一个Hook，让JSX滞后于文本，所以我没有延迟问题。

显然，这需要异步呈现JSX。我还希望始终使用已计算的JSX的最新版本，而不计算每一个JSX之间的值。

这是到目前为止我的Hook的一个演示。这一切都在一个FunctionComponent中。我认为它是完整的，但我不明白为什么useEffect被一次又一次地调用，并进入一个无限循环。想法吗?

const slowComponent = async () => {
let i = 0
// while (i < 1000000000) i++
return <div>This component takes some time to load!</div>
}
const ref = useRef<{
isComputing: boolean,
todoSlowComponent: (() => Promise<React.ReactNode>) | null,
}>({
isComputing: false,
todoSlowComponent: null,
})

const [most_recent_slow_component, set_most_recent_slow_component] = useState<React.ReactNode>(null)
const computeInBG = async (slowComponent: () => Promise<React.ReactNode>) => {
ref.current.todoSlowComponent = slowComponent
if (ref.current.isComputing)
return
let req = ref.current.todoSlowComponent
ref.current.isComputing = true
ref.current.todoSlowComponent = null

const awaitedComponent = await req()

ref.current.isComputing = false
if (ref.current.todoSlowComponent !== null) 
console.log('THIS CAN ACTUALLY PRINT DUE TO ASYNC BEHAVIOR!!!!')
if (ref.current.todoSlowComponent)
computeInBG(ref.current.todoSlowComponent)

set_most_recent_slow_component(awaitedComponent)
}
useEffect(() => { console.log('USE EFFECT'); computeInBG(slowComponent) })

return <>/*... */most_recent_slow_component</>

Answer 1

你的useEffect没有任何依赖数组。因此，如果组件中发生任何更改，它将再次调用。使其依赖于某些值，例如

useEffect(() => {
computeInBG(slowComponent);
}, [text]);