当前位置：首页 > news >正文

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

news 来源：原创 2025/5/11 5:41:40

写在前面：一个让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世界里突然出现了一道光。