react学习记录

本文首发于我的博客

前言

前段时间用vue重构完公司的pc项目后闲了两天，回味了一下vue的整体开发过程。
现在公司有个无线项目预计是需要重构的，因为本身是混合开发的webApp。所以在vue的基础上直接去读了react的文档。
以便于未来看情况是否可以上react native去完成项目重构。
留个学习记录在此，一是好记性不如烂笔头，二是方便以后回头查看。

react的生命周期

react开发过程的注意事项

众所周知react的黑科技是虚拟dom技术。
而这种技术的出发点就是为了在能自动化更新dom的情况上且避免大面积的更新dom(这也就是Angular2为什么与Angular1有如此大不同)，从而快准狠的针对修改处进行修改。
所以我们在开发过程中也应该保证此技术的出发点，避免大面积更新dom。这样才是好钢用在刀刃上。

shouldComponentUpdate()

而根据上面的生命周期图示，我们会发现shouldComponentUpdate钩子是非常特殊的。
因为mvvm的思想我们的核心关注点基本都是在数据上，所以我们在交互过程中可能要非常频繁的去调用this.setState。
这样就会频繁的触发shouldComponentUpdate，所以我们必须要确保此钩子的运行速度。

那么一般情况我们只需要对传入的值进行判断就好了，比如：

shouldComponentUpdate(nextProps,nextState){
  if(nextState.Number == this.state.Number){
    return false
  }
  return true
}

好，正戏来了！

稍微对js有点了解的人都会知道，函数传参是值类型,那么如果只在这里不做特殊处理的话就只会返回false是不符合条件的。

那么我们有哪几种解决方案呢？

1. 很经典的对象深拷贝

如果你确定你自己的能力能写出很完善的深拷贝方法并且性能有所保证是完全可以自己实现的，原理就是将目标的引用类型通过递归，层层向下找到最底层的基础数据类型，然后拼装成一样结构且数据相同的引用类型。

2. immutable.js库

有人说这个库真的是一个伟大的发明，他的存在如果善于利用可以使react的性能十倍十倍的提升

上面这句话是我在社区内看到的，足以证明这个库的价值。