React组件通信

组件通信方式

• props
• callback
• context（跨层级）
• Event 事件
• ref 传递
• 状态管理（mobx）等

props 和 callback 方式

1. 父传子

• 所有参数通过 props 传递，要注意，组件包裹的内容都在 children 中

2. 子传父

• 子组件传父组件：通过父组件传递的 callback 函数，通知父组件

context 方式

• 这种方式常用于上下文，用于实现祖代组件向后代组件跨层级传值

context 的模式

1. 创建 Context: React.createContext()
2. Provider：提供者，外层提供数据的组件
3. Consumer：消费者，内层获取数据的组件