React使用总结

[liusaint]

React 使用总结
最近到了新公司，开始用 React 写项目。开始自己搭了脚手架，后来直接用了 ant-design-pro。毕竟很多组件是现成的，节省工作量。

Prompt 自定义样式

经常有这样的功能需求，当路由变化，用户要离开页面的时候提示用户正在编辑是否确认要离开。在 react-router4 之前可能有对应的 React 生命周期 routerWillLeave 来实现。到了react-router4 则提供了组件 Prompt。官方文档参考：https://reacttraining.com/react-router/core/api/Prompt。粗略看了一下它不太好实现自定义样式，比如我们要使用 ant-design-pro 中的 Modal.confirm 是不太好实现了。
于是找到一个替代组件，react-router-navigation-prompt。https://github.com/ZacharyRSmith/react-router-navigation-prompt。使用方式类似下面。给自定义的 modal 组件传入组件的 onConfirm 和 onCancel 回调就行。

<NavigationPrompt when={this.state.needConfirm}>
    {({ onConfirm, onCancel }) => {
        Modal.confirm({
            title: '确认离开？',
            content: '此时离开，已编辑内容将不会保存',
            autoFocusButton: null,
            onOk: onConfirm,
            onCancel: onCancel,
        });
    }}
</NavigationPrompt>

注意，某些情况下会弹出 2 次确认框。

• 新页面的 constructor 中执行了 location.replace 等操作可能出现。
• 点击浏览器的返回时可能会出现 2 次确认弹窗。可能该组件没有做单例模式。
  解决办法是增加一个状态来判断当前是否有弹窗。如果有，组件传入的函数就不执行 Modal.confirm 直接返回 null 了。

多次渲染传统组件引起的性能问题。

某个页面有大量的渲染传统组件的需求，我们因为某些原因使用了修改后的 webuploader 做上传组件，并且该页面初始化上传组件的次数非常之多。
需要非常严格地检测是否要重新渲染上传组件，在 componentWillReceiveProps 中做严格的判断，不能多初始化，不能不初始化。

ant-design-pro 面包屑与菜单的问题。

ant-design-pro 的面包屑与菜单主要是由 config/router.config.js 中的路由配置来实现。参考文档：https://pro.ant.design/docs/router-and-nav-cn 。
文档有些地方写的并不是特别清楚，一个页面的 path 是 /a/b/c,那么面包屑的生成顺序可能是['/a','/a/b','/a/b/c']这样子，并且如果'/a'是左边菜单中的某一项，那么此时'/a'菜单项也是处理选中状态的。所以有时候根据面包屑需求的不同，要修改的可能不是路由的结构层级，而是路由中的各项 path路径。
除了根据路由配置生成的面包屑，一定程度上也可以自定义，给 PageHeaderWrapper 组件传入 breadcrumbNameMap 属性。这个属性具体内容，文档上写的不是很详细,这里简单说下,比如某个页面 path 为'/a/b/c',那么可传入：

const breadcrumbNameMap = {
	'/a': {
		name: '一级',
		locale: 'a',
	},
	'/a/b': {
		name: '二级',
		locale: 'b',
	},
	'/a/b/c': {
		name: '三级',
		locale: 'c',
	},
};

最终生成的面包屑为：一级/二级/三级，如果二级'/a/b'不传入，则生成一级/三级这样。

（待续）