极客时间的课程学完后做的一点点笔记,其中数据模型对我帮助很大。

表单

对 ant 组件封装

将需要重复的内容封装成一个 build 组件,只需要传 meta 属性(meta 属性中包含组件需要的配置信息)即可。

router

比较好的设计模式,将页面中的关键字都放入 url 中,这样通过 url 就可以直接搜索到对应的东西,而不需要再打开页面进行搜索;状态不需要放在 store 中单独维护

/list/page?keyword=xxx

Store 模型设计

将数据扁平化,对之后查找和处理数据帮助非常大

store
// 数据 初始化
const initialState = {
  items: [], // 存放 id 的list
  page: 1,
  pageSize: 3,
  total: 0,
  byId: {}, // id 为 key 的对象
  fetchListPending: false, // loading
  fetchListError: null, // error
  listNeedReload: false, // 重载
};

// 接口 set 数据
const byId = {};
const items = [];
action.data.items.forEach(item => {
  items.push(item.id);
  byId[item.id] = item;
});

// 页面 get 数据
const dataSourceSelector = createSelector(getItems, getById, (items, byId) => {
  console.log("reselect: get data source");
  if (!items) return [];
  return items.map(id => byId[id]);
});

生命周期 componentDidUpdate

比较前一个属性与当前属性有没有发生变化,发生变化则执行数据的更新。

componentDidUpdate(prevProps) {
  const page = parseInt(this.props.match.params.page || 1, 10);
  const prevPage = parseInt(prevProps.match.params.page || 1, 10);
  if (prevPage !== page && !this.props.list.fetchListPending) {
    this.fetchData(page);
  }
}

内容页的加载与缓存

业务需求

内容页和列表页的数据关系

  1. 简单业务:列表页数据包含内容页的数据

  2. 复杂业务:内容页数据需要额外获取

  3. 内容页数据的缓存

逻辑思考

  1. 内容页的数据通过 store 获取

  2. 当 store 为空,请求接口获取,更新 store

loading

当 store 为空,发起接口请求时设置 loading 显示,接口请求成功后隐藏 loading

基于 react | router 实现分布操作

使用 URL 进行导航的好处

页面中的操作进行到某一步后刷新页面,状态还可以继续保持。但是存在 store 中,页面刷新后状态就回到初始值了。

react-loadable

以组件为中心的代码分割和懒加载

reselect

creatSelector 数据源没有发生变化的时候不要每次都重新计算