Click “like” and then look, wechat search [Big Move the world] pay attention to this person without dACHang background, but with a positive attitude upward. In this paper, making github.com/qq449245884… Has been included, the article has been categorized, also organized a lot of my documentation, and tutorial materials.

Everyone said there was no project on your resume, so I found one and gave it away【 Construction tutorial 】.

All of these new React Hooks have a common purpose: to make function components as powerful as class components.

UseContext Hook is a little different from the others, but it can be useful in certain scenarios.

The React Context API is a way to pass data in depth within an application without having to manually pass prop from parent to parent. It can be a good alternative to tools like Redux when all we need is to pass data around.

With Context, the top layer declares the Provier component and the value property, and then in the descendant component declares the Consumer component, which must be a unique function whose argument is the payload of the Context. If there are multiple contexts, providers and consumers can be nested in any order.

In addition, we can use contextType for any Context to simplify fetching the payload of that Context. But in a component, even if multiple contexts are consumed,contextType can only point to one of them.

In the Hooks environment, you can still use Consumer, but ContextType is definitely not used as a static member of the class. Hooks provide useContext, which resolves the problem that Consumer is difficult to use and that contextType can only use one context.

A standard way

A typical way to use an API is as follows:

import React from "react"; import ReactDOM from "react-dom"; // createContext const NumberContext = react.createcontext (); // it returns an object with two values // {Provider, Consumer} function App() {return (< numberContext. Provider value={42}> <div> <Display /> </div> </NumberContext.Provider> ); } function Display() {// Use Consumer to get value from context return (< numberContext.consumer > {value => <div>The answer is {value}.</div>} </NumberContext.Consumer> ); } ReactDOM.render(<App />, document.querySelector("#root"));Copy the code

You can see it in action on CodeSandbox.

Use the useContext mode

Rewrite the above example using useContext hook

import React, { useContext } from 'react';

// ...

function Display() {
  const value = useContext(NumberContext);
  return <div>The answer is {value}.</div>;
}
Copy the code

UseContext is called, passing in the context object obtained from React. CreateContext.

The only caveat is that you must pass the entire context object to useContext – not just the Consumer, though React will warn you if you forget it.

Nested Consumers

You may run into situations where our component needs to receive data from multiple parent contexts, resulting in code like this

function HeaderBar() {
  return (
    <CurrentUser.Consumer>
      {user =>
        <Notifications.Consumer>
          {notifications =>
            <header>
              Welcome back, {user.name}!
              You have {notifications.length} notifications.
            </header>
          }
      }
    </CurrentUser.Consumer>
  );
}
Copy the code

This is a lot of nesting just to receive two values. Here’s what it looks like using useContext:

function HeaderBar() {
  const user = useContext(CurrentUser);
  const notifications = useContext(Notifications);

  return (
    <header>
      Welcome back, {user.name}!
      You have {notifications.length} notifications.
    </header>
  );
}
Copy the code

conclusion

UseContext receives a context object (the return value of react. createContext) and returns the current value of the context. The current context value is determined by the value prop of the upper component < countContext. Provider> that is closest to the current component.

When the most recent

update is made to the upper level of the component, the Hook triggers a rerender and uses the latest context value passed to the CountContext Provider.

Remember that the argument to useContext must be the context object itself:

  • Right: useContext (MyContext)
  • Error: useContext (MyContext. Consumer)
  • Error: useContext (MyContext. The Provider)

Components that call useContext are always rerendered when the context value changes. If rerendering components is expensive, you can optimize them by using Memoization.

The bugs that may exist after code deployment cannot be known in real time. In order to solve these bugs, I spent a lot of time on log debugging. Incidentally, I recommend a good BUG monitoring tool for youFundebug.

Reference:

Daveceddia.com/usecontext-…

communication

This article is updated every week, you can search wechat “big move the world” for the first time to read and urge more (one or two earlier than the blog hey), this article GitHub github.com/qq449245884… It has been included and sorted out a lot of my documents. Welcome Star and perfect. You can refer to the examination points for review in the interview.