React 中 ContextThe use of

context

Context provides a way to pass data through the component tree without having to manually pass it level by level

Normally, data is passed level by level in the component. One-way data streams, such as the theme value in the Parent component, need to be passed down from the Parent component to the Item component, but once we have the Context, we don’t need to pass level by level

Parent(theme=red)
    List(theme=red)
        Item(theme=red)
        
ThemeContext.Provider value={'red'}
    List
        ThemeContext.Customer  (theme) => { theme }
Copy the code

How to use it, see the following example

   
import React, { createContext } from 'react'; // The only way to create a Context const ThemeContext = createContext() class App extends React.Component {render () {
    return// Wrap subsequent components with context. Provider, value specified < themecontext.provider value={'red'}>
        <Middle></Middle>
      </ThemeContext.Provider>
    )
  }
}

class Bottom extends React.Component {
  render () {
    return(// context. Consumer Consumer uses the value of Context // But the child cannot be any other component, it must render a function, Consumer> {theme => <h1>ThemeContext is {theme}</h1>}</ themecontext.consumer >)}} class Middle extends React.Component {render () {
    return <Bottom></Bottom>
  }
}

export default App;


Copy the code

When the Provider provides a value that changes, the Consumer must rerender

import React, { createContext } from 'react'; // The only way to create a Context const ThemeContext = createContext() class App extends React.Component {state = {theme:'red'
  }
  render () {
    const { theme } = this.state
    returnProvider value={theme}> {/* When the Context's Provider value changes, */} <button onClick={() => {this.setState({theme:'yellow'})} > Button </button> <Middle></Middle> </ themecontext. Provider>)}} class extends React.Component {render () {
    return(// context. Consumer Consumer uses the value of Context // But the child cannot be any other component, it must render a function, Consumer> {theme => <h1>ThemeContext is {theme}</h1>}</ themecontext.consumer >)}} class Middle extends React.Component {render () {
    return <Bottom></Bottom>
  }
}

export default App;

Copy the code

How do you use it when you have multiple contexts

import React, { createContext } from 'react'; // The only way to create a Context const ThemeContext = createContext() const SizeContext = createContext() class App extends React.Component { state = { theme:'red',
    size: 'small'
  }
  render () {
    const { theme, size } = this.state
    returnProvider: < themecontext. Provider value={theme}> {/* When multiple contexts occur, } < sizecontext. Provider value={size}> {/* When the Context's Provider value changes, */} <button onClick={() => {this.setState({theme:'yellow', size: 'big'})}> Button </button> <Middle></Middle> </ sizecontext. Provider> </ themecontext. Provider>)}} class extends React.Component {render () {
    return(// Consumer.Consumer uses the value of the Context, but the subcomponent cannot be any other component. It must render a function whose argument is the value of the Context. Each Consumer // subcomponent must be a function, < themecontext. Consumer> {theme => (< sizecontext. Consumer> {size => (<h1> ThemeContext is {theme}; SizeContext {size} </h1>)} </ sizecontext.consumer >)} </ themecontext.consumer >)}} class Middle extends React.Component {render () {
    return <Bottom></Bottom>
  }
}

export default App;
Copy the code

React does not generate an error when creating the Context. The default value is passed to the createContext when creating the Context. The default values are displayed

Note: Context is similar to global variables, which makes components less independent and more difficult to reuse. It should not be abused, but it must be suitable for use in different situations

contextType

ContextType can simplify the use of context and share variables without using consumer

Look at the following example


import React, { createContext } from 'react'; // The only way to create a Context const ThemeContext = createContext() const SizeContext = createContext() class App extends React.Component { state = { theme:'red',
    size: 'small'
  }
  render () {
    const { theme, size } = this.state
    returnProvider: < themecontext. Provider value={theme}> {/* When multiple contexts occur, } < sizecontext. Provider value={size}> {/* When the Context's Provider value changes, */} <button onClick={() => {this.setState({theme:'yellow', size: 'big'})}}>按钮</button>
          <Middle></Middle>
        </SizeContext.Provider>
      </ThemeContext.Provider>
    )
  }
}

class Bottom extends React.Component {
  // 申明静态变量、contextType 将 context 直接赋值于 contextType
  static contextType = ThemeContext
  
  render() {// We can call this.context directly in the render function to get the shared variable, so we can not use consumer const theme = this.contextreturn(// Consumer.Consumer uses the value of the Context, but the subcomponent cannot be any other component. It must render a function whose argument is the value of the Context. <div> <h1>ThemeContext value is {theme} </h1> </div>)}} Class Middle extends React.Component {render () {
    return <Bottom></Bottom>
  }
}

export default App;
Copy the code

Note:

  • ContextType can only be used in class components
  • If a component has multiple consumers, contextType is valid for only one of them, so there can only be one contextType

Reference:

  1. The official documentation

The code address

  1. GitHub

React Other documents

  1. Use of lazy, Suspense and Error Boundaries in React
  2. React performance optimization, Memo, PureComponent, shouldComponentUpdate

If it helps, give it a thumbs up