React hook祖孙组件传值(嵌套组件通讯)

• context是一个全局变量，像是一个大容器，在任何地方都可以访问到，我们可以把要通信的信息放在context上，然后在其他组件中可以随意取到。
  但是React官方不建议使用大量context，尽管他可以减少逐层传递，但是当组件结构复杂的时候，我们并不知道context是从哪里传过来的;而且context是一个全局变量，全局变量正是导致应用走向混乱的罪魁祸首。
• 创建context.js/ts存放上下文

import React from 'react'

const MyContext = React.createContext<string>('')
export default MyContext

• 父组件

import React, {useState, useEffect, useRef} from 'react'
import MyContext from '@/tools/context'
import Child from './Child'
const Parent = props => {
	return (
		<MyContext.Provider value="hello world">
      		<Child/>
    	</MyContext.Provider>
	)
}

export default Parent

• 子组件

import React, {useState, useEffect, useRef} from 'react'
import Son from './Son'
const Child = props => {
	return (
		<Son/>
	)
}

export default Child

• 孙组件

import React, {useState, useEffect, useRef} from 'react'
import MyContext from '@/tools/context'
const Son = props => {
	return (
		<MyContext.Consumer>
      		{
        		context => <div>{context}</div>
      		}
    	</MyContext.Consumer>
	)
}

export default Son

• 也可以使用React.useContext钩子获取上下文对象绑定的值

import React from 'react'
import MyContext from './context'

const Son = props => {
  const context = React.useContext(MyContext);
  return <div>{context}</div>
}

export default Son