使用 useState 钩子渲染答案

【问题标题】：Rendering using useState hook使用 useState 钩子渲染
【发布时间】：2022-01-24 20:11:03
【问题描述】：

我是新来的反应。我对 useState hooks 有一些疑问。

场景 1：
考虑有 3 个自定义标签。 A，B，C。在 return();

return (
<>
<A />  
<B />  
<C />
</>
);

如果 A 的状态发生一些变化，我知道 A 会重新渲染，但 B 和 C 是否会再次渲染？
如果 B 的 usestate 依赖于 A 的 usestate 而 C 的 usestate 不依赖于任何其他状态会发生什么。

场景 2：
考虑两个自定义标签 - 父级和子级。

<parent>
<child/>   //some definition 
</parent>

如果父母的状态发生变化，它会再次渲染孩子吗？
当子的usestate依赖于父的usestate和子的usestate不依赖于父的usestate时，它会改变吗？

【问题讨论】：

【解决方案1】：

状态更改将导致重新渲染组件及其所有子组件。不过，为了澄清您的情况：

场景 1

如果 B 的使用状态依赖于 A 的使用状态会发生什么：

如果两个状态都发生变化，则同时渲染。如果 A 发生变化，则 B 无论如何都会重新渲染。如果两者都没有改变，则不会重新渲染。如果只有 B 改变，那么只有 B 重新渲染。

但 C 的 usestate 不依赖于任何其他状态。

如果 C 的状态发生变化，它将重新渲染。

场景 2

如果父母的状态发生变化，它会再次渲染孩子吗？

是的

当依赖于孩子的使用状态时，这两种情况都会改变吗父使用状态：

如果父母的状态发生变化，父母和孩子将重新渲染。

和子使用状态不依赖于父的使用状态。

在这种情况下，如果父状态发生变化，则子状态会重新渲染。如果父母没有改变但孩子改变了，那么只有孩子重新渲染。如果两者都没有改变，则不会重新渲染。

使用useMemo 钩子等可以防止组件重新渲染，但这是默认行为。

【讨论】：