React Hooks

Hooks的核心设计理念就俩字：简洁。以前写个计数器，得先定义class，再搞个constructor初始化state，最后在render里返回JSX。现在呢？直接函数组件里一行const [count, setCount] = useState(0)搞定。useState就是个最常用的Hook，它返回一个数组，第一个元素是当前状态值，第二个是更新函数。比如点击按钮时调用setCount(count+1)，界面自动重渲染，连shouldComponentUpdate都不用操心。

但光有状态还不够，副作用处理才是重头戏。useEffect相当于类组件的componentDidMount、componentDidUpdate和componentWillUnmount三合一。比如组件挂载时请求数据，直接写在useEffect里就行。它接受两个参数：回调函数和依赖数组。如果依赖数组为空，回调只在组件挂载和卸载时执行；如果放了某个状态变量，就只在变量变化时触发。有个坑要注意：在useEffect里直接修改状态可能引发无限循环，最好用条件判断或cleanup函数规避。

实际开发中经常会遇到状态逻辑复用的场景。以前用高阶组件或render props，代码嵌套得跟洋葱似的。现在用自定义Hook，把状态逻辑抽成函数，名字以use开头就行。比如封装个useFetch，内部用useState存数据、useEffect发请求，多个组件都能直接调用。这招尤其适合处理表单验证、动画计时器等场景。

说到性能优化，useMemo和useCallback得拎出来说说。useMemo能缓存计算结果，避免每次渲染都重复计算复杂逻辑；useCallback则是缓存函数本身，防止子组件因函数引用变化而无效重渲染。不过别滥用，依赖数组写错了反而拖慢速度。还有个useRef挺实用，不仅能操作DOM，还能存跨渲染周期的可变值，比直接用变量靠谱。

Context跨组件传值用useContext最方便。不用再套一堆Consumer，直接const theme = useContext(ThemeContext)就能拿到全局状态。但别拿它当Redux用，频繁更新的数据还是放状态管理库更合适。

Hooks的规则得刻在脑子里：只能在函数组件最顶层调用，别放在循环、条件或嵌套函数里。不然React内部的状态顺序会乱套。要是非要用条件逻辑，就把条件判断放到Hook内部。ESLint的eslint-plugin-react-hooks插件能自动检查这类错误。

最近项目里用useReducer替代了useState处理复杂状态。它类似Redux的reducer，适合状态更新逻辑复杂或有多个子值的场景。比如购物车数量增减、表单多字段联动，写个reducer函数比一堆setState清晰多了。配合useContext还能实现轻量级状态管理。

真刀真枪写项目时，Hooks的调试技巧也得掌握。Chrome的React Developer Tools能查看组件树中每个Hook的当前值，useEffect的依赖变化轨迹一目了然。遇到闭包陷阱时，记得用useRef存最新值，或者用useCallback绑定稳定依赖。

说到底，Hooks不是要彻底抛弃类组件，而是给函数式编程铺路。现在写React组件，八成场景函数组件+Hooks都能覆盖。代码行数少了一截，逻辑复用更方便，连单元测试都简单了——毕竟纯函数比生命周期方法好模拟。要是你还在类组件里挣扎，真该试试这套新范式，保准打开新世界大门。