跳至主要內容
useDeferredValue

useTransition 和 useDeferredValue 的差异

  • useTransition 主要关注点是状态的过渡。它允许开发者控制某个更新的延迟更新，还提供了过渡标识，让开发者能够添加过渡反馈。
  • useDeferredValue 主要关注点是单个值的延迟更新。它允许你把特定状态的更新标记为低优先级。

如果你想提供过渡反馈，就用 useTransition，如果不需要提供过渡反馈，用 useDeferredValue 就可以。

基础使用

const deferredValue = useDeferredValue(someValue)
罗天旭ReactHook大约 4 分钟
useCallback

定义

useCallback 是对 useMemo 的特化，它可以返回一个缓存版本的函数，只有当它的依赖项改变时，函数才会被重新创建。这意味着如果依赖没有改变，函数引用保持不变，从而避免了因函数引用改变导致的不必要的重新渲染。

为什么需要 useCallback

想象这个场景：你有一个 React.memo 化的子组件，该子组件接受一个父组件传递的函数作为 prop。如果父组件重新渲染，而且这个函数是在父组件的函数体内定义的，那么每次父组件渲染时，都会为子组件传递一个新的函数实例。这可能会导致子组件不必要地重新渲染，即使该函数的实际内容没有任何变化。

罗天旭ReactHook大约 5 分钟
useContext

基础用法

创建 Context

首先，我们需要使用 React.createContext 创建一个 context 对象：

const MyContext = React.createContext(defaultValue)
罗天旭ReactHook大约 3 分钟
useMemo

定义

它的核心目的是通过缓存计算结果，避免在组件渲染时进行不必要的重复计算，从而优化性能。这意味着只有当其依赖项发生变化时，useMemo 才会重新计算这个值，否则它将重用之前的结果。

const cachedValue = useMemo(calculateValue, dependencies)
罗天旭ReactHook大约 4 分钟
useReducer

基础用法

与 useState 相似，useReducer 也是 React 的 Hook，而且也只能放在组件最顶层使用。与前者不同的地方在于，它是通过 action 来更新状态的，使状态更新逻辑更具可读性。

useReducer 接收三个参数：

  • reducer 函数：指定如何更新状态的还原函数，它必须是纯函数，以 state 和 dispatch 为参数，并返回下一个状态。
  • 初始状态：初始状态的计算值。
  • （可选的）初始化参数：用于返回初始状态。如果未指定，初始状态将设置为 initialArg；如果有指定，初始状态将被设置为调用 init(initialArg)的结果。
罗天旭ReactHook大约 5 分钟
useLayoutEffect

useEffect vs useLayoutEffect

useEffect 和 useLayoutEffect 的区别仅有一个：

  • useEffect 执行时机是在 React 的渲染和提交阶段之后；
  • useLayoutEffect 执行时机是在 React 的提交阶段之后，但在浏览器实际绘制屏幕之前。
import React, { useEffect, useLayoutEffect, useState, useRef } from 'react'

function BoxComparison() {
    const [heightEffect, setHeightEffect] = useState(0)
    const [heightLayoutEffect, setHeightLayoutEffect] = useState(0)
    const refEffect = useRef(null)
    const refLayoutEffect = useRef(null)

    useEffect(() => {
        if (refEffect.current) {
            setHeightEffect(refEffect.current.offsetWidth)
        }
    }, [])

    useLayoutEffect(() => {
        if (refLayoutEffect.current) {
            setHeightLayoutEffect(refLayoutEffect.current.offsetWidth)
        }
    }, [])

    return (
        <div>
            <div>
                <h2>使用 useEffect</h2>
                <div
                    ref={refEffect}
                    style={{
                        width: '200px',
                        height: '50px',
                        background: 'lightgray',
                    }}
                >
                    这是一个方块
                </div>
                <div
                    style={{
                        width: '100px',
                        height: `${heightEffect}px`,
                        background: 'red',
                        marginTop: '10px',
                    }}
                >
                    红色方块
                </div>
            </div>

            <div style={{ marginTop: '30px' }}>
                <h2>使用 useLayoutEffect</h2>
                <div
                    ref={refLayoutEffect}
                    style={{
                        width: '200px',
                        height: '50px',
                        background: 'lightgray',
                    }}
                >
                    这是一个方块
                </div>
                <div
                    style={{
                        width: '100px',
                        height: `${heightLayoutEffect}px`,
                        background: 'blue',
                        marginTop: '10px',
                    }}
                >
                    蓝色方块
                </div>
            </div>
        </div>
    )
}

export default BoxComparison
罗天旭ReactHook大约 4 分钟
useRef

定义

// 定义
const inputRef = useRef(null)

// 使用
console.log(inputRef.current)
罗天旭ReactHook大约 5 分钟
useState

基本用法

useState 主要用于给组件添加状态变量。注意，我们只能在组件的顶层或自定义的 Hooks 中调用 useState。

初始化

基础定义

const [age, setAge] = useState(42)
罗天旭ReactHook大约 3 分钟
Copyright © <罗天旭>