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

  • 相关阅读:
    vim的script、function及command
    Vim中如何移动光标
    command模式下命令的匹配及help内容的搜索
    为什么vim编辑模式下ctrl-w可以前向删除单词及按键映射的展开
    gcc如何实现C++中函数auto返回类型推导
    sqlserver 列转行
    【java笔记】可变长参数(...)
    【c#笔记】可变长参数(params)
    【c#笔记】c#与java的差异:接口定义实现
    【java笔记】Calendar类的陷阱
  • 原文地址:https://www.cnblogs.com/Answer1215/p/8454745.html
Copyright © 2011-2022 走看看