Problems to be solved
props 逐层传递
problem of props
- 重复参数传递
- 状态提升到太高的层级会导致
逐层传递 props，解决方案是props 直达
context
- xxx file create levelContext
- xxx 使用 levelContext.
useContext告诉 react，我想要读取 levelContext - xxx 提供 levelContext
使用
levelContext.Provider提供 value，如果是嵌套，组件会使用 UI 树中在它上层最近的provider传递的值
- 嵌套组件如何覆盖context. section既是使用者，又是提供者
- 工作方式类比：CSS 属性继承(不同的 context 不会覆盖彼此，类似于 color 和 background-color)
使用context之前思考
-
props让数据流更加清晰 - 抽象组件，并将
JSX作为children传递给他们 ，就可以减少一层
function Layout () {
return <children/>
}
scenarios
- 远距离组件
- StoreProvider -> RTLContext.Provider -> I18nProvider -> AntdProvider
- RTLContext.Provider (isRtl, adv, and etc.)
- radio-card
- CreativeContext.Provider
challenge
import { useState, useContext } from "react"; 注意正确引用 context