写在前面：一个让React老手都拍案叫绝的魔法
“等等，函数组件怎么能有状态？！” —— 这是2018年我第一次听说React Hooks时的反应。当时我正在用class组件写一个复杂的表单，生命周期方法乱得像一碗意大利面。直到我看到了这段代码：
function Counter() {const [count, setCount] = useState(0);useEffect(() => {document.title = `你点击了${count}次`;});return (<div><p>当前计数: {count}</p><button onClick={() => setCount(count + 1)}>点我啊！</button></div>);
}
短短十几行代码，完成了以前需要几十行class组件才能实现的功能。没有this，没有生命周期方法，代码简洁得令人发指。这到底是怎么做到的？函数组件凭什么突然这么强大了？带着这些疑问，我开始了Hooks的探索之旅…
一、Hooks为何让整个React社区为之疯狂？
1.1 那些年，我们被class折磨的日子
记得刚学React时，光是一个简单的组件就要写一堆样板代码：
class MyComponent extends React.Component {constructor(props) {super(props);this.state = { count: 0 };this.handleClick = this.handleClick.bind(this);}componentDidMount() { /*...*/ }componentDidUpdate() { /*...*/ }componentWillUnmount() { /*...*/ }handleClick() {this.setState({ count: this.state.count + 1 });}render() {return <button onClick={this.handleClick}>{this.state.count}</button>;}
}
光是绑定this就能让新手崩溃三次，更别提生命周期方法的复杂关系了。Hooks的出现，就像是在React世界里突然出现了一道光。
1.2 Hooks带来的三大革命性改变
- 代码量锐减：同样的功能，代码量能减少30%-50%
- 逻辑复用革命：再也不用忍受HOC和render props的嵌套地狱
- 学习曲线降低
