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

4次阅读

共计 3427 个字符，预计需要花费 9 分钟才能阅读完成。

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

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

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

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

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

在之前，如果你要应用诸如 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>
      </>
    )
  }
}
`

让咱们先来看一个最根底也同样重要的 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 能够让你在 函数式组件 执行一些副作用操作，它接管两个参数，第一个参数为必选的副作用函数，第二个为可选的参数（它是副作用函数执行的依赖项数组）

还是方才的例子，如果咱们心愿组件更新后执行一些副作用，比方打印以后 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
  }
})
`

正文完