浅析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本身诞生的目的就是为函数式组件服务的)