react渲染优化之map

Posted 2021-05-01 error的草稿本

最近在看《深入浅出React和Redux》时，看到优化这一章时。很想说一句“写的是什么鬼东西？给了我台电瓶车，我用成了脚踏车”。于是打算借花献佛了，炒一次冷饭了。这里其实还是忘掉了一直提到的“以数据驱动渲染这句话”。

这里提到的渲染优化主要是避免重复渲染，这个在作者用到todo例子里面很很明显结合书上给chrome扩展包“React Devtools”（React节点信息查看）、“React Perf”（React 渲染查看工具）。这两个可以在谷歌商店中找到。

在作者的todo例子中的todoList这个地方出现了一个map操作，徐然渲染一个list列表，这里存在多次添加。一个合理的逻辑是已经添加了的数据list就不要再渲染。只渲染新添加的，但是这个其实如果在代码里处理的不对是会多次渲染的。看完这个回想自己的代码，确实是有这个问题。

Pref性能测试就是需要在做操作前点击start，操作结束点击stop。得出的就是两次操作中间的渲染消耗。Pref的使用需要配合“react-addons-perf”这个包使用，在代码里添加如上一行就好。

添加4次记录可以看到由Todlist触发的todoItem渲染中有0.39ms的多余渲染消耗。如果在做操作正常应该是前4个不需要渲染了。

然而确实再添4个多出的渲染是0.5，说明之前的数据还是有渲染的。

渲染优化

下面是todoList 以及todoItem的代码，基本上我没添加一次记录都是实例化一次todoItem，并且渲染之前的记录。

试试去掉外部的函数，再看看渲染的触发。

可以看到每次添加其实只渲染了新添加的数据，之前的实例并没有重新渲染。看到作者的代码后其实有一个点还是有注意到todoItem组件是以一个状态组件的方式处理的，并利用了connect中的浅比较。所以虽然数据中添加了新数据，而去掉了里面的两个函数后，并没有说map执行会触发原有的实例刷新，只有push进的新数据会触发更新。值得注意的是两个传入函数的写法，并没有指向任何一个变量或常量。但是这个其实应该也不是主要原因。xia面这个其实应该就能明确的说明指针了。

所以，结合自己写代码时候的形式，其实还是要慎用这种在组件属性中使用的无声明的对象和函数。传入组件props的每一个属性有待确定，如map这种传入外部非元素对象所持有的变量或常量就是会触发不必要的渲染。这种有时候真的是隐形坑。