【React】1631- React 18 组件优化：让你的应用更快更流畅

import React, { useState, useEffect, useRef } from 'react';
 
function ExampleComponent() {
  const [count, setCount] = useState(0);
  const didMountRef = useRef(false);
 
  useEffect(() => {
    didMountRef.current = true;
    return () => {
      didMountRef.current = false;
    };
  }, []);
 
  const handleIncrement = () => {
    if (didMountRef.current) {
      setCount(count + 1);
    }
  };
 
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleIncrement}>Increment</button>
    </div>
  );
}
 
export default ExampleComponent;

这个代码示例展示了如何在React 18组件中使用useRef来避免在未挂载的组件上执行状态更新。这是一个常见的优化模式，可以防止组件在卸载后的点击或者定时器中产生的不必要的状态更新，从而提高了应用的响应性和性能。