Ⅰ- 壹 - React-Context(上下文)
定义: Context提供了一种方式,能够让数据在组件树中传递,而不必一级一级手动传递。
大概简述
- 首先需要创建一个上下文的容器:React.createContext
export const { Provider,Consumer }=createContext()
- Provider(生产者): 用于生产共享数据的地方。
<Provider value={/*共享的数据*/}>
/*里面可以渲染对应的内容*/
</Provider>
Consumer(消费者):Consumer需要嵌套在生产者下面。才能通过回调的方式拿到共享的数据源。当然也可以单独使用,那就只能消费到上文提到的defaultValue
<Consumer>
{value => /*根据上下文 进行渲染相应内容*/}
</Consumer>
简单使用
- 首先创建react脚手架,能看这个的估计都会我就不演示了
- 在src创建两个jsx文件,Context.jsx,Son.jsx,Grandson.jsx
- index.js 导入Context.jsx并且挂载
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import Contextfrom './Context'
ReactDOM.render(
<Context></Context>,
document.getElementById('root')
);
Context.jsx
//结构createContext
import React, { Component, createContext } from 'react'
import Son from "./Son"; //导入子组件
创建一个 Context, 并且导出
export const { Provider,Consumer }=createContext()
export default class Context extends Component {
constructor(props) {
super(props)
}
state = {
name:"上下文"
}
render() {
return (
<div>
<p>React Context(上下文)</p>
//Provider共享容器 接收一个name属性
<Provider value={this.state.name}>
<div>生产者</div>
<Son></Son>
</Provider>
</div>
)
}
}
Son.jsx
import React from 'react'
import { Consumer } from "./Context";//引入父组件的Consumer容器
export default function Son(props) {
return (
<div>
<Consumer>
{
(value) => {
return <p> {value}</p>
}
}
</Consumer>
</div>
)
}
Grandson.jsx
import React from 'react'
import { Consumer } from "./Context";
export default function Grandson(props) {
return (
<div>
<Consumer>
{
(value) => {
return <p>孙组件获取的数据 {value}</p>
}
}
</Consumer>
</div>
)
}