手记

【九月打卡】第11天 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 的困扰,一种在全局(多层组件)分享数据的简单方法

0人推荐
随时随地看视频
慕课网APP