如果父组件正在更新我们在子组件中使用的状态，我们可以停止重新渲染子组件吗？反应中？

Question

下面是react的简单组件。 我们是否可以使用 ref 或任何其他内容进行修改，以便即使状态值从父组件发生变化，子组件也不会重新渲染，并且子组件仍然获得最新值。

我只是在探索 React 的可能性以及我们如何在 React 中使用状态。

我需要帮助才能理解这一点。希望你们都清楚我的问题。

import React, { useState } from 'react';

const ParentComponent = () => {
  const [state, setState] = useState(0);

  return (
      <div>
      {console.log("parent")}
        <h1>Parent Component</h1>
        <p>State: {state}</p>
        <button onClick={() => setState(state + 1)}>Increment State</button>
        <ChildComponent state={state} />
      </div>
  );
};

const ChildComponent = ({state}) => {
 
  return (
    <div>
      <h2>Child Component</h2>
      {console.log("child")}
      <p>State in Child: {state}</p>
    </div>
  );
};

const App = () => (
  <ParentComponent />
);

export default App;

我提供了我们在 React 中日常使用的基本组件。

我只是想对此组件进行一些修改，这有助于停止子组件的重新渲染。

Answer 1

这是不可能的。 默认情况下，当组件重新渲染时，React 会递归地重新渲染其所有子组件。

如果父组件重新渲染的原因是子组件未消耗的状态更改，则可以通过使用记忆化来避免子组件的重新渲染（https://react.dev/reference/react/useMemo）。

但是，如果将父组件的状态传递给子组件，则当该状态发生变化时，您始终会重新渲染子组件。这就是 React 的工作方式。