context

1.Context is translated into context. In the field of programming, this is a concept that is often encountered. React also has:

In Some Cases, you want to pass data through the component tree without having to pass the props down manuallys at every level. you can do this directly in React with the powerful "context" API

 

The official website of the React documentation does not give a definition of "what is Context". It is more about describing the scenarios in which Context is used and how to use Context. In React's official documentation, Context is classified as an advanced part, which belongs to the advanced part of React. API, but the official does not recommend using Context in the stable version of the App.

However, this does not mean that we do not need to pay attention to Context. In fact, many excellent React components complete their functions through Context, such as <Provider /> of react-redux, which provides a global store through Context, drags the component react-dnd, and distributes it in components through Context The Drag and Drop events of the DOM, the routing component react-router manages the routing state through Context, and so on. In React component development, if you use Context well, you can make your components powerful and flexible.

Simply put, when you don't want to pass props or state layer by layer in the component tree to pass data, you can use Context to achieve cross-level component data transfer, come, let's learn it.

 

Use props or state to pass data, data flows from top to bottom:

 

 

Using Context, data can be passed across components:

 

 

2. How to use Context

If you want Context to function, you need to use two components, one is a Context producer (Provider), usually a parent node, and the other is a Context consumer, usually one or more child nodes. So the use of Context is based on the producer-consumer pattern.

For the parent component, that is, the Context producer, it is necessary to declare the properties of the Context object provided to the child component through a static property childContextTypes, and implement an instance getChildContext method to return a pure object representing the Context.

import React from 'react';
const ThemeContext = React.createContext({
  background: 'red',
  color: 'white'
});
export default ThemeContext;
//via static method React.createContext()Create Context object, this Context The object contains two components,<Provider />and<Consumer />
 

import React from 'react';
import ThemeContext from './ThemeContext.js';
import Header from './Header.js';
class App extends React.Component {
  render () {
    return (
      <ThemeContext.Provider value={{background: 'green', color: 'white'}}>
        <Header />
      </ThemeContext.Provider>
    );
  }
}
import React from 'react';
import Title from './Title.js';
class Header extends React.Component {
  render () {
    return (
      <Title>Hello React Context API</Title>
    );
  }
}
export default Header;
 

​
import React from 'react';
import ThemeContext from './ThemeContext.js';
class Title extends React.Component {
  render () {
    return (
      <ThemeContext.Consumer>
        {context => (
          <h1 style={{background: context.background, color: context.color}}>
            {this.props.children}
          </h1>
        )}
      </ThemeContext.Consumer>
    );
  }
}
Title.contextType = ThemeContext
export default Title;
​
//<Consumer />of children Must be a function, obtained through the parameters of the function<Provider />which provided Context

 

 

 

3. The place where the Context can be directly obtained

Note: Descendant component name that accepts value.contextType = ThemeContext

 

Before exporting the component, write a contextType property to the component = context object Themectx;

 

In fact, in addition to the instance's context property (this.context), there are many places where React components can directly access the Context provided by the parent component.

class component:

• constructor(props, context)

• componentWillReceiveProps(nextProps, nextContext)

• shouldComponentUpdate(nextProps, nextState, nextContext)

• componetWillUpdate(nextProps, nextState, nextContext)

• All places that can access this can ==> this.context

Stateless functional components:

const StatelessComponent = (props, context) => (

)