useReducer
useState 的替代方案。它接收一个形如 (state, action) => newState 的 reducer,并返回当前的 state 以及与其配套的 dispatch 方法
Preview
const [state, dispatch] = useReducer(reducer, initialArg, init);
- reducer是一个处理函数,用于更新状态,接收两个参数:当前状态和一个动作对象,返回一个新的状态。
- initialArg是state的初始值
- init是一个可选的函数,用于初始化修改state(修改state,传入的参数是初始化的state即initialArg),如果编写了init函数,默认使用init函数的返回值,否则使用initialArg
useSyncExternalStore
useSyncExternalStore = React 官方提供的“把外部数据源订阅+快照”封装成 Hook,使它表现得像 React 内部状态一样。
const snapshot = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot?)
- subscribe: 一个函数,接收一个callback参数(当store发生改变时应该调用提供的callback),返回一个函数用于取消订阅
- getSnapshot: 一个函数,返回组件需要的 store 中的数据快照
- getServerSnapshot: 可选,一个函数,返回 store 中数据的初始快照。用于服务端渲染
startTransition、useTransition
辅助使用startTransition
useTransition会得到一个表示过渡任务的等待状态,和一个启动该过渡任务的函数
const [isPending, startTransition] = useTransition()
useDeferredValue
功能和useTransition类似,都是为了性能优化使用的
Preview
传送门
createPortal
异步组件
React.lazy与React.Suspense
jsx
import React, { Suspense } from 'react'
import { useState } from 'react'
const Welcome = React.lazy(() => import('./components/Welcome'))
const Welcome2 = React.lazy(() => import('./components/Welcome2'))
export default function App() {
const [ show, setShow ] = useState(true)
const handleClick = () => {
setShow(false)
}
return (
<div>
<h2>hello lazy</h2>
<button onClick={handleClick}>点击</button>
<Suspense fallback={<div>loading...</div>}>
{show ? <Welcome /> : <Welcome2 />}
</Suspense>
</div>
)
}