React Hooks花式玩法

大家好，我是小杨，一个在React坑里摸爬滚打了6年的老司机。今天不整虚的，咱们直接上干货，聊聊那些让你又爱又恨的React Hooks。

记得我刚接触Hooks那会儿，看着useEffect的依赖数组差点把头发薅秃。现在回头看看，其实Hooks用好了真香！接下来我就用最直白的方式，带大家解锁这些神奇的函数。

🎣 useState：最熟悉的"老伙计"

这绝对是Hooks里的"国民函数"，简单到哭：

jsx 复制代码

function MyComponent() {
  const [count, setCount] = useState(0); // 初始化值为0
  
  return (
    <div>
      <p>我点击了 {count} 次</p>
      <button onClick={() => setCount(count + 1)}>
        点我+1
      </button>
    </div>
  );
}

有个小技巧：当新状态依赖旧状态时，用函数式更新更靠谱：

jsx 复制代码

setCount(prevCount => prevCount + 1)  // 这样永远不会丢更新

🔄 useEffect：组件里的"多面手"

这个Hook我愿称之为"瑞士军刀"，能处理各种副作用：

jsx 复制代码

useEffect(() => {
  // 这里是你的副作用代码
  const timer = setTimeout(() => {
    console.log('我延迟执行了');
  }, 1000);
  
  // 返回清理函数（可选）
  return () => clearTimeout(timer);
}, [dependency]); // 依赖项数组

踩坑预警：

忘记加依赖项 → 闭包陷阱警告！
清理函数没写 → 内存泄漏警告！

🧠 useMemo & useCallback：性能优化"双雄"

这对兄弟专门治各种"重复渲染不服"：

jsx 复制代码

const expensiveValue = useMemo(() => {
  return computeExpensiveValue(a, b); // 只有a/b变化时才重新计算
}, [a, b]);

const memoizedCallback = useCallback(() => {
  doSomething(a, b); // 同样的，依赖不变就返回记忆化函数
}, [a, b]);

真实案例：我在做大数据量表格时，用useMemo缓存计算结果，渲染速度直接起飞🛫

🔗 useRef：不只是DOM引用

你以为它只能拿DOM节点？Too young！

jsx 复制代码

const intervalRef = useRef();

useEffect(() => {
  intervalRef.current = setInterval(() => {
    // 做点什么
  }, 1000);
  
  return () => clearInterval(intervalRef.current);
}, []);

// 还可以存任意可变值，且不会触发重渲染
const counterRef = useRef(0);
counterRef.current += 1;

🧩 自定义Hook：高阶玩法

这才是Hooks的精髓------逻辑复用！比如我封装了个useMousePosition：

jsx 复制代码

function useMousePosition() {
  const [position, setPosition] = useState({ x: 0, y: 0 });
  
  useEffect(() => {
    const updatePosition = (e) => {
      setPosition({ x: e.clientX, y: e.clientY });
    };
    
    window.addEventListener('mousemove', updatePosition);
    return () => window.removeEventListener('mousemove', updatePosition);
  }, []);
  
  return position;
}

// 使用
const { x, y } = useMousePosition();

💡 实战小贴士

Hooks调用顺序必须稳定（别把Hook放在条件语句里！）
useEffect依赖项要诚实（eslint-plugin-react-hooks是你最好的朋友）
复杂状态考虑useReducer（比useState更适合管理多个子状态）

最近在项目里用useReducer+useContext搞定了复杂的全局状态管理，那叫一个丝滑~

🚀 最后说两句

Hooks用好了是真香，但千万别为了用而用。Class组件不会马上消失，关键是根据场景选择合适的方式。

如果觉得有帮助，不妨点个赞❤️ 有问题的老铁欢迎评论区交流，我常在掘金摸鱼~

⭐ 写在最后

请大家不吝赐教,在下方评论或者私信我,十分感谢🙏🙏🙏.

✅ 认为我某个部分的设计过于繁琐,有更加简单或者更高逼格的封装方式

✅ 认为我部分代码过于老旧,可以提供新的API或最新语法

✅ 对于文章中部分内容不理解

✅ 解答我文章中一些疑问

✅ 认为某些交互,功能需要优化,发现BUG

✅ 想要添加新功能,对于整体的设计,外观有更好的建议

✅ 一起探讨技术加qq交流群：906392632

最后感谢各位的耐心观看，既然都到这了，点个 👍赞再走吧！