问题一：数据多次渲染问题

问题描述：当页面中加了loading状态的时候，页面会 render 4次：

第一次loading为false，数据为空；
第二次loading为true，数据为空；
第三次loading为true，数据不为空；
第四次loading为false，数据不为空；

第三次和第四次数据已经存在，开始正常渲染页面，但是执行了两次，如何让页面只在第四次数据加载完了之后才开始渲染呢？

解决方案一：

通过dispatch().then()在接口请求完成后回调执行数据赋值，这样jsonData只在最后一次才不为空，但是这样就放弃了数据流的模式。大数据页面都是以数据流的方式驱动，这种方式要每次去setData比较麻烦，不推荐。

const [jsonData, setJsonData] = useState({});
dispatch({
  type: 'importantCustProtect/getJsonData',
  method: 'imptCustList',
  payload: {
    intfcType: "",
    intfcTypeName: ""
  }
}).then(function (result) {
  let response = result.payload;

  if (response.status === '0') {
    setJsonData(response.result);
  }
})

解决方案二：

使用useMemo或useCallback解决重复渲染问题

当你调用 useEffect 时，就是在告诉 React 在完成对 DOM 的更改后运行你的“副作用”函数。我们的目标是在DOM发生变化时，不相关的函数不需要触发，而effect只能在DOM更新后再触发。

使用 useMemo 的函数会在渲染期间执行，在DOM改变的时候，useMemo 能控制某些函数不被触发。

let html = useMemo(() => {
  let jsonData = props.imptCustList;

  return <div>
      ...
  </div>
}, [props.imptCustList]);

这样只有在数据改变的时候才会触发，而loading状态改变不会触发。

问题二：通过接口请求的数据一定会强制重新渲染页面

问题描述：页面访问后，请求的数据一直保留在store中，当切换页面返回后，该页面store里面已有数据会执行一次渲染，当页面再次请求后同样的数据还是会再次渲染。

采用memo（与PureComponent功能相同）、useMemo或useCallback都无法解决。

纯组件在每次更新会自动帮你对更新前后的props和state进行一个简单对比，来决定是否进行更新，采用的是“浅比较”，仍可能出现没有必要的重新渲染。