最近使用react做了一个人事管理平台的单页面应用（SPA），最开始的时候，是使用avalonjs，后台因为老板喜欢阿里团队的ant design组件，所以就推倒重来，重新用react开发全新的前端。在这之中，也看了Vue的文档，之前也使用过Angularjs，几乎流行的js框架都使用过，在这里谈谈使用reactjs开发的感受。
繁琐
与avalon和Vue等MVVM框架直接把对象绑定在vm对象上相比，react使用了state作为状态机，state上绑定的对象发生变化，会自动展现在dom节点上。然而，绑定归绑定，如果dom节点上的value发生变化，是不会自动表现在state上的，需要手动加上onChang、onClick等事件，所以很多的时间，很多的代码都消耗在属性的绑定上，如果时间有限，真正用于业务逻辑编写的时间并不多。这一点，没有MVVM框架方便。
组件间通信不方便
react组件之间的通信，是通过props属性来传递的，父组件想要传递参数给子组件，需要通过props属性层层传递，如果组件嵌套过深，就需要借助signal包（据说fb官方在使用）来传递信号，而signal包中主要的方法add和dispatch调用是散落在不同页面的不同地方，单从代码上看不出逻辑关系，在没有注释的情况下会非常令人费解。对于MVVM框架，组件间的调用直观，方便，使用起来就像这样：
vmFather = {
show:function(){
console.log("I am father component,I have displayed");
}
}
vmSon = {
callFatherShow:function(){
vmFather.show();
}
}
vmSon.callFatherShow();
代码不直观
虽然形式上看来还是基本的html网页结构，但是当中可能掺杂了许多的业务逻辑和模板符号，需要比较大的认知成本。
没有更快
react以没有多余的dom渲染著称，它给我们一个错觉，就是react渲染页面更快，并且性能优良，体验流畅。然而并不是这样，如果不是极端的情况，非常频繁的刷新dom，react其实还比别的框架慢一些。
尽管如此，组件化的思维还是让人惊叹这个框架开发者的想象力，react在我的使用体验中，带给我的坑远比方便要多，但是，它依然是一个很好的框架，在对这个框架有足够了解的情况下，的确能开发出很好的应用。所以，如果一定要使用react开发的话，需要注意以下几点：
不要过度组件化
是的，不要过度。不要在开发的时候过度的想去复用，事实上，许多页面开发出来后，原本想要加上通用接口作为一个新组件的“组件”最后都没有再被使用。大多数的时候，最后还是像书写html页面那样书写react，就是把一个页面的view包含在一个render里（我知道这看起来会很长很复杂），这样会避免许多不必要的组件间的通信，业务逻辑聚合在一起，无论开发，调试和重构都是有利的。
组件应足够的小
组件像一个按钮，一个tab，一个radio组，一个select，这样粒度的组件就可以了，再大的组件并非不可开发，只是会失去通用性。所以，要倾向于开发细粒度的组件，然后把这些组件组合在一起，形成一个有完整逻辑的页面。
几乎所有的前端团队如阿里，qunaer，ele.me都在积极为大家提供大而全的组件，然而，在实际的应用中，不会被重构的只有那些功能很简单的组件，组件的API再健全，能覆盖的范围依然是有限的。所以，无论是react还是MVVM框架，在使用大公司的开源组件时，当然会节省一些时间，但是只要业务逻辑稍微复杂，就发现很多组件无法排上用场。
如果还有机会开发单页面应用(SPA)，我会试试Vue。
网友评论