(5)跨级组件通信

本节目标：理解“(5)跨级组件通信”的核心思路，并能把它用于实际开发或面试表达。所谓跨级组件通信，就是父组件向子组件的子组件通信，向更深层的子组件通信。跨级组件通信可以采用下面两种方式：

中间组件层层传递 props
使用 context 对象
全局变量

第一种方式：如果父组件结构较深，那么中间的每一层组件都要去传递 props，增加了复杂度，并且这些 props 并不是这些中间组件自己所需要的。不过这种方式也是可行的，当组件层次在三层以内可以采用这种方式，当组件嵌套过深时，采用这种方式就需要斟酌了。

第二种方式：使用 context 是另一种可行的方式，context 相当于一个全局变量，是一个大容器，我们可以把要通信的内容放在这个容器中，这样一来，不管嵌套有多深，都可以随意取用。使用 context 也很简单，需要满足两个条件：

上级组件要声明自己支持 context，并提供一个函数来返回相应的 context 对象
子组件要声明自己需要使用 context

//

全局

context
import { createContext } from 'react';
//

创建一个

 context
export const MyContext = createContext();
//

父组件

import React, { useState } from 'react';
import { MyContext } from './myContext';
import Child from './Child';
function Parent() {
  const [name, setName] = useState('zhangsan');
  return (
    <MyContext.Provider value={name}>
      <h1>Parent {name}</h1>
      <Child setName={setName} />
    </MyContext.Provider>
  )
}
export default Parent;

//

子组件

import React from 'react';
import SubChild from './SubChild';
function Child({ setName }) {
  return (
    <>
      <h1>Child</h1>
      <button onClick={() => setName('lisi')}>Change Name</button>
      <SubChild />
    </>
  )
}
export default Child;

//

孙组件

import React, { useContext } from 'react';
import { MyContext } from './myContext';
function SubChild() {
  const name = useContext(MyContext);
  return (
    <>
      <h1>SubChild {name}</h1>
    </>
  )
}
export default SubChild;

(5)跨级组件通信 ​

(5)跨级组件通信