React使用Context

第一章 React 入门之Context的使用

---

---

一、Context是什么？

编写组件的时候我们经常使用属性简写组件之间的传值，但是有时候我们的组件层级比较高，这导致我们传递的属性在一些中间组件并没有被使用，导致代码比较乱，这时候我们可以使用Context，Context相当于一个公共的存储空间。

二、使用步骤

通过React.createContext()创建context。

1.如何创建

import React from 'react'

const TestContext = React.createContext({name:'111'})

export default TestContext 

使用Context有两种方式

2.第一种方式

1.引入context
2.使用 Xxx.Consumer 组件来创建元素
Consumer 的标签体需要一个回调函数
它会将context设置为回调函数的参数，通过参数就可以访问到context中存储的数据

代码如下（示例）：

import React from 'react';
import TestContext from "../store/testContext";

const Test = () => {
	return (
		<TestContext .Counsumer>
			{(ctx) => {
				return <div>
					{ctx.name}
				<div>
			}}
		</TestContext .Counsumer>
	)
}

3.第二种方法

1.导入Context
2.使用钩子函数useContext()获取到context
useContext() 需要一个Context作为参数，它会将Context中数据获取并作为返回值返回

代码如下（示例）：

import React,{useContext} from 'react';
import TestContext from "../store/testContext";

const Test = () => {
const ctx = useContext(TestContext )
	return (
		<div>{ctx.name}</div>
	)
}

4.底层组件使用顶层组件数据

顶层组件

import React from 'react';
import TestContext from "../store/testContext";

const TestPorwer = () => {
	return (
		 <TestContext.Provider value={{name:'猪八戒', age:28}}>
             <Test/>
         </TestContext.Provider>
	)
}

底层组件

import React,{useContext} from 'react';
import TestContext from "../store/testContext";

const Test = () => {
const ctx = useContext(TestContext )
	return (
		<div>{ctx.name}</div>
	)
}

Xxx.Provider

• 表示数据的生产者，可以使用它来指定Context中的数据
• 通过value来指定Context中存储的数据，
  这样一来，在该组件的所有的子组件中都可以通过Context来访问它所指定数据

• 当我们通过Context访问数据时，他会读取离他最近的Provider中的数据，

• 如果没有Provider，则读取Context中的默认数据