写在前面

近期对博客进行了一些小小的改动，包括git提交记录的规范化、分支管理、文章图片上传方式调整等等。其中文章图片上传的方式改动了多次，主要目的在于提高图片分类、替换、管理的效率，以及能够在文章中更方便自由地引用。

文章中使用图片的几种方式

1、在themes/next/source路径下创建图片文件

这是最开始使用的图片上传方式，主要利用的是hexo generate生成静态文件时会将source路径下的新建立的图片文件原样打包到根目录下的public文件中，而public文件中的内容实际上就是push到github pages上的静态博客的内容，所以只需在在文章中使用文章到图片文件的相对路径即可引用图片。步骤如下：

问题

在开发一个带有Echarts图表的页面时，每次切换图表类型，都会出现图表反复渲染的问题。通常情况下，页面多次渲染并不会影响用户体验（如果没有动画效果），而在这个页面下Echarts数据填充的动画反复进行多次就会让人明显的感觉到页面在多次刷新，降低用户体验。问题代码如下：

1
2
3
4
5
6
7

handleChangeDisplayType = e => {
  const { dispatch } = this.props;
  // 获取echarts图表数据
  dispatch({ type: 'securitySystem/fetchSpaceAlarmData' });
  // 受控组件Button.Group，需手动改变state中的值
  this.setState({ displayType: e.target.value }); 
};

1
2
3
4
5
6
7
8

componentDidUpdate() {
  const { spaceAlarmData } = this.props;
  const el = document.getElementById('parking_space_alarm')
  echarts.dispose(el);
  this.parkingSpaceAlarmChart = echarts.init(el);
  // 渲染图表组件
  this.renderSpaceAlarmChart(spaceAlarmData, this.parkingSpaceAlarmChart);
}

ant-modal/forceRender

以下是ant design对于对话框的使用场景介绍：需要用户处理事务，又不希望跳转页面以致打断工作流程时，可以使用 modal 在当前页面正中打开一个浮层，承载相应的操作。对话框可细分成两类：模态对话框和非模态对话框。模态对话框会阻断应用程序，如果出现，直到对话框关闭，则其是应用程序当前唯一活动的东西；非模态对话框不会阻断应用程序，因此同时可以有多个非模态的对话框被激活。ant-modal是其组件库中的模态对话框，与之类似如bootstrap-modal也是模态对话框。

ant-modal属性forceRender属性的主要作用是：无论modal是隐藏或者显示，都会强制性的将modal渲染到DOM中，以满足在实际开发过程中的一些需求，例如：在进入modal前，提前获取到模态框中的DOM元素，作为图片加载容器，从而解决在网络环境较差时打开modal图片加载缓慢的问题。

问题

如果需要发给后台一个标准的JSON数组，通常情况下使用JSON.stringify()对数组进行序列化即可，如果数组比较简单，也可以使用引号手动拼接。在项目开发过程中遇到过这样一个问题，在手动拼接JSON数组后，经过umi-request的自动序列化与反序列化，最终发送的请求参数却不是一个可识别的标准JSON数组，而是一个字符串。主要原因在于：对嵌套字符串进行序列化和反序列化时，有可能会将字符串中的引号进行转义，如果拼接的字符串格式不正确，就会出现无法转义的情况，最终只能得到一个字符串而不是JSON数组。

什么是浏览器缓存，为什么要使用它？

缓存游走于服务器和客户端之间。服务器可能是源服务器（存放请求资源的服务器），也可能是反向代理服务器（如 Nginx），数量为 1 个或多个；客户端可能为 PC 端、移动端等，数量也为 1 个或多个。简单的说，缓存用于监控服务器与客户端之间的通信，监控客户端请求，并且把请求输出的内容（如页面、 图片和文件）拷贝一份副本存在本地；然后，如果下一个请求是相同的 URL，则直接请求保存的副本，而不用再次向服务器获取。

Shared mutable state is the root of all evil –Pete Hunt