关于react.js:扔掉你的Class吧Hooks太香了一

简介

Hook 是React16.8中新增的个性，它能够让你不编写class组件的状况下应用诸如state，生命周期等个性。

动机

在组件之间复用状态逻辑很难

为了解决这类问题，也有呈现过一些解决方案，如render props、高阶组件、Context等，它们都会导致组件树造成嵌套天堂（有点像回调函数和flutter的写法）。

有了 Hook 之后，就能够从组件中提取状态逻辑，使得这些逻辑能够独自测试并复用。Hook 使你在无需批改组件构造的状况下复用状态逻辑。

简单组件变得难以了解

随着业务扩张，组件内的逻辑状态和副作用也越来越多。咱们在写 class 组件时，通常会将数据的获取放到compoentDidMount和componentDidUpdate中，波及到定时器或者数据订阅时，还须要在生命周期函数compoentWillUnmount去革除定时器或者勾销数据订阅。这使得齐全不相干的代码组合到一起，很容易产生bug，并且导致逻辑不清晰。

为了解决这个问题，Hook 将组件中互相关联的局部拆分成更小的函数（比方设置订阅或申请数据），而并非强制依照生命周期划分。

难以了解的 class

在之前，如果你要应用诸如state、生命周期等个性，就必须引入 class 组件，如果你要应用这些就必须花工夫去了解 JavaScript 中this的工作形式。

为了解决这些问题，Hook 使你在非 class 的状况下能够应用更多的 React 个性。

概览

Hook 能够分为内置 Hook和自定义 Hook。

内置 Hook 有:

useState
useEffect
useContext
useReducer
useCallback
useMome
useRef
useImperativeHandle
useLayoutEffect
useDebugValue

自定义 Hook就是将上述内置 Hook进行组合，导出为一个以use结尾的函数。

这里先写一个基于class的 Counter组件，前面让咱们来用Hook将它进行革新。

`import React from 'react'
class Counter extends React.Component {
  constructor(props) {
    super(props)
    this.state = { count: 0 }
    this.setCount = this.setCount.bind(this)
  }
  setCount() {
    this.setState({
      count: this.state.count + 1
    })
  }

  render() {
    return (
      <>
        <h2>{ this.state.count }</h2>
        <button onClick={ this.setCount }>+</button>
      </>
    )
  }
}
`

useState

让咱们先来看一个最根底也同样重要的 Hook，当初咱们开始革新下面的class组件。

首先将class组件转为function组件，也就是函数式组件。

`- class Counter extends React.Component {}
+ function Counter() {}
`

接下来让咱们将state等相干代码删掉，改用useStateHook，因为此处改变较多，间接上最终代码

`import React, { useState } from 'react'
const Counter = () => {
  // 数组解构语法
  // 申明一个count变量，并申明一个setCount函数用于扭转count的值
  const [count, setCount] = useState(0)

  return (
    <>
      <h2>{ count }</h2>
      <button onClick={ () => setCount(count + 1) }>+</button>
    </>
  )
}
`

乍一看代码简洁了很多，这难道不正是咱们想要的嘛。（Hook 真香）

如果咱们有多个state变量，能够写成上面这种模式

`const [count, setCount] = useState(0)
const [num, setNum] = useState(0)
const [name, setName] = useState('')
...
`

如果本次更新依赖于上一次的state值，能够这么写，此时setCount接管一个函数作为参数

`const [count, setCount] = useState(0)
const handleClick = () => {
setCount(prev => prev + 1)
}
<button onClick={ handleClick }>+</button>
`

useEffect

useEffect 能够让你在函数式组件执行一些副作用操作，它接管两个参数，第一个参数为必选的副作用函数，第二个为可选的参数（它是副作用函数执行的依赖项数组）

还是方才的例子，如果咱们心愿组件更新后执行一些副作用，比方打印以后count变量的值，又或者扭转以后页面的 title

``// ...
const [count, setCount] = useState(0)
const [num, setNum] = useState(0)
useEffect(() => {
console.log(以后count值，${count})
document.title = 以后count值，${count}
})
// ...
``

下面的代码咱们能够看到咱们并没有增加第二个可选参数，这意味着，只有组件内状态产生扭转（不仅仅是count，甚至num产生扭转时），这个副作用函数都会执行。如果咱们心愿副作用函数只在 count 扭转时候执行，这时候咱们的第二个参数就派上用场了（）

``// ...
// 以后effect函数只依赖于 count 的扭转，在 num 扭转的时候并不会被执行
// 相当于 class 组件中的 compoentDidMount 和 componentDidUpdate
useEffect(() => {
console.log(以后count值，${count})
document.title = 以后count值，${count}
}, [count])
// ...
``

如果咱们仅仅心愿副作用函数在组件挂载时候执行（compoentDidMount）

``// useEffect 约定，在第二个参数传递空数组时，以后副作用函数只在组件挂载时被执行
useEffect(() => {
console.log(以后count值，${count})
document.title = 以后count值，${count}
}, [])
``

有些时候咱们可能会用到定时器，比方每秒钟更新一次工夫

`const [time, setTime] = useState(new Date())
const timer = null
useEffect(() => {
  timer = setInterval(() => {
    setTime(new Date())
  }, 1000)
})
`

当初的代码有一个问题，想必大家都晓得，那就是timer 没有被革除，咱们在工作中会遇到很多这种场景，那么咱们应该怎么去革除 timer 呢，答案是useEffect的第一个参数返回一个函数，这个被返回的函数会在组件被卸载时候主动被执行，能够革除诸如定时器之类的货色

`const [time, setTime] = useState(new Date())
const timer = null
useEffect(() => {
  timer = setInterval(() => {
    setTime(new Date())
  }, 1000)

  // 相似于 compoentWillUnMount

  // 当然这里也能够是一个具名函数
  return () => {
    clearInterval(timer)
    timer = null
  }
})
`