1 分钟带你入门 React Context

 关注

发布于: 2020 年 10 月 21 日

前言：如果当你看过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 <DemoContext.Provider value={initValue}>
    	...
    	<ChildrenComponent />
    </DemoContext.Provider>
}
﻿
只需要在顶层组件创建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(
		<div>{this.context.xxx}</div> // 第二步
	)
}
﻿
function组件
//  context.js
export const DemoContext = React.createContext() // 还是同一个DemoContext
﻿
// ChildrenComponent.jsx
import {DemoContext} from './DemoContext'
﻿
export default () => {
	return (
		<DemoContext.Consumer> // 通过Consumer实现
      {value => <div>{value}</div>}
		</DemoContext.Consumer>
	)
}
数据消费方，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 <DemoContext.Provider value={initValue}>
    	...
    	<ChildrenComponent />
    </DemoContext.Provider>
}
﻿
...
﻿
// ChildrenComponent.jsx 数据消费
import {DemoContext} from './DemoContext'
﻿
export default () => {
	const anyThing = useContext(DemoContext) // hooks是不是清爽很多
	return (
		<div>
      {anyThing}
		</div>
	)
}
Hooks的生产方的代码不用修改，就是消费方代码更加的清爽了！
﻿
好了，到此为止，如果你记住了数据生产方，数据消费方这个口诀，那就能够轻松应对它的各种变化了，我想不管以后API再怎么变化，他的核心逻辑是不会变的吧；剩下的事情，就需要你把它合理的运用到实战当中，当然，更详尽的信息请查看React官方文档。
﻿
其实解决组件之间的通信问题，还可以使用第三方插件，比如：Redux
推荐你看看1 分钟带你入门 Redux、React-Redux
参考：React Context
React useContext
﻿

发布于: 2020 年 10 月 21 日阅读数: 35

原文链接:【http://xie.infoq.cn/article/61858c099fe6f0ad1f7a40c09】。

🇯 🇹 🇷

 关注

读书点亮生活， 2019.01.16 加入

Polo MI

评论 (1 条评论)

发布

InfoQ_e9f3d1b8c10a

真1分钟入门，赞！

2020 年 10 月 22 日 11:57

 0  回复

没有更多了