看起来输入是由状态变量（用useState钩子创建）表示的，它的变化会导致整个组件重新呈现（正如它应该的那样）。
但是，据我所知，“慢”表组件是子组件，每次父组件重新渲染时都会重新渲染（长操作），这是由于其状态变化，与我们的“重”组件无关。
因此，有一种优化技术可以防止这种情况-记忆化。只需使用React.memo，这将有助于您缓慢呈现表，并且仅在该组件的props发生更改时才限制重新呈现。
之前

function App() {
    const [val, setVal] = React.useState('')
    return (
        <>
            <input value={val} onChange={e => setVal(e.target.value)}/>
            <MySlowTable />
        </>
    )
}

字符串
后

const MySlowTableMemo = React.memo(MySlowTable)

function App() {
    return (
        <>
            <input value={val} onChange={e => setVal(e.target.value)}/>
            <MySlowTableMemo />
        </>
    )
}

型

简而言之，在React Once中探索Hooks。
当我们需要改变某个东西时，我们使用Hooks

• 我们可以通过使用useMemo钩子来记忆数组上的map操作的结果来实现这一点。这样，Map只会在数组更改时发生，而不是在每次渲染时发生。*