内容简介:A simple React Hook to persistWorks on the
Use State Persist
A simple React Hook to persist useState in local storage.
Works on the Web and React Native .
Easily implement
- Offline state
- Stale while revalidate flow
- Global state
npm install use-state-persist # or yarn add use-state-persist
How to persists useState
Same behavior and API as useState so you can use it by easily replacing the useState hook for the calls which you want to persist offline.
import { useStatePersist as useState } from 'use-state-persist';
const Component = () => {
// Before
//const [counter, setCounter] = useState(0);
const [counter, setCounter] = useState('@counter', 0);
return <CounterDisplay value={counter} />;
};
Stale While Revalidate
import { useStatePersist as useState } from 'use-state-persist';
const Component = () => {
// Loads stale state
const [data, setData] = useState('@data');
const fetchData = async () => {
// Fetches new state
const data = await fetch('/endpoint');
setData(data);
};
useEffect(() => {
fetchData();
}, []);
return <DataDisplay value={data} />;
};
Global State
Simple event system allows all the storage writes to be dispatched to all hooks . That means that all useStatePersist() can be used as a global state by sharing the same key useStatePersist('@globalKey')
To avoid that just make sure that the key being passed to the hook is unique useStatePersist('@uniqueKey')
const CounterButton = () => {
const [counter, setCounter] = useState('@counter');
return <Button onClick={() => setCounter(counter => counter++)} />;
};
State will be updated across multiple components
const ShowCounter = () => {
const [counter, setCounter] = useState('@counter', 0);
return <CounterDisplay value={counter} />;
};
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Java程序设计与应用开发
於东军 / 清华大学出版社 / 2005-3 / 27.00元
本书作为Java程序的入门与应用教材,共分为3部分:第一部分讲解Java程序设计的基础知识,包括Java基本编程语言、面向对象设计思想、类、对象、接口以及异常处理。第二部分讲解Java程序设计的高级知识,包括:GUI编程、套接口编程、I/O系统、数据库访问以及多线程编程。第三部分详细分析一个实际项目的开发过程,包括系统分析及功能实现。在项目实例中综合应用第一、二部分的Java知识,能够帮助读者进一......一起来看看 《Java程序设计与应用开发》 这本书的介绍吧!