react - 11.自定义Hooks

1.自定义Hooks的作用：

自定义hooks最重要的作用是逻辑复用，一切皆函数，自定义hooks其实也是一个普通的函数，只不过在自定义hooks内部，可以使用任何内置的hooks，并且可以返回任意数据，甚至是JSX，相当于把组件的一部分抽离出来，进行复用

• 按照规范，自定义Hooks函数的命名比如以use开头

2.自定义Hooks函数名称基础语法：

function useHooks1() {}
function useHooks1(title) {}
function useHooks1(title) { return [] }
function useHooks1(title) { return [fun1, fun2] }
import ReactDOM from "react-dom";
import React, { useState, useEffect } from "react";

function useHooks1(title) {
  useEffect(() => {
    document.title = title
  }, [])
  return ;
}

function useHooks1() {
  const setTitle = (title) => {
    document.title = title
  }
  return [setTitle];
}

function useHooks(defaultTitle) {
  const [title, setTitle] = useState(defaultTitle);
  useEffect(() => {
    document.title = title
  }, [])
  return [title, setTitle]
}

3.例子1（实现App设置文字大小）：

useSetFont.ts：

import { useEffect, useState } from "react";
const useSetFont = (value: any) => {
    const [state, setState] = useState(value)
    const setFontSize = (size: number | string | null) => {
        document.body.style.fontSize = size + 'px';
        setState(size)
    }
    useEffect(() => {
        setFontSize(value)
    }, [value])
    return [state, setFontSize]
}
export default useSetFont

如何使用？

App.tsx：

import { ChangeEvent } from 'react';
import useSetFont from './hooks/useSetFont';
const App = () => {
  const [size, setFontSize] = useSetFont(14)
  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
    switch (e.target.value) {
      case '0':
        return setFontSize(14)
      case '1':
        return setFontSize(18)
      case '2':
        return setFontSize(22)
    }
  }
  return (
    <div>
      <div>hello - {size}px</div>
      <input type="range" min={0} max={2} defaultValue={0} onChange={handleChange} />
    </div>
  )
}
export default App

例子2（封装本地存储hooks）：

useLocalStorage.ts：

import { useEffect, useState } from "react"
const ToString = (value: string) => {
    return typeof value === 'object' ? JSON.stringify(value) : `${value}`
}
const ToJSON = (value: any) => {
    try {
        return JSON.parse(value);
    } catch {
        return value
    }
}
const useLocalStorage = (key: string, defaultValue: any) => {
    const getItem = (key: string) => {
        return localStorage.getItem(key) === null ? defaultValue : ToJSON(localStorage.getItem(key))
    }
    const [state, setState] = useState(getItem(key))
    const setItem = (value: any) => {
        localStorage.setItem(key, ToString(value))
        setState(value)
    }
    useEffect(() => {
        setItem(defaultValue || getItem(key))
    }, [key])
    return [state, setItem]
}
export default useLocalStorage

如何使用？

App.tsx：

import useLocalStorage from './hooks/useLocalStorage';
const App = () => {
  const [data,setData] = useLocalStorage('userInfo','')
  const handleSave = () => {
    // 设置本地存储
    setData({
      userName:"xiaoming"
    })
  }
  // 获取本地存储
  const handleGet = () => {
    console.log(data)
  }
  // 删除本地存储
  const handleDelete = () => {
    setData({})
  }
  return (
    <div>
      <button type='button' onClick={handleSave}>save</button>
      <button type='button' onClick={handleGet}>read</button>
      <button type='button' onClick={handleDelete}>delete</button>
    </div>
  )
}
export default App

4.开发自定义Hooks注意事项：

1.减少useState的数量

2.优先考虑可读性

3.合理拆分State对象中的内容

4.合理使用Hooks的返回值

5.合理拆分Hooks

6.合理使用useEffect以防止不必要的重新渲染