超级会员免费看
本文探讨了如何设计React组件，介绍了组件的分类，如展示组件、代理组件、式组件、布局组件、灵巧组件（有状态组件）和高阶组件。通过组件分类和实例，阐述了组件的组合方式，强调了组件的复用性和关注点分离的重要性。同时，文章提到了高阶组件在抽离公共逻辑、处理渲染劫持和避免缺陷（如静态函数丢失和refs透传问题）中的应用，以及在工程实践中的组件组织策略。
第 01 讲中，我们知道了 React 通过组件化的方式，解决了工程实践中代码如何组织的问题，但它并没有指出组件之间应该按照什么样的方式去组合，本讲我们一起来探讨这个问题，即“如何设计 React 组件”。
破题
“如何设计 React 组件？”其实就是在考察你是否了解 React 组件的设计模式。
你有没有发现在实际的工程实践中，如果缺乏一个指导性的设计模式，而直接开发，代码往往会非常凌乱。常见的情况就是：
● 将一个页面写成一个组件；
● 一个组件包含两三千行的代码。
这些都没有明显的模块划分，缺乏组合的思想。所以如何将组件更好地组合，这是需要探讨的第一个问题。
在明确了“如何组合”这一核心主题后，我们需要思考的是，如何将核心主题以更好的形式展示出来，因为平铺直叙地罗列知识，那内容是非常干瘪的。而基于不同的业务场景，组件的组合形式是不一样的，所以如果结合丰富场景来展示“如何组合”的方式，可以让表述变得有血有肉，也显得你经验十足。
这里你就需要先搞清楚基于场景的设计分类了。
承题
通过以上的分析，我们可以得出“如何设计 React 组件？”这一题的答题套路是“一个主题，多个场景”，即围绕“如何组合”这
订阅专栏 解锁全文
扫一扫
59
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
