加餐01｜留言区心愿单：真·子组件以及jsx-runtime
宋一玮
你好，我是宋一玮，欢迎回到 React 应用开发的学习。
这是专栏的第一次加餐。我和专栏编辑从已上线课程的留言区中，选择了一些具有代表性的问题。这次加餐我们先来讲讲“真·子组件”，以及 JSX 这一语法糖在 React 17 版本以后发生的变化。在心愿单里呼声同样比较高的，还有 Fiber 协调引擎，会放到下节加餐中。
好的，接下来开始我们的加餐内容。
真·子组件
在第 5 节课中，我曾提到过：
React 还流行过一波真·子组件（Sub-components）的设计模式，代表性的组件库有Semantic UI React、Recharts……如果你感兴趣的话，在靠后面的课程中我会讲解一下这种模式的具体实现。
在 React 领域，一般提到中文“子组件”，指的是 Child Component，用于描述在 React 运行时（Runtime）构建的组件树（元素树）中，组件与组件之间的父子关系。
而这里提到的 Sub-components，主要还是在描述设计时（Design-time）组件与组件间的强包含关系（Containment），而在运行时这些组件之间却不一定是父子关系。所以，把 Sub-components 直译成“子组件”就不太合适，我就改用了“真·子组件”这种中二的翻译，意在与 Child Component 区别开。事实上，“附属组件”、“次级组件”、“副组件”也都是可行的名字。
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线笔记
复制
AI
- 深入了解
- 翻译
- 解释
- 总结
React 17/18中的JSX运行时介绍了React在新版本中对JSX的变化和优化。文章首先提到了React从17版本开始启用全新的JSX运行时来替代`React.createElement`，并解释了这一变化的动机和具体更新内容。新的JSX运行时带来了自动导入、在props之外传递`key`属性、将`children`直接作为props的一部分等变化，从而解决了在性能优化方面存在的一些痛点。文章还介绍了在渲染时如何处理真·子组件，以及推荐了使用组件函数+Hooks的v3版本来实现真·子组件。整体来说，本文深入浅出地介绍了真·子组件的概念和应用，为React开发者提供了有益的技术指导。
仅可试看部分内容，如需阅读全部内容，请付费购买文章所属专栏
《现代 React Web 开发实战》，新⼈⾸单¥59
《现代 React Web 开发实战》，新⼈⾸单¥59
立即购买
© 版权归极客邦科技所有，未经许可不得传播售卖。 页面已增加防盗追踪，如有侵权极客邦将依法追究其法律责任。
登录 后留言
全部留言(3)
- 最新
- 精选
杨永安夜宵支持作者回复: 你好，杨永安，谢谢支持！我也喜欢在半夜2点吃夜宵（虽然不太健康啦）。
2022-09-27归属地：北京
joel老师你好，我希望以下心愿单： 1、react 更新机制原理等比较进阶的东西 2、react 自定义hooks 比较经典的案例场景，以及hooks 实现原理 3、对比vue 的原理机制，比如 vue 没有fiber, react 的设计的原理貌似跟vue 不一样，虽然都是有xxx等特点作者回复: 你好，joel，感谢你的心愿单。1、React更新机制在加餐02的Fiber协调引擎中有所涉及；2、自定义Hooks会在后面的第18节课代码复用中有介绍；3、这个我也很有兴趣想写一写，不过最近还是先赶稿，等我有喘息机会尽量安排 :)
2022-09-23归属地：北京- 风太大太大想听听react的高阶级用法，例如使用高阶组件。 怎么利用react-hooks 进行项目工程化改造， 怎么自己封装合理且好用的自定义hooks
作者回复: 你好，风太大太大，在后面的第18节课代码复用，会跟大家探讨自定义Hooks和高阶组件，敬请期待。
2022-09-20归属地：北京
收起评论