Skip to content

useReducer

useState 的替代方案。它接收一个形如 (state, action) => newState 的 reducer,并返回当前的 state 以及与其配套的 dispatch 方法

Preview

const [state, dispatch] = useReducer(reducer, initialArg, init);

  1. reducer是一个处理函数,用于更新状态,接收两个参数:当前状态和一个动作对象,返回一个新的状态。
  2. initialArg是state的初始值
  3. 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>
  )
}