浅谈React组件在什么情况下会重新渲染

// 父组件
const ParentComponent = () => {
  const [value, setValue] = useState(0);

  return <ChildComponent prop={value} />;
};

// 子组件
const ChildComponent = React.memo(({ prop }) => {
  // prop发生变化时，会触发重新渲染
  return <p>{prop}</p>;
});

const Counter = () => {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1); // count发生变化时，组件重新渲染
  };

  return (
    <div>
      <p>{count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
};

const MyComponent = () => {
  const contextValue = useContext(MyContext); // MyContext的值发生变化时，组件重新渲染

  // ...
};

const MyComponent = () => {
  const forceUpdate = useForceUpdate();

  const handleClick = () => {
    // 强制组件重新渲染
    forceUpdate();
  };

  // ...
};

const ParentComponent = () => {
  // 状态变量 count
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Parent Component Count: {count}</p>
      <ChildComponent />
      <button onClick={() => setCount(count + 1)}>Increment Parent</button>
    </div>
  );
};

// 子组件
const ChildComponent = () => {
  console.log("Child Component Rendered");

  return <p>Child Component</p>;
};