本文共 2216 字，大约阅读时间需要 7 分钟。

Context 通过组件树提供了一个传递数据的方法，从而避免了在每一个层级手动的传递 props 属性。

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

老版本的context API

import React, { Component } from 'react';import './App.css';import PropTypes from 'prop-types';const Topic = (props) => {  return (    
   
      
        
   
  )}const Comment = (props, context) => {  return (    
   
    { context.color }
   
  )}Comment.contextTypes = {  color: PropTypes.string}class App extends Component {  getChildContext() {    return { color: "red" };  }  render() {    return (      
   
        
          
   
    );  }}App.childContextTypes = {  color: PropTypes.string}export default App;

新版本16.3 context

import React, { Component } from 'react';import './App.css';// 第一步，创建 contextconst myContext = React.createContext()// 第二步，创建 Provider Componentclass MyProvider extends Component {  state = {    name: "rails365",    age: 27  }  render() {    return (      
   
            { this.props.children }      
       )  }}const Family = (props) => {  return (    
   
      
    
Family
      
        
   
  )}class Person extends Component {  render() {    return (      
   
        
    
Person
        
    
               { ({ state }) => 
     
My age is { state.age }
 }        
          
   
    );  }}class App extends Component {  render() {    return (      
   
        
    
Hello App
        
              
             
          
   
    );  }}export default App;

API

React.createContext

const {Provider, Consumer} = React.createContext(defaultValue);

• 创建一对 { Provider, Consumer }。当 React 渲染 context 组件 Consumer 时，它将从组件树的上层中最接近的匹配的 Provider 读取当前的 context 值。

• 如果上层的组件树没有一个匹配的 Provider，而此时你需要渲染一个 Consumer 组件，那么你可以用到 defaultValue 。这有助于在不封装它们的情况下对组件进行测试。

Provider

• React 组件允许 Consumers 订阅 context 的改变。

• 接收一个 value 属性传递给 Provider 的后代 Consumers。一个 Provider 可以联系到多个 Consumers。Providers 可以被嵌套以覆盖组件树内更深层次的值。

Consumer

   
      {value => /* render something based on the context value */}
   

• 一个可以订阅 context 变化的 React 组件。

• 接收一个 函数作为子节点. 函数接收当前 context 的值并返回一个 React 节点。传递给函数的 value 将等于组件树中上层 context 的最近的 Provider 的 value 属性。如果 context 没有 Provider ，那么 value 参数将等于被传递给 createContext() 的 defaultValue 。

转载地址：http://vjwii.baihongyu.com/