前言：如果当你看过React的官方文档，还觉得迷惑，那这边文章就能帮到你。

其实说白了context可以实现任意组件之间的通信，而非通过props的方式；它的核心逻辑就两点，数据生产方，数据消费方，记住这个口诀，你将豁然开朗

下面为你介绍React16.3以上版本的context的基本用法

数据生产方

// context.js
export const DemoContext = React.createContext()

....

// root.jsx ---> Root Component
import {DemoContext} from './DemoContext'
export default () => {
	const [initValue, setInitValue] = useState('')
	return 
    	...
    	
    
}

只需要在顶层组件创建Context容器，然后将提供公共的数据，这就是数据提供方了

数据消费方

• class组件

//  context.js
export const DemoContext = React.createContext() // 还是同一个DemoContext

// ChildrenComponent.jsx
import {DemoContext} from './DemoContext'

export default class extends React.Component {
	static contextType = DemoContext // 第一步
	render(
		
{this.context.xxx}
 // 第二步
	)
}

• function组件

//  context.js
export const DemoContext = React.createContext() // 还是同一个DemoContext

// ChildrenComponent.jsx
import {DemoContext} from './DemoContext'

export default () => {
	return (
		 // 通过Consumer实现
      {value => 
{value}
}
		
	)
}

数据消费方，class组件挂载在this.context上，而function组件则在Context容器的Consumer的children中通过参数的形式传递。

至此，你只需要明白数据时如何生产的，又是如何消费的，任何形式的context应该都不在话下，不信就看看React16.8之后的Hooks是不是同一套思路呢?

用React Hooks来实现

// context.js
export const DemoContext = React.createContext()

....

// root.jsx ---> Root Component 数据生产
import {DemoContext} from './DemoContext'
export default () => {
	const [initValue, setInitValue] = useState('')
	return 
    	...
    	
    
}

...

// ChildrenComponent.jsx 数据消费
import {DemoContext} from './DemoContext'

export default () => {
	const anyThing = useContext(DemoContext) // hooks是不是清爽很多
	return (
		

      {anyThing}
		
	)
}

Hooks的生产方的代码不用修改，就是消费方代码更加的清爽了！

好了，到此为止，如果你记住了数据生产方，数据消费方这个口诀，那就能够轻松应对它的各种变化了，我想不管以后API再怎么变化，他的核心逻辑是不会变的吧；剩下的事情，就需要你把它合理的运用到实战当中，当然，更详尽的信息请查看React官方文档。

其实解决组件之间的通信问题，还可以使用第三方插件，比如：Redux

推荐你看看

参考：