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以防止不必要的重新渲染