React:为什么在调用钩子的setValue时会重新渲染同级组件，以及如何停止这种情况.请输入下面的代码

Question

//Example Component
import React, { useState } from 'react';
import IndependentComponent from './independent-component'
function Example() {
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
<IndependentComponent />
</div>
);
}

//Independent Component
import React from 'react'
const IndependentComponent = function () {
console.log('This component is rendered when setCount is called in Example component')
return (
<div>Independent Sibling Component </div>
)
}
export default IndependentComponent

Answer 1

当父组件被重新渲染时，它的所有子组件也被重新渲染。因此，即使IndependentComponent不会随着父组件的更改而更改，它仍然会强制执行渲染循环。

有两种方法可以防止这种情况，具体取决于它是基于类的组件还是功能组件。

1. 对于基于类的组件，您可以扩展PureComponent类，使其永远不会经历重新渲染周期，也可以使用shouldComponentUpdate对组件何时应该重新渲染进行更精细的控制
2. 在您正在寻找的功能组件案例中，您可以使用React.memo HOC使其表现得像PureComponent，并使用可选的回调函数对shouldComponentUpdate进行微调控制

因此，在功能组件的用例中，您所需要做的就是导出您的独立组件，如：

export default React.memo(IndependentComponent);