如何优雅的进行组件抽离呢?

Question

如题，在vue.js，react.js等中如何抽离组件是比较好的体验呢？我现在做的项目之前的代码极其混乱，所以我需要对它进行重构工作。

譬如说，首页功能极多所以代码上千行，这样的话如果说把每一块都提取出来做成组件，是比较好的策略吗?

什么样的情况需要提取组件呢?

如果说提取组件，props和events要如何考虑呢?

有没有比较好的组件抽离规范或者方案呢?

ps：顺便求大厂这方面的规范，之前和组长商量的时候说看过一些支付宝组件提取的规范，但是现在找不到了

Answer 1

React组件设计实践总结
[译] 前端组件设计原则

Answer 2

1. 使用超过三次的重复代码，可以考虑抽出为组件
2. 逻辑比较接近，总是一起更新的代码，可以抽出为组件
3. props 方面，比较复杂的可以考虑注入或者 vuex
4. event 方面，尽量用浏览器事件（因为可以冒泡）
5. 这个部分跟业务关联比较紧密，很难讲有完整的方案
6. 以上主要针对 vue