React Hooks：从“这什么鬼“到“真香“的奇幻之旅

写在前面：一个让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带来的三大革命性改变

1. 代码量锐减：同样的功能，代码量能减少30%-50%
2. 逻辑复用革命：再也不用忍受HOC和render props的嵌套地狱
3. 学习曲线降低