React Context

Context 提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法。

在一个典型的 React 应用中，数据是通过 props 属性自上而下（由父及子）进行传递的，但这种做法对于某些类型的属性而言是极其繁琐的（例如：地区偏好，UI 主题），这些属性是应用程序中许多组件都需要的。Context 提供了一种在组件之间共享此类值的方式，而不必显式地通过组件树的逐层传递 props。

Context的使用场景

Context 是为了在一个组件树内部共享"全局"的数据而设计的, 因此当涉及一些全局可能需要获取的数据可以考虑使用Context, 例如: 当前用户的认证、页面属性、首先语言等等.

使用之前的考虑

1. 谨慎使用Context, 因为这会使得组件之间的复用性变差.
2. 如何避免组件间props的层层传递问题?
   • 方案1: React Context
   • 方案2: 组件组合(component composition)

API

React.createContext

• 创建一个 Context 对象。当 React 渲染一个订阅了这个 Context 对象的组件，这个组件会从组件树中离自身最近的那个匹配的 Provider 中读取到当前的 context 值。
• 只有当组件所处的树中没有匹配到 Provider 时，其 defaultValue 参数才会生效。这有助于在不使用 Provider 包装组件的情况下对组件进行测试。注意：将 undefined 传递给 Provider 的 value 时，消费组件的 defaultValue 不会生效。
• */context/index.ts

  import React from 'react';
  import IAppContext from './IAppContext';
  import Initializer from './initializer';
  
  //    const MyContext = React.createContext(defaultValue);
  const AppContext = React.createContext<IAppContext>(Initializer.default);
  
  export default AppContext;
  

• */context/IAppContext.ts

  export default interface IAppContext {
    lan: string;
    userId: number;
    hotelId: number | string;
    isInternalUser: boolean;
    dyffs: KeyValuePairs<boolean>;
    [key: string]: any;
  }
  

• */context/initializer.ts

  import IAppContext from './IAppContext';
  
  export default {
      default: {
          hotelId: 0,
          isInternalUser: false,
          lan: 'en-us',
          userId: 0,
          dyffs: {}
      },
  
      init(): IAppContext {
          // @ts-ignore
          const ga = global.EPC && global.EPC.Logging && global.EPC.Logging.GA;
          const { href } = window.location;
          const isDev = href.search('localhost.expediapartnercentral.com') !== -1;
  
          return {
              hotelId: (ga && ga.resourceId) || this.default.hotelId,
              isInternalUser: (ga && ga.isInternalUser) || this.default.isInternalUser,
              lan: (ga && ga.locale) || this.default.lan,
              dyffs: window.EPC && window.EPC.DYFFs || {},
              userId: (ga && ga.userId) || this.default.userId,
          };
      },
  };
  

Context.Provider

Context.Consumer

Class.contextType

Context.displayName

获取Context的方法?

1. 使用 Content 提供的 Consumer 组件
2. 使用 useContext
   useContext 函数是 React Hooks 三大基础 hooks函数之一.

   import React from 'react';
   import AppContext from '../../common/context';
   
   //  获取Context的值;
   const context = React.useContext(AppContext);
   

Examples

Attentions

1. 重复渲染问题

• 因为 context 会使用参考标识（reference identity）来决定何时进行渲染，这里可能会有一些陷阱，当 provider 的父组件进行重渲染时，可能会在 consumers 组件中触发意外的渲染。举个例子，当每一次 Provider 重渲染时，以下的代码会重渲染所有下面的 consumers 组件，因为 value 属性总是被赋值为新的对象：

class App extends React.Component {
    render() {
        return (
            <MyContext.Provider value={{something: 'something'}}>
                <Toolbar />
            </MyContext.Provider>
        );
    }
}

• 为了防止这种情况，将 value 状态提升到父节点的 state 里：

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
           value: {something: 'something'},
        };
    }

    render() {
        return (
            <Provider value={this.state.value}>
                <Toolbar />
            </Provider>
        );
    }
}

2. 不依赖 ReactDOM

• React Context 并不依赖于 ReactDOM 的 render, 也不需要放在根节点上, 它可以放在任何节点.
• 同时, 只要保证在Provider的子孙节点里面, 就可以使用 React.useContext() 或者 Context 提供的Consumer组件去取Context对象的内容.