React Hooks 解决了类组件的哪些痛点？
React Hooks 是在 React 16.8 引入的重要特性，它让我们可以在函数组件中使用 state、生命周期等能力。Hooks 的出现主要为了解决类组件（Class Components）存在的多个痛点，具体包括：
✅ 1. 逻辑复用困难（HOC / Render Props 嵌套地狱）
痛点：
在类组件中，为了复用逻辑，我们通常使用高阶组件（HOC）、Render Props 等方式，这会导致代码层层嵌套（“wrapper hell”），可读性差、调试困难。
Hooks 解决方案：
使用自定义 Hook（如 useFormStatus、useFetch）可以轻松抽离和复用状态逻辑，无需修改组件结构，不会增加嵌套层级。
// 自定义 Hook
function useCounter(initial) {
const [count, setCount] = useState(initial);
const increment = () => setCount(c => c + 1);
return { count, increment };
}
// 使用
function MyComponent() {
const { count, increment } = useCounter(0);
}✅ 2. 复杂组件难以理解与维护
痛点：
类组件中，相关的逻辑往往分散在不同的生命周期方法中。例如，componentDidMount 可能同时处理数据请求、事件监听、订阅等操作；而 componentWillUnmount 又要清理它们。导致“相关代码被拆分到不同地方”。
Hooks 解决方案：
使用 useEffect Hook，可以将一个功能相关的副作用集中管理，按逻辑组织代码，而不是按生命周期划分。
useEffect(() => {
// fetch data
}, []);
useEffect(() => {
// subscribe to event
}, []);
useEffect(() => {
// cleanup on unmount
return () => unsubscribe();
}, []);虽然仍可能多个 useEffect，但每个职责清晰。
✅ 3. this 绑定问题 & JavaScript class confusion
痛点：
JavaScript class（尤其是 this）对初学者不友好。this.handleClick.bind(this)、this.setState()、this.state.xxx等写法繁琐且容易出错。
Hooks + Function Component：
函数组件没有 this，所有变量和函数都在作用域内自然可用，更贴近普通 JavaScript function，学习成本低。
const handleClick = () => setState(...); // no .bind needed! 🎉✅4. 更小的打包体积 & Tree Shaking
由于函数组件通常比类组件更轻量（无 class boilerplate），结合 Hooks，未使用的代码更容易被 tree-shaking，有助于减少生产环境 bundle size。
✅5. 更好的类型支持（TypeScript）
在 TypeScript中定义类组件的 props/state/方法类型相对繁琐；而函数组件 + Hooks + TS的结合更加直观和自然：
const Counter: FC<{ initial?: number }> = ({ initial = 0 }) => {
const [count, setCount] = useState<number>(initial);
...
};🔚总结：Hooks vs Class Components
| Class Component Issues | Hooks Solution |
|---|---|
| Logic reuse via HOC/RenderProps → nesting hell | Custom Hooks → clean logic sharing |
| Lifecycle methods split related logic | Group by concern using multiple useEffects |
| Confusing this binding and syntax | No this; simpler function semantics |
| Harder with TypeScript | Better type inference in functions |
| Larger component footprint | Smaller/flexible components |
✅ 一句话总结：
React Hooks 让函数组件拥有完整的能力（状态、副作用等），并解决了类组件中逻辑复用难、代码结构混乱、this困惑等问题，使 React开发更简单、灵活和可维护。