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

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

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

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

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

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

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

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

好吧我知道错了，还坑了我的同事们

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

React初体验-Hello React的组件化方式-React入门小案例
文章目录 React初体验 Hello React案例演练 Hello React案例升级 Hello React的组件化组件化的方式数据依赖事件绑定其他案例练习电影列表展示计数器的案例 ...
鸿蒙开发初体验以及遇到的几点坑
今天尝试了一下鸿蒙开发,有一些经验跟大家进行分享.建议大家先看完我的文章,再去尝试鸿蒙. 我安装好了开发工具,并且跑通了Hello World程序.同时,我还跑通了小鸿网课Java版本项目: 感觉,还 ...
乘风破浪React—01React初体验
React的起源 React起源于facebook公司工程师开发时的一个bug,三个消息提示图标右上角的数字显示实时未读消息的数目,过多的操作容易产生问题. 工程师很轻易的排查并解决的bug,但是他们 ...
LWIP初体验-修改ST官方demo
目录 01.硬件说明 02.修改步骤 03.效果显示 04.使用中断方式 05.Keil工程的修改 06.移植TCP客户机代码 01.硬件说明为什么要写这篇文章?STM32的网络应用还是个复杂的外设 ...
React 360 初体验介绍与环境搭建
React 360 初体验介绍从这章节内容呢,我们来学习并了解下什么是react 360,并使用它来开发一个360度可旋转大屏的案例项目.接下来,我们就一起来逐步揭开它神秘的面纱吧! 我们本章节将会 ...
在JS 中使用 fetch 初体验
在前端快速发展地过程中,为了契合更好的设计模式,产生了 fetch 框架,此文将简要介绍下 fetch 的基本使用. 在 AJAX 时代,进行 API 等网络请求都是通过 XMLHttpRequest ...
node.js 初体验
node.js 初体验 2011-10-31 22:56 by 聂微东, 174545 阅读, 118 评论, 收藏, 编辑 PS: ~ 此篇文章的进阶内容在为<Nodejs初阶之express ...
小程序缩放_缩放流星应用程序的初体验
小程序缩放 by Elie Steinbock 埃莉·斯坦博克(Elie Steinbock) 缩放流星应用程序的初体验 (First Experiences Scaling a Meteor Ap ...
升级鸿蒙系统效果,鸿蒙系统初体验全方位体验升级[多图]
鸿蒙系统是近期华为发布的,这个的话,在更新了以后,就能够看到了,不过只是对于某些适配机型来说是这样,其他的话,是没有的,很多用户都十分的好奇,也是在观望当中,这个的话,到底应不应该去升级,效果怎么样呢 ...

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

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

最新文章

热门文章