context介绍
在平常我们使用react中,数据都是自顶而下的传递方式,如果在顶层组件中的state中存储数据,在不借助任何第三方的状态管理框架的情况下,想在子组件中获取顶层组件的数据,唯一的方法就是一层层进行数据的传递,即使两者之间的组件根本不需要该数据,如果层级越深,层层传递数据可谓是灾难,所以context的出现就解决了这一问题,context是一种跨越层级传递值的一种方法,
context实现步骤
兄弟组件起到的作用类似中间人的模式,先子传父,再父传子
context状态传递数据
先定义一个空对象,抛出一个React.createContext(默认值),结构赋值获取Provider和Consumer组件
根组件中定义在需要的位置使用Context的provider
定义contextType获取数据,或者也可以使用Consumer获取多个内容
代码展示
context.js组件
import React from 'react';
//定义一个对象的数据
let context = React.createContext(null);
//抛出对象的内容
export const {Provider,Consumer} = context;
App.js组件
层级关系:App->Text->Span
我们直接在顶层的组件里使用Provider组件,并且Provider组件有一个value属性用于传递context的实际的value。然后我们就可以在底层的Child组件中得到这些value来使用。
import React from 'react';
import './App.css';
import { Provider, Consumer } from "./context/index";
class App extends React.Component {
constructor() {
super();
this.state = {
color: "#FF0000"
}
}
changeColor = () => {
console.log(this.refs.colors.value)
this.setState({
color: this.refs.colors.value
})
}
render() {
let { color } = this.state;
return (
<Provider value={{ color: color, fontSize: "24px" }}>
<div>
<input type="color" ref="colors" onChange={this.changeColor} />
<Text />
</div>
</Provider>
)
}
}
function Text(props) {
return (
<div>
<h4>Text子组件</h4>
<Span />
</div>
)
}
function Span(props) {
return (
<div>
{/* 接受Provier传递的数据 */}
<Consumer>
{
(context) => {
console.log(context)
return (
<span style={context}>Hello React</span>
)
}
}
</Consumer>
</div>
)
}
export default App;
使用场景:
当我们想要跨层级传递数据时,而数据本身要传递的地方不多,这个时候往往不想再引入一个更复杂的状态管理框架(如redux等),这个时候,context会是一个十分不错的选择