react 进阶必学 hook （二）：useEffect 专治不吃宽面

最新推荐文章于 2025-07-01 09:00:00 发布

原创

最新推荐文章于 2025-07-01 09:00:00 发布 · 6.7k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#reactjs #hooks

本文是关于React Hook系列的第二篇，重点讨论useEffect。通过一个面馆的例子，展示了如何从class组件迁移到使用useEffect的function组件。useEffect用于处理组件的副作用，简化了多个生命周期方法中的逻辑。文章详细介绍了useEffect的工作原理，包括其异步执行特性、控制执行的机制以及何时需要清理副作用，并通过实例解释了如何控制和清理effect以优化性能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

系列文章传送门：

react 进阶必学 hook （一）：useState 来一碗大碗宽面

react 进阶必学 hook （二）：useEffect 专治不吃宽面

react 进阶必学 hook （三）：useContext 面馆分店开张了

react 进阶必学 hook （四）：自定义hook

react 进阶必学 hook （五）：额外的hook

在理解useEffect之前我们先看一个例子，还是面馆：

面馆例子

承接上回react.js: 进阶必学 hook （一）：useState 来一碗大碗宽面

我们在之前的基础上添加一个需求，就是这个面馆只卖宽面，不点宽面不欢迎👎

先用class组件的形式实现一下：

export default class Counter extends React.Component {
   
   
    constructor(props) {
   
   
        super(props);
        this.state = {
   
   
            count: 1,
            big: true,
            type:'宽面'
        };
    }

    componentDidMount() {
   
   
        if(this.state.type !== '宽面'){
   
   
            window.alert('啥？你不吃宽面！！？小吴，把我的意大利炮拿来！😡')
        }
    }

    componentDidUpdate() {
   
   
        if(this.state.type !== '宽面'){
   
   
            window.alert('啥？你不吃宽面！！？小吴，把我的意大利炮拿来！😡')
        }
    }


    render () {
   
   
        const {
   
   count,big,type} = this.state;
        const size = (big)=>big? "大":"小";
        return (
            <div>