react知识点梳理

1.immutable

连续看了两三篇关于immutable.js的文章，传统的object和array等引用类型是mutable数据，就是当赋值的时候，指向同个内存，这在react更新机制里面就会出现个问题，引用是相同的，react purecomponent就会检测不出前后两个props的不同部分，就不会re-render,而React.Component是可以检测出来props的更新的，然后就会re-render,比如一个组件的props改变（数据流是单向的）该组件的props改变只需要其对应的父组件更新就可以了，不需要该组件的兄弟组件及其子组件更新，因为原生js引用类型共享内存，这些组件都会更新，这是我们不想看到的，所以引入了immutable.js共享部分内存，把直接相关的节点更新就可以了。

Immutable.js 以及在 react+redux 项目中的实践
react Performance Tools 入门
使用immutable优化React

2. 模块或者组件按需加载

React Loadable 简介
webpack 构建性能优化策略小结
react项目优化之webpack
react-router按需加载(V4版)

使用import()实现组件的按需加载

根据点击的链接会在head标签里插入

发现个很有趣的现象，点击About链接或者DashBoard链接两个组件相互切换，在同个页面的路由组件，路由切换的话，前面一个渲染好的组件会Unmount，即被卸载
例如路由about->dashboard，About组件会被卸载（componentWillUnmount被调用），DashBoard被装载（componentWillMount被调用），

由下图可以看出，路由导航到dashboard的时候About组件并没有被包含在其Route组件里，也就是切换路由的时候About被卸载了，移出了dom

仓库：assassin / react-starter

参考：

在react-router4中进行代码拆分（基于webpack）
HTML5