来试试自定义一个hooks吧🐟🐟

我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第2篇文章 点击查看文章详情 🚀🚀

为什么要自定义hooks 🤔

我们都知道，Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。

那么我们为什么需要自定义一个hooks

简单来说就是为了 封装 复用

通过业务场景不同，我们需要设定的hooks，通过一段逻辑封装，进行日后的复用，让我们更加专注于业务开发。

自定义hooks实战 ✅

改造前

如下所示

做一个本地存储的demo

代码：

import { useState } from 'react'

function App() {
    const STORAGE_NAME = 'app_theme';
    
    // useState()传入一个函数
    const [value, setValue] = useState(() => {
      const storage = localStorage.getItem(STORAGE_NAME);
      return storage || '';
    })

    const changeValue = (value) => {
      setValue(value)
      // 本地存储
      localStorage.setItem(STORAGE_NAME,value)
    }

  return (
    <div className="App">
      <input value={value} onChange={e => changeValue(e.target.value)}
       />
    </div>
  )
}

可以实现

1. 将搜索框(input)中的值实时进行本地存储(localStorage)
2. 刷新后还可以显示之前存储的值

那么现在就要开始将这两个功能进行封装咯~😁😁

先给它取个名字useLocalStorageState

改造后

// App.jsx
import { useState,useEffect,useRef } from 'react'
// 导入useLocalStorageState
import useLocalStorageState from './useLocalStorageSate'

function App() {
  const STORAGE_NAME = 'theme'
  const [value, setValue] = useLocalStorageState(STORAGE_NAME, '')


  const changeValue = (value) => {
        setValue(value)
  }

  return (
    <div className="App">
      <input value={value} onChange={e => changeValue( e.target.value )} />
    </div>
  )
}

export default App

后面就要实现useLocalStorageState了

// useLocalStorageState.jsx
import { useState } from "react";

const useLocalStorageState = (key,defaultValue) => {
        const data = localStorage.getItem(key);
        const [value,setValue] = useState(data || defaultValue)
        return [
            value,
            (val) => {
                localStorage.setItem(key,val)
                setValue(val) 
            }
        ]
}

export default useLocalStorageState

---

1. useLocalStorageState接收两个参数，key，value。功能类似于 localStorage.setItem(key,val)，只不过多实现了刷新后存储值的功能。

2. 在useLocalStorageState内部也是使用了useState

3. 返回值为数组是为了给App.jsx中的value，setValue进行解构赋值

效果

和先前一样，刷新后保存了值

所以当我们写多个搜索框要保存本地存储的值时，就能直接把我们封装的useLocalStorageState用出来，不需要再重复的写里面的业务逻辑了，直接把封装好的拿出来用就OK了！！ 👍 👍

比如：当有两个搜索框时

import { useState } from 'react'
import useLocalStorageState from './useLocalStorageSate'

function App() {
  const STORAGE_NAME = 'app_theme'
  const ADDRESS_STORAGE_NAME = 'address'

  const [value, setValue] = useLocalStorageState(STORAGE_NAME, '')
  const [address, setAddress] = useLocalStorageState(ADDRESS_STORAGE_NAME,
    '')

  return (
    <div className="App">
      <input value={value} onChange={e => setValue(e.target.value )} />
      <input value={address} onChange={e => setAddress(e.target.value)} />
    </div>
  )
}

export default App

结果：

是不是很快呢？ 😁😁😁

ahooks

还没用爽是吧，那我们直接上ahooks👉👉官方文档 - ahooks 3.0

useRequest

现在来试试useRequest

const { data, error, loading } = useRequest(service);

默认情况下，useRequest 第一个参数是一个异步函数，在组件初始化时，会自动执行该异步函数。同时自动管理该异步函数的 loading , data , error 等状态。

service则是异步的数据请求方法

// 记得安装 npm i ahooks 
import { useRequest } from 'ahooks'
import {getUername } from './api/request'


function App() {
  const {data:userName,error,loading} = useRequest(getUername)

  if(error) return <div>failed to load</div>
  if(loading) return <div>loading....</div>

  return (
    <div className="App">
      Username:{userName}
    </div>
  )
}

export default App

//    ./api/request

export const getUername = () => {

    return new Promise((resolve,reject) => {
        setTimeout(() => {
            resolve('jack');
            // reject('错误')
        },2000)
    })

}

效果

一个小小的uesRequest即能实现！

这就是自定义hooks的威力🔥🔥

结尾

虽然是个小demo,但也希望能够对屏幕前的朋友们有一丝丝帮助吧！ 也请各位大佬们多多指出不足之处，Thanks♪(･ω･)ﾉ❤️❤️