sibling component communication context

Introduction to context

In normal use of react, data is transmitted from top to bottom. If data is stored in the state in the top-level component, without any third-party state management framework, you want to store data in the child component.The only way to get the data of the top-level components is to transfer the data layer by layer, even if the components between the two do not need the data at all, if the layer is deeper, the layer-by-layer data transfer can be described as a disaster, so the emergence of context is a disaster.To solve this problem, context is a way to pass values ​​across levels,

context implementation steps

The role of the sibling component is similar to the middleman model, first son to father, then father to son

context state transfer data

First define an empty object, throw a React.createContext (default value), and assign the structure to get the Provider and Consumer components

The root component defines the provider that uses the Context where needed

Define contextType to get data, or you can use Consumer to get multiple content

Code display

context.js component

import React from 'react';//Define the data of an objectlet context = React.createContext(null);// throw the content of the objectexport const {Provider,Consumer} = context;

App.js component

Hierarchical relationship: App->Text->Span

We use the Provider component directly in the top-level component, and the Provider component has a value property for passing the actual value of the context.Then we can get these values ​​to use in the underlying Child component.

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 ({ color: color, fontSize: "24px" }}>
)}}function Text(props) {return (
Text subcomponent
)}function Span(props) {return (
{/* Accept data from Provider */}{(context) => {console.log(context)return (Hello React)}}
)}export default App;

Use scenarios:

When we want to pass data across levels, and there are not many places to pass the data itself, we often don't want to introduce a more complex state management framework (such as redux, etc.) at this time, the context will be a verygood choice