我们之前说过React是一个组件至上的技术栈,所以,组件之间的通信就是大家关注的话题。主要有以下几种:
父子组件
父子组件的传值通过props来实现。
1 | var parent = () => { |
子父组件
子父组件的通信主要是通过callback来实现。
1 | var parent = () => { |
父孙组件
父孙组建有俩中方式:
- 以父子组件传值的方式,层层向下传递;
- context上下文的方式:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27const context = createContext()
var parent = () => {
const [count, setCount] = useState(0)
return (
<div>
<context.Provider value={ count }>
<Child />
</context.Provider>
</div>
)
}
var child = () => {
return (
<div>
<Son />
</div>
)
}
var son = () => {
return (
<context.Consumer>
{
count => <p>{count}</p>
}
</context.Consumer>
)
}无关(兄弟)组件
非嵌套关系的组件通信主要有以下三种方式: - 兄弟组件,可以通过找到共同的父组件,通过父子,子父组件的方式实现通信
- 可以通过redux, mobx, recoil等全局状态库来实现全局状态管理
- 可以通过自定义事件(发布订阅)