React Hooks 真香定律：告别Class组件，我为什么回不去了？

前言

大家好，我是小杨，一个被React Class组件折磨了3年，最后在Hooks里找到救赎的前端老司机。自从2018年Hooks横空出世，我的代码量直接砍半，今天就用最接地气的方式，带你们感受Hooks的魔法！

1. 暴击Class组件的三大痛点

还记得被这些支配的恐惧吗？

this地狱 ：handleClick = () => {...}写到手软
生命周期钩子乱炖 ：componentDidMount里塞满setInterval，忘记在componentWillUnmount清除
逻辑复用靠HOC ：组件包成洋葱，withRouter(withStyle(connect(MyComponent)))

👉 Hooks解法 ：不用this、不用Class、逻辑拆成原子函数

2. 最香三件套：useState/useEffect/useRef

2.1 useState - 让函数组件有状态

jsx 复制代码

function 我的计数器() {
  const [count, setCount] = useState(0); // 不用写this.state!
  return <button onClick={() => setCount(count + 1)}>点了{count}次</button>;
}

爽点：再也不用在构造函数里初始化state了

2.2 useEffect - 生命周期二合一

jsx 复制代码

useEffect(() => {
  const timer = setInterval(() => console.log('我在运行'), 1000);
  return () => clearInterval(timer); // 自动清理相当于componentWillUnmount
}, []); // 空数组=componentDidMount

对比Class：

以前：分散在didMount/didUpdate/willUnmount
现在：关注点集中，依赖项数组控制执行时机

2.3 useRef - 跨渲染存数据

jsx 复制代码

const inputRef = useRef(null);
<input ref={inputRef} />;
// 随时用inputRef.current访问DOM

经典场景 ：比createRef更轻量，还能存任意可变值

3. 高阶快乐：自定义Hook

把逻辑抽出来复用，不用高阶组件！

jsx 复制代码

// 自定义一个监听窗口大小的Hook
function useWindowSize() {
  const [size, setSize] = useState({ width: window.innerWidth });
  useEffect(() => {
    const handleResize = () => setSize({ width: window.innerWidth });
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);
  return size; // 直接返回状态
}

// 在组件里使用
function 我的响应式组件() {
  const { width } = useWindowSize(); // 像调用函数一样简单
  return <div>当前宽度：{width}px</div>;
}

灵魂优势：逻辑和UI彻底分离，多个组件共享同一套逻辑

4. 性能优化对比

优化手段	Class组件写法	Hooks写法
避免重复计算	`shouldComponentUpdate`	`useMemo`
函数引用稳定	手动`bind`或箭头函数	`useCallback`
状态拆分	大对象state	多个`useState`

实测案例 ：

用useMemo缓存复杂计算：

jsx 复制代码

const expensiveValue = useMemo(() => {
  return 我的一万次循环计算(data); // 只有data变时才重新计算
}, [data]);

5. 小杨的血泪教训

不要无脑用useEffect ：依赖项数组漏写会导致闭包问题（曾经因为漏写[count]debug到凌晨）
自定义Hook命名必须用useXxx：否则React无法识别它是Hook
Class不会淘汰 ：老项目别硬改，getSnapshotBeforeUpdate等场景还得用Class

最后暴言

自从用了Hooks，我再也写不回Class了------就像用了智能手机再也回不去诺基亚。如果你还在犹豫，不妨从今天开始试一个useState，保证真香！

⭐ 写在最后

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

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

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

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

✅ 解答我文章中一些疑问

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

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

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

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