学习React之自定义Hook——useLocalStorage

自定义一个Hook用于管理localStorage

// src/hooks/index.js
import { useEffect, useState } from "react";

function useLocalStorage(key) {
    // 使用useState来初始化一个状态，这个状态的值从localStorage中获取  
    // 如果localStorage中没有这个key，则默认返回一个空字符串  
    const [data, setData] = useState(() => {
        const item = localStorage.getItem(key)
        if (!item) return ""
        return JSON.parse(item)
    })
 // 使用useEffect来监听data的变化，当data变化时，将其存储回localStorage  
    useEffect(() => {
        localStorage.setItem(key, JSON.stringify(data))
    }, [key, data])
    return [data, setData]
}

export default useLocalStorage

使用

import React, { memo } from 'react'
import useLocalStorage from './hooks'
const App = memo(() => {
  const [token, setToken] = useLocalStorage("token");
  function setTokenHandle() {
    setToken("xiaoniu")
  }

  return (
    <div>
      <h2>{token}</h2>
      <button onClick={setTokenHandle}>设置token</button>
    </div>
  )
})

export default App