react初体验之小小的细节大大的坑--致被公司赶鸭子上架的react萌新

太久，太久，是否过了太久。。。
一晃眼从合肥来北京都有两个月了，总是有各种理由偷懒不整理，赶项目、准备面试、赶项目。。。
行吧回归正题
来到北京这边公司的技术栈是react，可是我没用过啊，不对，我也没学过啊，我vue也还没学明白呀啊喂
说实话vue转react说容易也还行，毕竟框架的相似点还是很多的，说难。。那坑定得踩踩坑才能好好认识他
下面先来整理一下react中哪些要注意的地方吧～
1、 关于代码结构
尽可能的拆分，比如页面很长，可以拆分成几个component 像这样：

我这里是因为对首页四个tab拆分了，正常按业务命名哦，方便快速定位。

同样组件内部也要尽可能的拆分成一个个小模块，避免重复嵌套，比如：

与模块相关的css也要尽可能的写相关注释，分隔区域，以便快速定位修改。

2、关于数据处理
锅的原因，确实因为着急上手react项目，没有深刻体会react的设计思想、state机制、生命周期等，导致了一些莫名其妙的问题然后浪费了更多的时间。
下面有些相关的注意事项，适用于着急上手项目没时间深度学习react的同学先一步牢记，避免踩一些没必要的坑。

1. 0.state的设定原则，如果render里用不到，则就不应该是一个state，可以用页面全局变量直接this.xxx 或者局部变量即可。
2. 尽量少的使用setState，因为每次state改变都会导致render重新渲染，很耗性能，且可以将多次state更新合并成一次更新，避免触发多次render。
3. 避免在render函数里处理复杂数据，尤其是列表加载。
4. 对数据拆分时，尤其引用数据类型（数组，对象），要注意数据的不可变性，比如数组中增加/删除/修改一条数据要保持原数组不变，拷贝一份以后使用新数组修改state。
5. 不要在componentWillMount、componentDidMount进行setState操作。setState() 并不总是立即更新组件。它可能会批量或延迟到后面更新。这使得在调用 setState() 之后立即读取 this.state 存在一个潜在的陷阱。而使用 componentDidUpdate 或 setState 回调（setState(updater, callback)），在应用更新后，都将被保证触发。

---

以上的这些很基础也有些废话，毕竟不管是vue还是react不都是组件化思想嘛，但是react让我更深刻的理解到拆分和模块独立的重要性，由于其设计模式和语法的关系，它没有vue三段式的单页面文件看着清晰，当react页面结构稍微复杂点、逻辑和数据稍微多点，不拆分的话会异常难以阅读和维护，改bug以及别人看代码的时候会疯的。。。（注：不拆分也特别容易因为逻辑不清晰出bug）
数据处理方面由于我的滥用state导致页面渲染次数太多，列表触底加载相当不流畅，处理数据的位置不规范，数据还会出现各种各样的奇怪错误，最后的结果就是，返工返工返工。。。
最重要的一点，一定不要像我一样上来蒙着头就写，提前思考呀！ 不管是画页面还是对数据，不要怕浪费时间更不要着急，一开始着急省下来的那些时间会在改bug的时候数倍奉还，血的教训，淡定呀伙伴们

好吧我知道错了，还坑了我的同事们😢 绝不再犯！