页面状态

有些页面需要在离开后回来时，能够维持离开之前的状态，例如在一个分页查询的表格页面， 选择当前每页显示 50 条记录，如果不保持状态，那么用户离开此页面再回来时， 每页显示的记录数将恢复到默认的 10 条，用户又需要重新选择，虽然不影响使用， 但是用户体验不是很好。

你可以将页面的状态保存到 localStorage 中，这是可行的，但是有点"重"， 并且某些状态具有时效性，保持一段时间就够了，不需要很长久的保持。ReactGO 提供了一个更轻便的方法，它将状态保持在一个全局状态中，使用方法如下：

import usePageData from '~/hook/pagedata';

function X() {
  const [pageData, setPageData] = usePageData();

  // 访问保存的数据
  const data = pageData('x') || '';

  const onEvent = () => {
    // 存储数据
    setPageData('x', 'some value');
  }
}

虽然上面的例子中我们用一个字符串 some value 作为值，但实际上值可以是任何数据，例如数组， 对象，整数，等等都可以作为值。

注意

如果连续调用 setPageData() 更新多个状态，不要这样：

// 错误
setPageData('x', 'some value');
setPageData('y', 'other value');

而应该这样：

// 正确
setPageData('x', 'some value', 'y', 'other value');

setPageData() 接收可变长度的参数，参数的数量必须是偶数(k1, v1, k2, v2, k3, v3...)

持久状态

因为 pageData 存储在状态（内存）中，当刷新页面后，状态也就消失了，如果你需要持久的状态， 那么应该使用 localStorage 这样的磁盘存储机制。