前端【性能优化】与【代码可读性】的「权衡」

曾经写React时，追求极致的效率，各种用useMemo memo等等，后来才知道什么最重要——代码可读性。

React改变了前端开发的方式，由命令式编程（jQuery操纵Dom）转化到了声明式编程（根据data声明UI），这极大程度提高了开发效率，且它内部做了很多性能优化的手段。（当然用jQuery也可以声明式编程，每次data改变就重新渲染UI，但会有性能问题，若自己解决又会导致开发效率降低）。

我很佩服Facebook团队，因为React兼顾了「性能优化」和「开发效率」。

开发效率：在前端开发中，声明式编程优于命令式编程。开发者只需要关注data => UI的逻辑，不需要关注老UI => 新UI的变更逻辑。关注前者是简单的，只需要根据不同data，写一遍映射到UI的逻辑。关注后者，你可能要考虑不同状态下的UI变为另一种状态的UI的情况，心智负担比较大，尤其是当交互逻辑复杂时。

性能优化：虚拟DOM，协调，时间分片等优化手段，都为命令式编程创造了必要条件。

业务开发者过分关注性能优化，不太合适。

React已经考虑到了性能优化，我们其实不必刻意关注性能。只有当性能出现问题，影响到了用户体验时，再去寻找原因，找到瓶颈，考虑性能优化。我们开发阶段，重点关注两点——开发效率、维护成本。

也许你用了大量useMemo，渲染速度从8ms提升到了6ms，但是代码可读性很差，别人看半天