{"action":"opened","issue":{"url":"https://api.github.com/repos/nanyang24/blog/issues/71","repository_url":"https://api.github.com/repos/nanyang24/blog","labels_url":"https://api.github.com/repos/nanyang24/blog/issues/71/labels{/name}","comments_url":"https://api.github.com/repos/nanyang24/blog/issues/71/comments","events_url":"https://api.github.com/repos/nanyang24/blog/issues/71/events","html_url":"https://github.com/nanyang24/blog/issues/71","id":324694439,"number":71,"title":"HOC，而不是继承","user":{"login":"nanyang24","id":17287124,"avatar_url":"https://avatars3.githubusercontent.com/u/17287124?v=4","gravatar_id":"","url":"https://api.github.com/users/nanyang24","html_url":"https://github.com/nanyang24","followers_url":"https://api.github.com/users/nanyang24/followers","following_url":"https://api.github.com/users/nanyang24/following{/other_user}","gists_url":"https://api.github.com/users/nanyang24/gists{/gist_id}","starred_url":"https://api.github.com/users/nanyang24/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/nanyang24/subscriptions","organizations_url":"https://api.github.com/users/nanyang24/orgs","repos_url":"https://api.github.com/users/nanyang24/repos","events_url":"https://api.github.com/users/nanyang24/events{/privacy}","received_events_url":"https://api.github.com/users/nanyang24/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2018-05-20T09:01:37Z","updated_at":"2018-05-20T09:01:37Z","closed_at":null,"author_association":"OWNER","body":"# HOC，而不是继承\r\n高阶组件的这种写法的诞生来自于社区的实践，目的是解决一些交叉问题(Cross-Cutting Concerns)\r\n\r\n**React官方推崇 HOC、组合 的方式来扩展组件功能，而不是继承的方式**\r\n\r\n> 高阶组件就是一个函数，且该函数接受一个组件作为参数，并返回一个新的组件\r\n> 更加通俗的讲，高阶组件通过包裹（wrapped）被传入的React组件，经过一系列处理，最终返回一个相对增强（enhanced）的 React 组件，供其他组件调用。\r\n> 参考1：[React 高阶组件浅析 - hiyangguo - SegmentFault 思否](https://segmentfault.com/a/1190000010845410)\r\n> 参考2 [深入理解 React 高阶组件](https://zhuanlan.zhihu.com/p/24776678?group_id=802649040843051008)\r\n\r\n## React 推崇 组合/HOC 的原因\r\n\r\nReact 推崇 DRY 思想，希望组件是按照最小可用的思想来进行封装的，理想的说，就是一个组件只做一件的事情，且把它做好。\r\n\r\n在React中，组件是代码复用的主要单元。然而你会发现，一些模式并不适用传统的组件。\r\n\r\n其次React只是推荐使用HOC，但没限制使用继承的方式。在一些情形下使用继承是完全没有问题的，复用性和灵活性都有保证。\r\n\r\n但过渡使用继承，容易导致代码失控，组件膨胀，降低组件的复用性。\r\n\r\n比如需求有变，代码要从底层重新改，增加了不必要的工作量，减缓了迭代速度。\r\n\r\n小项目的时候，组合也好，继承也罢，可维护就好，能够快速的响应需求迭代就好，选择实现的方式并不是那么重要。但如果是一个大项目，页面用到很多组件，或者是团队多人共同维护的话，就要考虑协作中可能存在的矛盾，然后通过一定约束来闭坑。组合的方式是可以保证组件具有充分的复用性，灵活度，遵守DRY原则的其中一种实践。\r\n\r\n\r\n## 舍弃 Mixins 的 React\r\n\r\n最早时候 React 官方给出的解决方案是使用 mixin 。而 React 也在官网中写道：\r\n\r\n> We previously recommended mixins as a way to handle cross-cutting concerns. We've since realized that mixins create more trouble than they are worth.\r\n\r\n官方明显也意识到了使用 mixins 技术来解决此类问题所带来的困扰远高于其本身的价值。更多资料可以查阅官方的说明。\r\n\r\nMixins 的问题在于它太过于灵活，太依赖使用者，如果道行不够，很容易出现问题，容易导致覆盖代码不易维护\r\n\r\n"}}
{"actor":{"display_login":"nanyang24"}}