《十四》React Hooks 之自定义 Hooks

自定义 Hook 本质上只是一个对代码逻辑进行抽取的函数，严格意思上来说，它本身并不是 React 的特性。

自定义 Hook 的名称应该始终以 use 开头，除此之外不需要具有任何其他特殊的标识。在自定义 Hook 内部可以调用其他的 Hook。

React Hook 只能在函数组件（大写字母开头）和自定义 Hook（use 开头）的内部调用。

例如：想要在组件创建和销毁的时候都进行打印。就可以将这部分的逻辑抽取成一个自定义的 Hook。

import React, {useEffect} from 'react'

// 创建自定义 Hook
function useLogLife(name) {
  useEffect(() => {
    console.log(`${name}组件被创建`)

    return () => {
      console.log(`${name}组件被销毁`)
    }
  }, [])
}

function CountInput() {
  // 使用自定义 Hook
  useLogLife('CountInput')

  return <input />
}

function Count() {
  // 使用自定义 Hook
  useLogLife('Count')

  return (
    <>
      <h1>Count</h1>
      <CountInput />
    </>
  )
}

export default Count