浅析React Hooks

在react最新的一个大版本中，正式的给我们带来了hook：React v16.8: The One With Hooks就是让我们不再只能使用 class 来实现有状态的组件。

熟悉react的朋友应该都了解，当我们需要具有状态的组件，或者需要使用生命周期函数来完成一些操作的时候，就不可避免的需要这样：

class Component extend React.Component {
    ...
}

如果这个组件内部足够复杂那倒还行，但如果只是涉及简单的数据改变，而让我们每次实现它都需要实现一个class这也是一个让人很恼火的事情，同时也增加了我们日常开发的代码量。但有了hook之后，我们就可以愉快的使用hook来实现由状态的函数组件了。

在hook里面主要有以下两个比较常用的API：

useState
useEffect

useState

useState所要解决的问题就是在函数中使用状态。比如我们需要实现一个可以加减的计数器：

import { useState } from 'react'

const Counter = () => {
  const [count, setCount] = useState(0)

  return (
    <div>
       <div>{count}</div>
       <button onClick={() => setCount(count + 1)}>+</button>
       <button onClick={() => setCount(count - 1)}>-</button>
    </div>
  );
};

在这里我们就是使用useState来在Counter函数内部创建状态，并管理状态。

useState 接受一个参数，也就是 state 的初始值，它的返回值是一个只有两个元素的数组，其中第一个元素是 state 的值，第二个元素是用于更新 state 的函数。上面那段代码就是使用了ES6中的解构赋值来把两个元素分别赋值给 count 和 setCount。当然，count和setCount 这两个名字并不是固定的，我们可以给这两个元素随意的设置名字。

useState在处理简单的数据流时相较之使用class要简明方便的多，下面是在结合antd的代码可以感受一下代码量上的差距：

class Modal extends React.Component {
  state = { visible: false }

  showModal = () => {
    this.setState({
      visible: true,
    });
  }
  handleOk = (e) => {
    console.log(e);
    this.setState({
      visible: false,
    });
  }
  handleCancel = (e) => {
    console.log(e);
    this.setState({
      visible: false,
    });
  }
  render() {
    return (
      <div>
        <Button type="primary" onClick={this.showModal}>
          Open Modal
        </Button>
        <Modal
          title="Basic Modal"
          visible={this.state.visible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
        >
          <p>this is a modal</p>
        </Modal>
      </div>
    );
  }
}

这是antd所提供的一个关于model的组件，其内部就是通过维护visible的状态来控制这个model是否显示。我们可以看到，虽然只是简单的两种状态，但我们在创建visible这一state的同时，还需要使用三个函数去控制改变它。而当我们使用useState后就很简单了：

const Modal = () => {
  const [visible , changeVisible] = useState(false)
  return (
    <div>
      <Button type="primary" onClick={()=>changeVisible(true)}>open</Button>
      <Modal
          title="Basic Modal"
          visible={visible}
          onOk={()=>changeVisible(false)}
          onCancel={()=>changeVisible(false)}
        >
          <p>this is a modal</p>
        </Modal>
    </div>
  )
}

useEffect

上面提到，在需要使用状态和生命周期函数的时候我们需要使用class，上面的useState是为我们解决状态问题的，而这个userEffect则是为我们解决在函数组件中生命周期的问题的。

在 Counter 组件中，如果我们想要在用户点击“+”或者“-”按钮之后把计数值体现在网页标题上，这就是一个修改 DOM 的副作用操作，所以我们需要使用componentDidMount或者componentDidUpdate，因此我们得把 Counter 写成 class 组件，但在在使用useEffect后我们可以这么写：

import { useState, useEffect } from 'react'

const Counter = () => {
  const [count, setCount] = useState(0)
  
  useEffect(() => {
    document.title = `Count: ${count}`
  })

  return (
    <div>
       <div>{count}</div>
       <button onClick={() => setCount(count + 1)}>+</button>
       <button onClick={() => setCount(count - 1)}>-</button>
    </div>
  )
}

在这里userEffect就接受一个函数作为参数，每次Counter组件发生渲染的时候，都会调用这个函数，也就做到了上面所说的那两个生命周期函数的作用。

但需要注意的是，如果我们只传入一个参数的话，useEffect会在每次渲染过后都调用这个函数，而在我们日常开发使用componentDidMount的时候，往往可能只需要当mount后才调用，比如当我们需要在挂载组件后去请求某个数据，但当update的时候则不需要去请求它。在useEffect中同样也有方法可以实现这种操作，useEffect 其实还有第二个可选参数，只有当同一 useEffect 的两次调用的第二个参数不同时，第一个参数才会被调用，所以相实现上面这种功能，我们只需要这样写：

useEffect(() => {
    console.log("在这里只有第一次mount的时候才会被执行")
}, [666]);

还有一点需要注意的是，所有的 Hooks API 都只能在函数类型组件中使用，而class 类型的组件是不能使用的。（不过也对hook本身诞生的目的就是为函数式组件服务的）