前言

这是一个帮助大家一步一步认识react的Demo。像写教程一样写代码对于我自己而言也是一个挑战。 但是由于目前公司是使用Vue技术栈的。不想扔掉React。所以也是通过这个项目。让自己不要忘掉React。

线上地址

挑战

• 如何设计一个具有很好开发体验的代码结构。提供一个易维护的项目参考。
• 整个项目都是以教材式的内容呈现
• 可以任意更换主题
• 可以任意更换语言
• 1px 和 100%：这是一个神奇的问题，在做布局的时候突然发现，用户可以设置宽度1像素，也可以设置宽度100%。那么如何识别这个单位呢？react自动会将数字添加单位px。但是百分比并不会。但是，如果都想宽度100%了，还用这个组件(Layout.Row&Layout.Col)干屌啊。。。。。。
• 由于代码分割是在编译期间进行的。所以无法进行动态代码分割。这里该如何处理？import()不能传入变量

使用

为了避免css名字空间冲突，必须在页面的跟元素设置class r-ui，否则样式会不生效。

优化分析

生成本地分析报表

  $ npm run analyzer

生成webpack分析文件，上传到Webpack官方分析工具进行分析，可以看到文件关联关系。

  $ npm run stats [文件名] // 必须指定文件名

积累

• 直接用过import xxx from xxx的方式引入，会直接打包到对应的模块内，这样会引起重复打包。把需要按需加载的模块通过 import(xx)的方式引入，在build的时候会自动代码分割，进行按需加载。
• 由于代码分割是在编译期进行的，所以不能通过变量的方式灵活使用import(变量)的方式配置动态路由。
• 写在js文件的markdown格式的字符模版必须从第一列开始，否则解析不出来。