React为什么需要Hook

自从React 16.8发布Hook之后，笔者已经在实际项目中使用Hook快一年了，虽然Hook在使用中存在着一些坑，但是总的来说它是一个很好的功能，特别是在减少模板代码和提高代码复用率这些方面特别有用。为了让更多的人了解和使用Hook，我决定写一系列和Hook相关的文章，本篇文章就是这个系列的第一篇，主要和大家聊一下React为什么需要Hook。

Hook解决的问题

Component非UI逻辑复用困难

对于React或者其它的基于Component的框架来说，页面是由一个个UI组件构成的。独立的组件可以在同一个项目中甚至不同项目中进行复用，这十分有利于前端开发效率的提高。可是除了UI层面上的复用，一些状态相关（stateful）或者副作用相关（side effect）的非UI逻辑在不同组件之间复用起来却十分困难。对于React来说，你可以使用高阶组件（High-order Component）或者renderProps的方法来复用这些逻辑，可是这两种方法都不是很好，存在各种各样的问题。如果你之前没有复用过这些非UI逻辑的话，我们可以先来看一个高阶组件的例子。

假如你在开发一个社交App的个人详情页，在这个页面中你需要获取并展示当前用户的在线状态，于是你写了一个叫做UserDetail的组件：

class UserDetail extends React.Component {
   
  state = {
   
    isOnline: false
  }

  handleUserStatusUpdate = (isOnline) => {
   
    this.setState({
    isOnline })
  }

  componentDidMount() {
   
    // 组件挂载的时候订阅用户的在线状态
    userService.subscribeUserStatus(this.props.userId, this.handleUserStatusUpdate)
  }

  componentDidUpdate(prevProps) {
   
    // 用户信息发生了变化
    if (prevProps.userId != this.props.userId) {
   
      // 取消上一个用户的状态订阅
      userService.unSubscribeUserStatus(this.props.userId, this.handleUserStatusUpdate)
      // 订阅下一个用户的状态
      userService.subscribeUserStatus(this.props.userId,<