React为什么引入hook

痛点

当一个新技术、新事物出现的时候，一定是在此之前存在痛点。那么在Hook出现之前，类组件存在哪些痛点？

• 组件之间逻辑复用比较困难 比如某一个state，如何触发更改，无法复用
• 复杂组件逻辑难以理解 类组件的逻辑穿插在各个生命周期中。存在如下情况：

1. 一个生命周期中存在各种逻辑
2. 同一个逻辑，存在不同的生命周期中。如：订阅和取消订阅

// 下面的setInterval和clearInterval放在了两个生命周期中
class Com extends React.Component {
    timer = null;
    componentDidMount() {
        this.timer = setInterval(() => {
            // do something
        }, 1000);
    }
    componentWillUnmount() {
        clearInterval(this.timer)
    }
}

• 类难以理解

1. 难以理解的this，绑定的事件函数中，访问的this需要两种情况绑定

// 1.使用bind，指定this
this.handleClick = this.handleClick.bind(this)

// 2.使用箭头函数
{
    handleClick: () => {
    
    }
}

2.class不能很好的压缩和tree-shaking

class Com extends React.PureComponent {
    getName() {
    
    }
}

3.热更新可靠性差

如何解决

• 自定义的Hook，可以实现逻辑复用。如useReducer
• Hook把组件中关联的部分，放到一个更小的函数中

useEffect(() => {
    timer = setInterval(() => {
        // do something
    }, 1000)
    return () => {
        clearInterval(timer)
    }
})