React 进阶面试题, 在 React 中,如何在页面重新加载时保留数据?
React 进阶面试题, 在 React 中,如何在页面重新加载时保留数据?
QA
Step 1
Q:: 在 React 中，如何在页面重新加载时保留数据？
A:: 在 React 中，页面重新加载时保留数据的常见方法包括使用浏览器的本地存储 (localStorage)、会话存储 (sessionStorage)、IndexedDB，或使用 URL 查询参数等。通过在组件加载时从存储中读取数据，并在数据变化时将其保存到存储中，可以实现数据的持久化。具体实现步骤包括：
1. 使用 useEffect 钩子在组件挂载时从 localStorage 读取数据。
2. 将读取到的数据存储在组件的状态中。
3. 使用 useEffect 钩子监听状态变化，将变化后的数据保存到 localStorage 中。
4. 如有必要，还可以利用 try-catch 语句处理读取和写入时的异常情况。
Step 2
Q:: 使用 localStorage 和 sessionStorage 的区别是什么？
A:: localStorage 和 sessionStorage 都是 Web 存储 API 的一部分，用于在客户端浏览器中存储数据。它们的主要区别在于数据的生命周期：
1. **localStorage**: 存储的数据在浏览器关闭后依然存在，除非手动删除，因此适用于需要长期保留的数据。
2. **sessionStorage**: 存储的数据仅在页面会话期间有效，关闭浏览器标签页或窗口后数据会被删除，适用于临时数据。
Step 3
Q:: 如何在 React 项目中使用 IndexedDB 来持久化数据？
A:: IndexedDB 是浏览器提供的一种低级 API，允许存储大量数据。使用 IndexedDB 持久化数据时，可以利用像 idb 这样的库来简化操作步骤。具体步骤包括：
1. 打开一个数据库连接，如果数据库不存在则会自动创建。
2. 创建对象存储（类似表）来存储数据。
3. 使用事务来读取、写入、更新或删除数据。
4. 将数据与 React 状态同步，通过 useEffect 钩子在组件挂载时初始化数据。
5. 使用合适的索引来优化查询性能。
用途
这个内容在实际生产环境中非常重要，因为现代 Web 应用需要处理大量的数据，并且需要在用户重新加载页面或返回到网站时，能够保留他们的操作状态或输入的数据。通过掌握数据持久化技术，可以确保用户的良好体验，减少不必要的重复操作，尤其是在构建单页应用（SPA）时。这些技术还适用于处理表单数据的保存、用户偏好设置的存储等场景。\n相关问题
React 工具和库面试题, 在 React 中,如何在页面重新加载时保留数据?
QA
Step 1
Q:: 在 React 中，如何在页面重新加载时保留数据？
A:: 在 React 中，保持数据持久化的常见方法有几种：
1. LocalStorage 或 SessionStorage：这些是浏览器内置的存储机制，可以用来保存数据。数据存储在用户的浏览器中，即使页面重新加载或浏览器关闭，数据仍然可以被保留。可以使用 localStorage.setItem 和 localStorage.getItem 来存储和获取数据。
2. IndexedDB：对于更复杂的数据结构或更大的数据量，IndexedDB 是一个更适合的选项。它是一个低级别的 API，允许在用户的浏览器中存储大量数据。
3. Redux Persist：如果应用使用了 Redux 进行状态管理，Redux Persist 可以将 Redux 状态保存在 localStorage 或 sessionStorage 中，这样即使页面重新加载，状态也不会丢失。
4. Service Workers：通过使用 Service Workers 和 Cache API，可以在离线情况下缓存应用的数据。
具体使用哪个方法取决于数据的性质和需要的持久化时间。
Step 2
Q:: 如何在 React 中使用 Redux Persist？
A:: Redux Persist 是一个库，可以将 Redux 的状态保存在本地存储中（如 localStorage），以便在页面刷新后保持状态不变。使用步骤如下：
1. 安装 Redux Persist：npm install redux-persist
2. 配置 Redux Persist：在创建 Redux store 的时候，使用 persistReducer 来增强你的 reducer，并且使用 persistStore 来增强 store。
3. 将持久化存储器（如 localStorage）配置到 persistReducer 中。
4. 在应用程序的根组件中，使用 PersistGate 组件包裹住你的 App 组件，以确保持久化存储在应用程序加载之前完成。
5. 现在，Redux 的状态会自动保存到 localStorage，并在页面刷新时重新加载。
Step 3
Q:: 在 React 中，什么时候应该使用 componentDidMount？
A:: componentDidMount 是 React 类组件的生命周期方法，它在组件被挂载到 DOM 之后立即调用。这通常用于执行初始数据加载操作，如从 API 获取数据、设置订阅或初始化第三方库等。
使用 componentDidMount 的场景包括：
1. 数据获取：在组件加载时从 API 请求数据。
2. 订阅事件：例如订阅 WebSocket 事件或设置 window 事件监听。
3. DOM 操作：执行需要 DOM 节点存在的操作，如获取元素的尺寸或设置焦点。