zoukankan      html  css  js  c++  java
  • [React] Use the new React Context API

    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>
    );

  • 相关阅读:
    Android中this.*与*.this还有*.class的区别是什么?
    多线程之CEvent
    Java类型信息之RTTI
    javascript学习-闭包
    javascript学习-对象与原型
    javascript学习-类型判断
    Javascript学习-简单测试环境
    javascript学习-目录
    MySQL数据库安装与配置详解
    深入研究C语言 第四篇
  • 原文地址:https://www.cnblogs.com/Answer1215/p/8454745.html
Copyright © 2011-2022 走看看