React refs 在 useCallback 中如何表现？

Question

我不希望下面的 React 应用程序能正常工作，但确实如此。 我希望 useCallback 钩子能够捕获并保留 ref 的初始值。 我知道 ref 无法在依赖数组中列出，所以这可能是仅用于 refs 的特殊情况？

为什么在 App 首次渲染时，useCallback 不会只捕获一次 newTodoRef.current.value 的内容？

import React, { useCallback, useReducer, useRef } from 'react';

type Todo = { id: number, text: string }
type ActionType = { type: 'ADD', text: string} | { type: 'REMOVE', id: number}

const todoReducer = (state: Todo[], action: ActionType) => {
    switch(action.type) {
        case 'ADD': return [ ...state, { id: state.length, text: action.text }]
        case 'REMOVE': return state.filter(({ id }) => id !== action.id) // this is buggy, but that's beside the point
        default: throw new Error()
    }
}

function App() {
    const [todos, dispatch] = useReducer(todoReducer, [])

    const newTodoRef = useRef<HTMLInputElement>(null)

    const onAddTodo = useCallback(() => {
        if (newTodoRef.current) {
            dispatch({ type: "ADD", text: newTodoRef.current.value })
            newTodoRef.current.value = ''
        }
    }, [])

    return (
        <div>
            {todos.map(todo => (
                <div key={todo.id}>
                    {todo.text}
                    <button onClick={() => dispatch({ type:"REMOVE", id: todo.id })}>Remove</button>
                </div>
            ))}
            <input type="text" ref={newTodoRef}/>
            <button onClick={onAddTodo}>ADD</button>
        </div>
    )
}

export default App;

Answer 1

为什么在 App 首次渲染时，useCallback 不会只捕获一次 newTodoRef.current.value 的内容？

以这种方式捕获对顶级newTodoRef的引用 newTodoRef 。 这很好的原因是 ref 是一个可变的 object，并且每个渲染都使用相同的 object。 一旦 react 在页面上创建了 div 元素，它将改变newTodoRef ，将其.current属性更改为该元素。 稍后，您访问newTodoRef ，它仍然是相同的 object，您将获得它的.current属性。 同时属性发生了变化，但 object 没有。