首页 > Windows开发 > 详细

[React] Use the new React Context API

时间:2018-02-20 10:05:28      阅读:279      评论:0      收藏:0      [点我收藏+]

The React documentation has been warning us for a long time now that context shouldn‘t be used and that the API is unstable. Well, with the release of React 16.3, we‘re finally getting a stable context API and what‘s even better is that it has received a makeover and the dev experience is fantastic! In this lesson, we‘ll look at an example app that passes props down several levels deep into the component tree and replace all that prop drilling with the new context API. We‘ll see how to create a Provider and a Consumer, how to use them in the code and we‘ll take a look at how the default properties that get passed into createContext come into play.

 

A condition that we need ‘context‘ API is to avoid pass Props all the way down to the component tree.

For example:

 

 

So porps are passed all the way down from 

  PageWrapper

          -- ProfileWrapper

      -- ProfileDetails

 

New context API looks like this:

1. Create an Context service:

import { createContext } from "react";

const ProfileContext = createContext({
  firstName: "Sally",
  lastName: "Anderson"
});

export const ProfileProvider = ProfileContext.Provider;

export const ProfileConsumer = ProfileContext.Consumer;

 ‘createContext‘ takes an default value. 

 

2. Wrap the top level component into Provider:

import { ProfileProvider } from "./ProfileContext";

  render() {
    return (
      <ProfileProvider value={this.state.profile}>
        <PageWrapper />
      </ProfileProvider>
    );
  }

 

If you want to just use default value, don‘t provide the Provider... this approach is a little bit strange.

  render() {
    return (
      <PageWrapper /> // may change in release
    );
  }

 

3. Remove all the props passed down.

4. In the component which do need context, use Consumer, Cunsumer takes a function as child.

import React from "react";
import { ProfileConsumer } from "./ProfileContext";

export const ProfileDetails = props => (
  <ProfileConsumer>
    {context => (
      <div>
        <div>
          <strong>First name:</strong> {context.firstName}
        </div>
        <div>
          <strong>Last name:</strong> {context.lastName}
        </div>
      </div>
    )}
  </ProfileConsumer>
);

 

[React] Use the new React Context API

原文:https://www.cnblogs.com/Answer1215/p/8454745.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!