【九月打卡】第11天 2022升级 React18+TS高仿AntD从零到一打造组件库

课程名称：2022升级 React18+TS高仿AntD从零到一打造组件库

课程章节： 第6章 更上一层楼 - 完成 Menu 组件

主讲老师：张轩

课程内容：

今天学习的内容包括：

6-2 基础架构 - Menu组件编码第一部分
6-3 需求升级 - Menu 组件编码第二部分

课程收获：

useContext 是针对 React hooks 的解决方案，从命名可以看出他是个 hooks 函数，所以他只针对 hooks 这种解决方案，可以看文档：https://zh-hans.reactjs.org/docs/hooks-reference.html#usecontext 全篇没有出现 consumer 这个名词。

而 Consumer 是另外一个层次的解决方案，他可以通过特定组件的方式来获得插入的值，

<MyContext.Consumer>
  {value => /* 基于 context 值进行渲染*/}
 </MyContext.Consumer>

所以我认为这是两个维度的方案，两条不同的思路。一个是通过函数，一个是通过组件，各有千秋。当然 useContext 更方便，更好用，所以使用第一种当然可以完全替代第二种。

关于menu组件，由于是向用户暴露的组件。所以我们尽量需要讲组件语义化，也就是在应用的地方（程序员用户的代码里）进行组件嵌套。

这不同于之前的组件嵌套，而是组件映射之间的互相嵌套，所以我们无法把Menu组件中的数据和方法通过传统的props形式传递给MenuItem组件，而是需要通过另外一种组件之间的通讯方式：Context。
而各种用户的自定义配置，则是通过props来采集。
context 还解决了跨组件分享 props 的困扰，一种在全局（多层组件）分享数据的简单方法