Detailed explanation of Context API of React 16.3

React has introduced a new Context API in version 16.3-alpha, and the community is looking forward to it. Let’s first use a simple example to see what the new Context API looks like, and then briefly discuss the meaning of the new API.

You need to install the 16.3-alpha version of react. The construction steps are not the focus of this article. This article mainly shares with you the detailed explanation of the Context API of React 16.3. I hope it can help you.

npm install react@next react-dom@next

Next, let’s look at the code directly. If you have used react-redux, it should look familiar.

First, create the context instance:

import React from 'react';
import ReactDOM from 'react-dom';

// 创建context实例
const ThemeContext = React.createContext({
  background: 'red',
  color: 'white'
});

Then, define the App component. Note that the Provider component is used here. Provider component similar to react-redux.

class App extends React.Component {

  render () {
    return (
      <ThemeContext.Provider value={{background: &#39;green&#39;, color: &#39;white&#39;}}>
        <Header />
       </ThemeContext.Provider>
    );
  }
}

Next, define the Header and Title components. Note: The

1. Title component uses the Consumer component, indicating that it wants to consume the data passed by Provider.

2. Title component is the Sun component of App, but Header consumption is skipped data.

class Header extends React.Component {
  render () {
    return (
      <Title>Hello React Context API</Title>
    );
  }
}

class Title extends React.Component {
  render () {
    return (
      <ThemeContext.Consumer>
        {context => (
          <h1 style={{background: context.background, color: context.color}}>
            {this.props.children}
          </h1>
        )}
      </ThemeContext.Consumer>
    );
  }
}

Finally, regular operations

ReactDOM.render(
  <App />, 
  document.getElementById('container')
);

Look at the program running results:

Why is there a new Context API

Students who have used redux + react-redux should find the new Context API very familiar. Those who have read the react-redux source code will know that react-redux itself is implemented based on the old version of the Context API.

Since there is already a ready-made solution, why is there a new Context API?

1. There are certain problems in the implementation of the existing Context API: for example, when the parent component's shouldComponentUpdate performance is optimized, it may cause the child components that consume context data not to be updated.

2. Reducing complexity: Solutions like redux Family Bucket introduce a certain degree of complexity to the project. Especially students who do not know enough about the solution may be at a loss when encountering problems. The introduction of the new Context API can, to a certain extent, reduce the dependence of many projects on the redux family bucket.

Written at the back

The new Context API, personally, I am more looking forward to the improvement in performance. As for reducing complexity and replacing redux, it is not my focus. The next plan is to conduct comparative testing with multiple construction point use cases.

The above is the detailed content of Detailed explanation of Context API of React 16.3. For more information, please follow other related articles on the PHP Chinese website!