02｜Component：搭建静态页面的正确思路是什么？
组件：可组合、可复用的“拆稿”方式
荧光笔
直线
曲线- 深入了解
- 翻译
- 解释
- 总结
React/React Native 架构选择了基于组件的模式，以适应现代应用中重交互、重展示的情况。该架构模式具有组件内聚、可组合、可复用和单向数据流等优势。在搭建静态页面时，遵循单一责任原则，即每个组件只负责一个功能，并尽量减少外部依赖，以提高可读性、可维护性和可测试性。宿主组件是生产基础视图的工厂，包括容器组件 View、文字组件 Text 和安全区域组件 SafeAreaView。整体而言，本文强调了基于组件的搭建静态页面的正确思路，以及单一责任原则的重要性。文章还介绍了如何创建自定义的复合组件，以及静态页面的最终实现。总结指出，React/React Native 架构方式能够满足现代应用的需求，且遵循单一责任原则能设计出可扩展、可维护的应用。文章还提供了补充材料和思考题，引发读者对组件架构和 MVC 方式的思考。
《React Native 新架构实战课》，新⼈⾸单¥59
全部留言(14)
- 最新
- 精选
huangshan我之前写组件库的时候，是很坚持单一职责和OCP的，认为组件无状态灵活性很高。但是复杂组件经过组合和增强之后，感觉dom节点层数过多、数据流维护和状态更新成本变高。请问蒋老师对这一块有什么建议吗？作者回复: 首先，坚持单一职责和OCP原则是非常好的习惯，为你点赞。 你面临的问题正是我们所有人都面临的问题，业务复杂的增加必然带来的代码复杂度的增加。 从代码角度，能采用的手段主要是分而治之，像你说的单一职责、OCP，或者说 React 提供的 Hook 抽离通用逻辑的方法，都是把某块能够独立的逻辑从原有逻辑中抽离。 从团队角度，主要是流程保障和知识的普及。举个例子，我会拉着我们团队的同学对某个复杂模块举行团队 codereview，大概的流程是半小时的背景介绍，半小时的 codereview，1小时的讨论。在这两个小时中，真实挑战的案例和该案例的各种解决方案会在团队中普及开来，下次为大家遇到类似的提供思路。
2022-04-137
Asterisk应该讲一下clas风格组件和 function风格组件作者回复: class 在新项目已经基本用不上了，直接用 function 即可
2022-10-12归属地：北京1- Geek_ce9101你好，github 的项目我用安卓的没跑起来，有个疑问，package 里面并没有 install-android-hermes script，但 readme 里面却第一步就是：yarn install-android-hermes ？
作者回复: 你好，可以先去掉 yarn install-android-hermes
2022-05-233 - Geek_51b2dchttps://github.com/facebook/react-native/issues/33698 有同学搭建andriod环境的时候遇到这个问题 吗？怎么解决的能告知一下吗？2022-07-251
- Geek_140294
有没有环境搭建的内容啊？我跑项目都还跑不起来2024-03-11归属地：新加坡 
angelajing因为我本地环境npm等各种软件包的版本和github上下载的代码版本不一致（参见package.json），需要适当的更新dependencies的版本信息。例如， ---- package.json----- 19 "@apollo/client":"^3.5.6" -------------------- ----- terminal ------ $ npm search @apollo/client @apollo/client 3.8.7 ------------------ 命令行查看本地环境中 @apollo/client包的版本是 3.8.7，所以把 package.json文件中相关包的版本改一下。所有包的版本都改好后，执行下面的命令。记得启动 device simulator。 ------ terminal ---- $ npm install $ npm start -----------------2023-11-23归属地：辽宁
kittyEMVC的数据流向是C(5, 2) * 2 优点是：代码颗粒度小 缺点是：数据流向复杂，组件越多可能的数据流向更多2023-07-23归属地：江苏- Geek_ae84e1居然是音频课，大家要小心2023-06-19归属地：北京
- Asterisk确实只讲了一个思虑，我还需要再看看 https://reactjs.org/docs/components-and-props.html2022-10-12归属地：北京
- Geek_b056e8我下载了课件，但是怎么才能运行Demo里不同章节的代码呀？2022-06-214