直接dom元素(如useCallback)上的useCallback()是否无用？

Question

我只是在看一个代码评审，它要求我为我在<input>上的一个单击处理程序删除一个<input>。

我知道我们可以在执行useCallback时使用Memo来签入其他组件，但是直接的Memo节点呢？

我的问题是:是重新挂载整棵树(在真正的DOM中)还是仅仅安装更改的部分？

如果我有这个

const handleClick = useCallback(() => {}, []);

return <div className={classNameFromProps}>
   <input onClick={handleClick}>
   <SomeComponent someProp={somePropFromLocalState}>
</div>

1. 如果classNameFromProps发生变化，是否会触发DOM中所有子级的强制重装？(不只是虚拟的多姆)
2. 如果只有somePropFromLocalState更改，则组件由于本地状态的更改而重新呈现，但是否也会在DOM中重新加载<input>？

Answer 1

如果React代码编写得不太好，那么React的和解步骤将在重用DOM中已经存在的元素方面做得很好。(例如，相反，如果您使用<div key={Math.random()}，React每次都会重新创建该<div>。)

如果classNameFromProps发生变化，是否会触发DOM中所有子级的强制重装？(不只是虚拟的多姆)

React将重新运行该组件，检查它返回的re组件，然后将其与上次运行该组件时返回的组件进行比较，包括道具、子组件和嵌套组件。但是，只有不同的值才会导致对实际DOM的更改。在这种情况下，如果classNameFromProps是唯一的更改，则现有元素都将被保留，但是React可能会在幕后执行类似于.className = classNameFromProps的操作。

类似地，如果您不回溯回调，那么

<input onClick={handleClick}>

将导致每次呈现时重新创建单击监听器(而不是输入)。

也就是说，在几乎所有的情况下，在原生DOM元素上重新创建这样的侦听器根本不值得考虑--无论您是否回溯回调，都不会产生任何明显的效果。

如果只有somePropFromLocalState更改，则组件由于本地状态的更改而重新呈现，但是否也会在DOM中重新加载？

在协调过程中，它将看到来自上一个呈现的输入与下一个呈现的输入相匹配，因此<input>将不会被重新创建。如果输入单击处理程序被回传，侦听器也不会被移除并重新添加到输入中。