React 单页面初始化渲染优化
Create at 2017 04 20 • 4 min read • 技术 • Reactreact-routerRedux
由于项目使用 React, React-Router, Redux 来开发项目，采取了前端渲染的方式（如果采用 ssr 就不会有这个问题）。
问题
所以每到一个页面，需要发一个初始化的请求来获取页面数据，然后重新渲染页面，所以之前一个页面从请求到加载完毕的流程是这样的：
Route match -> ComponentWillMount -> render -> ComponentDidMount -> dispatch(init())-> render -> componentDidUpdate
首先是路由匹配，然后准备加载组件，使用通过 Reducer 里面的初始化 state 进行 render, 然后触发 ComponentDidMount 事件，在这个事件里面去 dispatch 一个执行页面初始化的请求的 Action
最近对团队内部 React 组件库（ne-rc）中的 Form 组件进行了重构，记录一下思考的过程。
一些前置定义：
| 名词 | 定义 | | ------ | ------------------------------------------------- | | 表单 | Form 组件 | | 子表单 | 嵌套在 Form 下面的类似 Input, Select 这样的子组件 |
首先我们看一下，我们的对 Form 组件的需求是什么。
- 获取当前变动表单的状态
- 校验所有必填表单是否填写完成
- 对外触发具体表单变化的方法
formField
resolve.root,resolve.fallback,resolve.modulesDirectories
这些配置项项都被一个单独的配置所替代 resolve.modules. 查看 resolving 了解更多。
resolve: {
- root: path.join(__dirname, "src")
+ modules: [
+ path.join(__dirname, "src"),
+ "node_modules"
+ ]
}
resolve.extensions
这个选项已经不在需要传一个空字符串了。它的行为已经被移动到了 resol
缓存（Caching）
为了能够使 webpack 处理后的静态资源能够长期缓存下来，需要：
- 使用
[chunkhash]给每一个文件创建基于内容变化的缓存标识 - 在 HTML 文件中引入文件时使用编译状态来拿到文件名称
- 在载入资源之前生成 chunk-manifest JSON 文件并写入到 HTML 页面中
- 确保包含启动代码的入口代码块的 hash 值不会被修改，当它的依赖没有变化的时候
存在的问题
每当我们代码中有一些东西需要被更新的时候，它需要在服务上部署然后由客户端重新下载这些文件。当网络状状况不太好的时候，这是意见非常低效的事情。这也是为什么浏览器要缓存静态资源的原因。
这会导致一个陷阱：当我们发布一个新的版本的时候不去更新的文件名，这会让浏览器认为文件没有变化，导致客户端拿不到最新的资源。
一个简单解决问题的方式就是告诉浏览器一个新的文件名。在没有 webpack 的时候
动态模块替换（Hot Module Repalcement -React）
就像之前 理念页面 中解析的细节那样，动态模块替换（HMR）会在应用运行时动态的替换、添加或者删除模块而不用重新刷新页面。 HMR 非常有用，当应用只有一个状态树（single state tree）时。
下面介绍的方法描述中使用了 Babel 和 React ,但这并不是使用 HRM 所必须的工具。
项目配置
这里会指导你如何用 Babel， React 和 PostCss 一起使用 HMR 去演示一个项目。为了能够跟着下面走下去，需要把这些依赖添加到 package.json 中去。
为了使用 HMR，你需要如下这些依赖：
npm install --save-dev [email protected]前置定义
Bundle 代码包 Chunk 代码块
安装
npm install webpack --save-dev
代码分割
代码分割是 webpack 中最引人注目的功能之一。它允许你把代码分割成各种可以根据需求载入的代码包，就像一个用户浏览器去匹配路由一样，或者一个用户发出的事件。这允许你小的模块，允许你控制资源的载入优先级，如果使用得当的话，可以大大影响（降低）你应用的加载时间。
缓存和并行加载的资源分割
第三方代码分割
一个典型的应用会依赖很多第三方的框架和库文件。不像应用代码本身，这些第三方代码的变更非常频繁。 如果我们保持这些库在它本身的代码包中，从应用代码本身分离出来，那么我们就可以使用浏览器的缓存策略去在一个长时间内把这些代码缓存到最终用户的机器上。
为了达到这个效果，第三方代码的 verndor 包的 hash 部分必须保持不变，不管应用代码如何变化。学习 Read more
工作
时间也真是快，从 15 年到现在算来我做前端开发也将近两年了，没想到这一路走过来这么顺利，运气真是挺好的。
当初自学三个月，然后投简历面试，就拿到了好几个 offer，一切都太顺利了。然后去了一家做互联网金融的公司，老大对我很好，然而待了一年多还是在今年五月份选择了离职。原因很简单，公司的开发模式过于保守，一直待下去真的不会有任何长进了， 整天干的活都像是美工干的活，公司很不重视前端，而且前后端不分离，同一份文件前后端两个人一起改，想想真是痛苦。
那离职了就要找工作，不得不说，找工作的经历真有意思。
找工作
有一家创业公司，人家对我还比较满意，但就是薪资没谈妥，就算了，谁知道后来我都拿到另一家公司的 offer 了又说那个薪资可以接受了。
有一家外企，面试的时候对他们的工作环境非常满意，然而面试发挥太差，连 sass 的循环都写不出来，结果可想而知。面试官还很和蔼，说回去等消息吧，然后我出门不到五分钟就收到了短信，‘您不适合本公司的要求’，嗯，效率真高，挺喜欢这点。
有
异步的 Actions
前几篇的教程里面，我们搭建了一个 todo 应用。这是一个完全同步的，每次一个 action 被 dispatched, state 都会即时更新。 解析来，我们要搭建一个不同的，异步的应用。它使用 Reddit API 来展示一个选中栏目的头条。
Actions
当你调用一个异步的 API 时，有两个至关重要的时刻：你开始调用的时刻，和你收到答复的时刻。
这两个时刻通常都会需要对应用的 state 做出变化；为此，你需要 dispatch 普通的将会被 reducers 同步处理的 actions. 通常，对于任意 API 请求，你将需要 dispatch 至少三次不同的 actions:
- 一个通知 reducers 请求开始的 action
reducers 可能通过切换一个 state 中的
isFetchingflag 来处理这个 action. 用来告诉 UI 是时候显示一个等待标识了。 - 一个通知 reducer
第一次接触 flex 是在去年，当时是我第一次做手机项目，结果却因为兼容性问题给掉坑了。查了 can I use 发现它只支持到安卓 4.1, 然而我们的要求是要兼容到 4.0 才行的。 所以之后一直都没敢用，昨天听到有人说 flex 是可以支持到安卓 2.1 以上的。我不信，难道是我当时看错了？！ 今天又去查了一下，发现确实是 4.1 啊。盯着屏幕想了半天，突然发现 Can I Use 上一个浏览器浏览器使用率，想着该不会直接把使用率低的浏览器给忽略掉了吧。打开设置一看，果真如此，于是把数据源改成中国，浏览器最小使用率 0.03% 果真 2.3 出来了。
既然如此，说明 flex 还是可以在生产环境中使用了。那么就好好在过一下它的用法吧。 Flex 就是弹性布局，任何一个元素都可以设置为 flex 布局，当一个元素被设置为 flex 布局后，它的子元素上 float, vertical-align 都会失效。
紧接上一篇走进 Redux 之基础篇(一),接下来会跟着文档从下面三个点开始。
- 数据流
- 与 React 配合
- 实例：TodoList
数据流
Redux 的架构围绕与如何搭建一个严格的单向数据流。
这意味着所有的数据都有遵循一个同样的生命周期模式，可以让整个应用变得可预测也更加易于理解。在 Redux 应用中，所有的数据生命周期分为如下四个步骤：
1 你主动调用 store.dispatch(action)
Action 是一个用来描述发生了事情的对象。比如：
{type:'ADD_TODO',text:'todo\'s content'}
{type: