React：如何在某些特定状态更改时停止重新渲染组件？

Question

我正在开发一个功能组件中的组件，其中还有其他几个子组件。我将不同的状态传递给不同的组件。其中一些状态与主要组件无关。但是当我更改这些状态​​时，这些也会导致重新渲染主组件并重新渲染所有子组件。

喜欢

const [showSideBar, setShowSideBar] = useState(false);
const [showFloatingButtons, setShowFloatingButtons] = useState(false);
const [showCart, setShowCart] = useState(false);

现在这些正在传递给不同的子组件，例如 showCart 传递给 Cart 组件，在主组件中设置 setShowCart 状态会导致重新渲染整个屏幕。 如果功能组件中有任何方法可以停止重新渲染主要组件，这显然会导致重新渲染while屏幕，而无需重新渲染while屏幕，请提供帮助。 我有 MainHeader，我有按钮来设置这些组件。

<MainHeader TabClick={(index)=>TabClick(index)} />

我将低于一个传递给 MainHeader 以更新主要组件状态。

const TabClick = (index) => {
  if (index === 0) {
    setShowSideBar(true)
  } else if (index === 1) {
    setShowFloatingButtons(true)
  } else if (index === 2) {
    setShowCart(true)
  }
};

Answer 1

尝试使用备忘录来防止功能组件不必要地呈现。 https://pt-br.reactjs.org/docs/react-api.html#reactmemo

或者 shouldComponentUpdate 类 https://pt-br.reactjs.org/docs/react-component.html

编辑： 如果您希望组件重新渲染，则在 areEqual 中返回 true

function MyComponent(props) {

}
function areEqual(prevProps, nextProps) {

}
export default React.memo(MyComponent, areEqual);